-
Trust-Centered Payment Form
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.
Impact
24%
payment form completion rate
Support tickets
related to payment issues
Responsibility
End-to-End UX & UI Design Process
Collaborators
Sr. Product Manager
Front-end Engineer
Back-end Engineer
Duration
2 months
15% of member churn due to poor security cues
Business problem
Frustration with the billing experience leads to increased support tickets and manual intervention.
Gathering insights
To understand why payments were prone to errors and time-consuming, I shadowed billing operators and mapped their daily workflow.
What members said
“I don’t feel comfortable providing my credit card information over the phone.”
“I already entered my info, why am I being asked again?”
“I want to add more than one payment method.”
“The page looks so outdated. It felt sketchy.”
Auditing the current user flow
Phone-based card collection
Created security risks and made users uncomfortable
Repeated steps
frustrated users and undermined trust in the platform
No real-time validation
Led to frequent input errors and invalid entries
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
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
Final design
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
Improve clarity and guidance
Crafted contextual error messages for scenarios like missing cards, invalid entries, and Stripe errors
Helped reduce confusion and align product and engineering on system behavior
Input validation error state
Stripe validation error state
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
Impact
24%
payment form completion rate
Support tickets
related to payment issues
What I learned
This project highlighted how important it is to communicate security clearly, not just build it in. Even when systems are secure under the hood, a poor UX can erode trust. Small choices, like when to ask for payment or how to phrase error messages, can have an outsized impact on user confidence.