Full Redesign | Problem-Solving
Optimizing Payment System
Enhancing billing team efficiency by implementing an optimized payment system.
My Role
Research, Define problems, Ideation, Wireframing, Prototyping, Testing, Visual Design
Team Members
Sr. Product Manager
Front-end Engineer
Front-end Engineer
Back-end Engineer
Duration
6 months
Context
About
This is a redesign of the payment processing experience for billing team members. Our goal was to streamline the payment process with Stripe integration to enhance user productivity.
How Payment experience Looks like
Billing team members execute payments against members on behalf of FMH and reconcile account receivables by accessing payment reports.
User Problem
User productivity decreases
due to an inefficient payment system.
Spend an average of 10 mins/claim to rectify double data entry (about 1000 claims per day)
Fail to collect at least 15% of accounts receivable (AR) payment transactions due to invalid credit card information
Solution
Streamline payment process to enhance user’s work efficiency
Optimized payment workflow
Improved from 6 to 2 steps
Removed manual steps
No more double data entry
New Payments page
Organize tasks with a customized table design
Access payment details swiftly (reduced from 10 minutes to 2 minutes per claim)
Capability to provide invoices or receipts to members
Enhanced payment form
Ensure payments are made using valid credit card information
Enhance clarity with precise copy
Mitigate the risk of exposing members' payment information
Results
Business impact
After all 3 features went live:
1M
revenue
collected within a month of launch on copay alone
of copay collection rate
👇 Step by Step process👇
Here's how it's been done
The chart outlines the milestone steps and the entire process that guided us from discovery to delivery. Despite extensive mapping, we encountered some hiccups along the way. As a result, we had to replan and revisit our mapping exercises.
Discover
User
Billing team members
Execute payments against members using the provided credit card
Help members make payment through a secure workflow
Provide receipts to members
Access to payment reporting
User problems
User productivity decreases due to an inefficient payment system, and they are often unable to complete their tasks due to no credit card validation.
Spending an average of 10 minutes per claim to rectify double data entry, with approximately 1000 claims processed per day.
Failing to collect at least 15% of accounts receivable (AR) payment transactions due to invalid credit card information.
Business problems
FMH loses members due to diminished trust and a low payment collection rate could put the business at risk.
100% no security of collecting credit card information (high risk of data breach)
40% of the outstanding payers result from double data entry such as incorrect claim data
15% of failure to collect accounts receivable (AR) payment transactions due to invalid credit card information
Current workflow
⚠️ Involves too many manual steps to enter or verify data
⚠️ Risk of exposing members’ card information
⚠️ Need at least 6 steps to proceed for one payment transaction
Define
Prioritize use cases
After analyzing various scenarios, we compiled them into a chart and prioritized them based on importance.
Throughout the research phase, operator users highlighted member copay as the primary issue requiring immediate attention, as it constitutes approximately 80% of payment types. Therefore, for this project, we opted to concentrate on the low-effort zone, primarily centered on copay payments.
Goal
Streamline payment process with Stripe integration to enhance user’s work efficiency
Ideate
Workflow explorations
Aimed at simplifying complexity. Establish a more secure and organic structure with fewer manual steps through Stripe integration.
V1: Utilize the Existing Flow and Page
Description: Integrate the payment feature into the existing member profile page where operators access card information.
What Worked:
Familiar interface for users, leading to less confusion
What Didn’t:
Still requires several steps to navigate to the page, resulting in a less streamlined workflow
V2: Create a Dedicated Payments Page with a New Flow
Description: Create a new, standalone page specifically for payments, accessible from the top navigation menu.
What Worked:
Provides a simpler workflow with direct access to payment information
Offers ample space for future scalability
What Didn’t:
Requires additional backend resources for implementation
Usability testing
Before embarking on the design of the Payments page, I engaged with users to ascertain their precise requirements regarding payment information.
All requirements in the table
Too crowded
Not user-friendly with large screen users
Initially, I explored presenting all the required details in a table format for easy review. However, this design proved cluttered and optimal only for users with large screens, lacking user-friendliness for smaller screens.
Adopting a two-line approach
have better breath room with the table
In V2, I redesigned the table layout, adopting a two-line approach for each row to improve spacing and readability. However, evolving requirements prompted by feedback from billing specialists led to requests for additional information in the table, such as payment transaction details, eliminating the need to navigate to the Stripe page.
Reorganized table with copay notes
Restore clutter to the table with copay notes and payment information
Problem of payment form obstructing copay notes
In V3, I integrated payment details such as the amount and Stripe transaction code into the table. However, this addition caused the table to become cramped once again.
Upon further investigation, I delved into why operators required copay notes, which occupied a significant amount of space on the table and caused layout issues. It became evident that copay notes varied in complexity, often consisting of 2-3 sentences rather than a simple amount like $20. After consulting with operators, I learned that copay notes were essential for them to decide whether to charge members and determine the amount to charge.
During the feedback collection process, users expressed difficulty in remembering the copay amount before opening the Payment form with V3. Additionally, opening the form obscured background information, making it less intuitive to include copay notes in the table. Furthermore, users stressed the importance of having a scannable table for quickly sorting tasks at a glance, despite the necessity of copay notes for decision-making.
Reorganized table with copay notes
Clear display of the copay note
Enhanced ease of information access
In this final version, the copay note was moved inside the payment form, while maintaining the payment type and transaction information in the table. Users agreed that this design significantly enhanced ease of information access and overall glanceability.
Design
Optimized workflow
Before
Involves too many manual steps to enter or verify data
Risk of exposing members’ card information
Requires at least 6 steps to proceed for one payment transaction
After
Improved workflow from 6 to 2 steps
Eliminated manual processes and the need for double data entry
New Payments page
Identify status and process payment
Operators can efficiently monitor payment statuses using easily identifiable buttons and execute copay payments.
Pay button
Indicates a member requires charging
Allows operators to execute copay payments within the Foresight portal
Only available on the appointment date or after, preventing operators from charging the member in advance
Empty field
Empty field indicates members without copay fees
Operators can swiftly mark them as "no action needed" using 'No action' button
View button
Signifies a completed transaction
Enables users to promptly ascertain whether the member has been charged or needs to be charged
Directs users to the member’s Stripe page
Organize tasks by filtering
The feature enables users to customize the table view by applying filters. Users can refine the table display based on criteria such as location, date, payment status, or type. This robust filtering functionality enhances task management, facilitating efficient summarization and completion of tasks.
View payment detail
‘Info’ icon
Displays quick payment details
Hover over the information icon to promptly access essential payment details like date, time, and the processor.
View button
One-click access to detailed payment information via Stripe for each transaction
Additional benefits of Stripe integration
Receipts for Members
Easy Refunds
Enhanced Reporting Solution
Secure Payment Workflow for Members
Enhanced payment form
Before
Too many manual steps for data entry or verification
Risk of exposing members' card information
After
Ensures clarity and security
Facilitates member charging through a secure payment form
Pre-generated copay notes aid operators in entering amounts without searching on other pages
Secures member credit card information through a locked payment method, with validation for card validity
Includes a description text field for additional payment tracking
Utilizes Stripe's validation process to verify provided credit card data
Enables efficient completion of the payment process
Additional consideration
Error copy developments
I ensured clarity and guidance by creating clear error messages and screens for edge cases, such as missing credit card information or Stripe connection errors, as I designed the pages for each step. My focus was on minimizing uncertainty throughout the payment form and workflow, and I paid special attention to potential scenarios like the absence of a credit card in the system. Meticulously crafting the error copies for the entire page was essential to provide users with clear direction in navigating these situations.
THINKING BACK & LOOKING AHEAD
Learnings
Plan to replan
In any project, unforeseen challenges are inevitable. Our experience highlighted the need for flexibility and the ability to adapt plans as needed. Facing complexities inherent in payment systems, we quickly realized the necessity of agile thinking and the capacity to pivot when obstacles arose. Being prepared to replan enabled us to overcome obstacles more efficiently.
Little details matter
Whether it's the choice of colors, the placement of elements, or the wording of instructions, each detail contributes to the overall user experience. Paying attention to the little details demonstrates a commitment to excellence and user satisfaction. It shows that designers care about every aspect of the user journey and are dedicated to creating intuitive and delightful experiences.