Optimizing Payment Workflow with a Unified System
Overview
I led the end-to-end redesign of the internal payment system for billing team members, focusing on streamlining fragmented workflows and integrating Stripe to enhance productivity and reduce revenue loss.
Through user research and close collaboration with stakeholders, I identified key pain points in the manual payment process and prioritized high-impact changes for the MVP. I then planned a second release to expand on those improvements, ensuring the solution scaled with both user needs and business growth.
Responsibility
End-to-end process (Research, Define problems, Ideation, Wireframing, Prototyping, Testing, Visual Design)
Collaborators
Product Manager
Engineers
Billing Team
Designer (that's me!)
Duration
6 months
Context
At Foresight Mental Health (FMH), the billing team faced an inefficient payment workflow that led to productivity loss and revenue leakage. With over 10,000 members and rapid growth, FMH needed to streamline operations, strengthen security, and ensure compliance to support scalable success.
Challenge
Operators processed thousands of payments daily through a fragmented, 6+ step workflow spread across multiple pages. Manual data entry, credit card verification, and scattered information led to errors, delays, and a 15% payment failure rate.
Impact
$1M revenue collected within the first-month post-launch
98% copay collection rate achieved
User Problem
User productivity decreases due to an inefficient payment system.
Pain points
User
Average of 10 minutes spent correcting each claim
Manual data entry for approximately 1,000 claims daily
15% of transactions failed due to invalid card information
Business
Unrecovered revenue from inefficient payment processes
Member loss due to low trust and collection rates
Compliance and data security risks
40% of payment errors caused by manual claim entry
Research
Gathering insights by shadowing
I engaged directly with users to identify best practices for structuring workflows and prioritizing actionable questions.
Current workflow
1.
Excessive Manual Steps
Too many steps are required to enter or verify data
2.
Security Risks
Potential exposure of members’ card information
3.
Inefficient Process
Requires at least 6 steps to complete a single payment transaction
Define
Prioritize use cases
After analyzing various scenarios, we prioritized them using a chart, identifying member copays as the primary issue—accounting for approximately 80% of payment types. Operator feedback during research consistently highlighted copays as the most urgent concern. This insight led us to focus on a low-effort, high-impact area, making it the core of the project strategy.
Goal
Streamline payment process with Stripe integration to enhance user’s work efficiency.
Ideation
Exploring the most efficient workflow
In this phase, I explored various workflow structures to enhance usability and optimize the overall user experience. The focus was on reducing complexity by designing a more secure and efficient process, minimizing manual steps through seamless Stripe integration.
Version 1
Utilize the Existing Flow and Page
Integrate the payment feature into the existing member profile page, where operators currently access card information.
What Worked: The familiar interface minimized user confusion.
What Didn’t: Still required multiple steps to navigate, resulting in a less streamlined workflow.
📌
Version 2
Create a Dedicated Payments Page with a New Flow
Design a standalone Payments page, accessible from the top navigation menu.
What Worked: Streamlined workflow with direct access to payment information. Also provided flexibility for future scalability.
What Didn’t: Required additional backend development resources to implement.
We selected Version 1 for the MVP due to faster implementation timelines, with plans to develop Version 2 post-launch to support long-term scalability.
The workflow detailed below focuses on Version 2.
Usability Testing
Testing my solutions
Two rounds of unmoderated testing validated key design decisions and highlighted opportunities to improve clarity and engagement. Each participant interacted with prototypes in a randomized order to prevent bias. Insights from testing shaped the final scope—confirming high-value inputs and refining content structure and interaction patterns to enhance user engagement.
Iterations 1–3
Iteration 1
Iteration 3
Not user-friendly with large screen users
Poor glanceability
Problem of payment form obstructing copay notes
Insight: Displaying all payment details in a single table caused clutter and usability issues, especially with complex copay notes and limited screen space.
Action: Shifted toward a more structured layout that balances information density with clarity, separating complex details from primary actions to reduce cognitive load and improve form efficiency.
Iteration 4
Clear display of the copay note
Enhanced ease of information access
Insight: Operators struggled with cluttered layouts that made scanning tasks and accessing details inefficient.
Action: Moved copay notes into the payment form and kept payment types/transactions in the table, clarifying structure, reducing clutter, and enabling faster task management.
outcomes
Final Design
This final design not only improved operator productivity but also enhanced security, reduced processing times, and minimized errors, directly contributing to increased revenue and operational efficiency.
Optimized workflow
Streamlined workflow from 6 steps to 2 by eliminating manual processes and syncing data
Automated credit card validation to prevent duplicate data entry
Enabled in-portal payment processing for operators
New "Payments" page
Manage all transactions within one interface
Payment statuses are clearly marked:
Pay – Indicates action is required to charge the member.
View – Confirms a completed transaction and provides access to full payment details in Stripe.
Empty Field – Identifies members without copay fees, allowing for quick dismissal using “No Action.”
Tasks can be filtered by location, date, payment status, or type to help prioritize workloads efficiently.
View payment detail
Essential payment details are accessible via hoverable “Info” icons or by clicking “View” to see the full Stripe transaction data.
Additional Benefits:
Automated receipts and refunds
Enhanced reporting
Secure, compliant workflows
Enhanced payment form
Before
Manual data entry and verification led to inefficiencies
High risk of exposing sensitive credit card data
After
Payments are processed through a locked, secure form, with only partial credit card numbers displayed to protect privacy
Copay notes are pre-populated in the payment form, enabling faster, error-free transactions
Real-time credit card validation, integrated with Stripe, ensures data accuracy, prevents duplication, and speeds up processing
Additional consideration
Error copy developments
Why It Started: Error copy development began in response to user challenges—operators often struggled to resolve issues in the payment workflow, such as missing credit card information or failed transactions. Without clear guidance on how to proceed, this led to frustration and delays.
Impact on Product Teams: Improved error messaging enhanced the user experience and streamlined communication across product teams by clearly defining edge cases and aligning on solutions.
What I Did: I developed error messages for issues such as missing credit data and Stripe-related errors, reducing uncertainty and guiding users with clear next steps. This improved workflow clarity, minimized downtime, and increased overall efficiency.
Impact
The results
80%
faster payment processing
10 minutes → 2 minutes per claim
Copay collection rate:
85%
98%
$1M
revenue recovered
Learnings
Plan to replan
In any project, unforeseen challenges are inevitable. Our experience underscored the importance of flexibility and the ability to adapt plans as needed. As we navigated the complexities of payment systems, it became clear that agile thinking and a willingness to pivot were essential. Being prepared to replan allowed us to respond to obstacles more efficiently and keep the project on track.
Little details matter
Whether it’s the choice of colors, the placement of elements, or the wording of instructions, every detail contributes to the overall user experience. Paying attention to these small details reflects a commitment to excellence and user satisfaction. It shows that designers deeply care about every aspect of the user journey and are dedicated to creating intuitive, thoughtful, and delightful experiences.