Designing secure payment experiences
Background
The project focused on stored payment cards in a legacy health-tech product, serving patients and internal admin users.
The problem
In a health-tech legacy product that I worked on, patients had to re-enter their card information every payment, causing friction and frustration. This led to lower payment completion rates and lost revenue for clients.
The approach
I designed and implemented a stored payment card management system using Stripe, ensuring seamless usability for clients and patients.
Story mapping for understanding and alignment
What is the vision for this product?
I conducted interviews with internal stakeholders to understand product, technical, and regulatory constraints of Stripe integration, as well as the needs of our clients.
Together, we mapped existing and “to-be” versions of workflows to identify where the new payment system would need to be integrated.
The experience had to be consistent for both admin and patient-facing screens.
Quick iteration and prototyping
Using a well-established design system, I created high-fidelity wireframes and prototypes throughout all of the payment flows to visualize card management features:
- Adding and removing cards.
- Default card selection for quick payments.
- A dedicated “Manage Cards” page.
- Admin-facing screens to allow patients to store payment methods.
Reducing payment friction through A/B testing
I used concept-based scripts and scenarios to simulate real-world use cases with subject matter experts and external customers. I also facilitated A/B tests to gather insights on:
- The placement and visibility of card management features.
- User preferences for card removal during or outside of payment workflows.
Afterward, I synthesized the research findings collected by a moderator into actionable reports to share with stakeholders. This also guided my own design iteration.
How do patients prefer selecting stored cards on file?
These were two early A/B test versions put in front of users.
Patients prefer to see it all
80% of patient testers preferred to see all of the cards with a clear call to action to add additional payment methods via Stripe.
With some tweaks to wording and layout, and conversations with the developer and legal teams, this final design tested well with users.
How do patients prefer managing their cards on file?
Here we tested iterations for when and where patients would be able to manage their cards on file.
A separate place for managing cards reduces payment friction
While users liked the ability to remove a card on file, most preferred a separate place for managing their available cards, as this provided more management features.
Outcome
My design for storing cards on file led to a secure financial payment system that allows users to store, manage, and select default payment cards seamlessly.
The design contributed to:
- Reduced transaction errors and improved user satisfaction with payment workflows.
- Positive feedback from healthcare providers on the clarity and efficiency of the management interface, as well as increased collection rates.
- Alignment with broader UX initiatives to modernize the platform.
Reflection
* Reflection to be added.