-
Unified Payment Workflow
Overview
Foresight’s internal payment system was inefficient, error-prone, and fragmented across multiple pages, costing operators time and resulting in lost revenue for the company. I led the end-to-end redesign of this system, focusing on streamlining workflows and integrating Stripe to improve security, accuracy, and task efficiency.
Through in-depth user research and cross-functional collaboration, I identified core pain points and prioritized a phased solution. The first release resolved critical workflow bottlenecks; the second scaled improvements to support long-term usability and business growth. The result was a faster, more secure payment process that significantly reduced manual work and boosted team productivity.
Impact
85%
98%
Copay collection rate
$1M
Revenue recovered
Responsibility
End-to-end process (Research, Define problems, Ideation, Wireframing, Prototyping, Testing, Visual Design)
Collaborators
Product Manager
Engineers
Billing Team
Product Designer (me)
Duration
6 months
Business problem
Operational inefficiencies and security risks led to revenue loss and eroded member trust.
Behind the daily struggle
To understand why payments were prone to errors and time-consuming, I shadowed billing operators and mapped their daily workflow.
Key insights
Too many manual steps
Each payment took up to 10 minutes due to repeated data entry, card verification, and avoidable errors.
Scattered data across pages
Users processed ~1,000 claims daily, navigating across disconnected pages and taking 6 steps per transaction.
No real-time validation
15% of transactions failed, mostly from invalid credit card data and lack of real-time validation.
Exposed card details
Full credit card numbers were visible, posing major security and compliance risks—leading to lost trust.
Challenge 1: Fragmented workflow and inefficiency
Users took 6 steps to complete tasks, repeatedly copying and pasting data across platforms, causing inefficiency
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.
Streamlined workflow with fewer steps
Reduced payment process from 6 to 2 steps by eliminating manual tasks
Automated card validation to prevent duplicate data entry
Enabled direct in-portal payment processing
Centralized 'Payments' page for faster task management
Introduced a single hub with status indicators: Pay, View, or No Action
Added filtering by location, date, and status to prioritize tasks efficiently
Quick access to payment details
Hover or click to view Stripe transaction details, refunds, and receipts
Improved glanceability and reduced context switching with in-line info
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
Cluttered layouts with poor glanceability
Not user-friendly with large-screen users
Problem with the payment form obstructing copay notes
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
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.
Challenge 2: Manual payment entry and high error rate
Operators had to manually enter and verify sensitive payment data, leading to frequent errors, security risks, and time-consuming corrections.
Secure, error-reducing payment form
Before
After
Payment form
Displayed only partial card numbers to protect privacy
Pre-filled copay notes for accuracy and speed
Real-time validation with Stripe ensured secure, accurate transactions
Error copy developments
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 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.
Impact
80%
Payment processing (10 → 2 minutes per claim)
85%
98%
Copay collection rate
$1M
Revenue recovered within a month of launch on copay alone
What I learned
Plan to replan
Unexpected challenges are part of any project. Staying flexible and open to change helped us adapt quickly and stay on track.
Little details matter
Small UX decisions like wording, layout, or spacing can make or break the experience. Thoughtful details build trust and clarity.