Creating a Secure Payment Form to Build Trust and Compliance
Overview
As Foresight Mental Health expanded, ensuring a secure and user-friendly payment experience became critical for building trust with new members. I led the redesign of the payment form within the new member booking flow to address usability issues, reduce security concerns, and eliminate repetitive steps. Through user research, design iteration, and Stripe integration, I introduced a modern, intuitive form that increased completion rates, reduced errors, and improved operational efficiency. The result was a more trustworthy experience that improved completion rates, reduced errors, and supported FMH’s growth and compliant solution.
Responsibility
End-to-End UX & UI Design Process
Collaborators
Sr. Product Manager
Front-end Engineer
Back-end Engineer
Duration
2 months
Challenge
New and potential members felt uneasy entering payment information due to unclear messaging, outdated design, and repetitive steps. This lack of trust and usability led to incomplete submissions, manual workarounds, and lost revenue, posing both user experience and compliance risks as FMH scaled.
Impact
After launching the redesigned payment experience, alongside two other key features, we achieved:
Payment form completion increased by 24%
Significant drop in support tickets related to payment issues
User Problem
Users feel uncomfortable exposing their payment information and are often confused by uncertain messages and repetitive processes
Research
What users said
User quotes
“I don’t feel comfortable providing my credit card over the phone.”
“I already entered my info, why am I being asked again?”
“The page looks so outdated. It felt sketchy.”
“I want to add more than one payment method.”
Pain points
User
Discomfort with sharing card details due to poor security cues
Confusion from unclear or misleading system messages
Frustration with repetitive steps and outdated design
Business
Revenue loss due to dropped or failed payments
Member loss due to low trust and collection rates
Compliance and data security risks
40% of errors caused by manual input and outdated workflows
Gathering insights by shadowing
I engaged directly with users to identify best practices for structuring workflows and prioritizing actionable questions.
Current workflow
1.
Phone-based card collection
Posed security risks and user discomfort
2.
No real-time validation
Led to frequent input errors and invalid entries
3.
Unclear error messages
Caused confusion and slowed task completion
4.
Outdated UI design
Diminished user trust and perceived credibility
Analyzing existing market products
Market research and competitor analysis revealed common design patterns and user expectations, helping identify effective strategies to improve the payment experience.
Insight 1
Ask for essentials only
Reducing cognitive load improves form completion rates
Insight 2
Tell users what went wrong
Clear, actionable error messages reduce drop-off
Insight 3
Reassure security
Displaying secure icons and messaging builds trust at the point of friction
Goal
Build user trust, strengthen payment security, and streamline the experience by reducing uncertainty
Ideation
Minimizing drop-off through smart placement
The New Member Booking Flow allows new members to make appointments independently. We introduced a new payment page within the existing booking flow. The goal was to place the form where it feels natural and minimizes user drop-off.
After evaluating multiple options, we chose Option 3 — placing the payment form at the end of the flow. This ensures users complete all other steps first and are more prepared to provide payment details.
Why Option 3?
Option 1
Asking too early in the process can be off-putting for users
Option 2
Uncertainty around session availability may cause confusion
📌
Option 3
Reduces friction by requesting payment only when users are ready to commit
outcomes
Final design highlights
Reduce uncertainty
Clearly display when and how members will be charged
Reassure users with visible security messaging
Alleviate anxiety by setting expectations early in the flow
Enhance security and accuracy
Real-time credit card validation via Stripe
Auto-detect and display card type during entry
Provide immediate, clear feedback on input errors with guided resolution
Visual and UX improvements
Modern, responsive layout aligned with FMH’s brand
Clean, accessible design that improves clarity and builds trust
Streamlined interactions for a smoother, mobile-first experience
Before
After
Error copy developments
Why It Started:Users often encountered unclear or missing error messages when entering invalid card information or experiencing Stripe failures. This lack of guidance caused confusion, repeated attempts, and unnecessary support escalation.
Impact on Product Teams: Improved error messaging reduced user friction and helped product, design, and engineering teams align on edge cases and system responses, leading to faster issue resolution and fewer support tickets.
What I Did: I crafted clear, contextual error messages for scenarios such as missing credit card data, invalid inputs, and Stripe connection issues. These messages helped users understand what went wrong and how to fix it, reducing uncertainty and improving task completion.
Input validation error state
Stripe validation error state
Impact
The results
24%
increase
in payment form completion rate
Significant drop in support tickets
related to payment issues