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

Foresight Mental Health (FMH) is dedicated to leveraging technology to improve mental healthcare and lifestyle. Currently, FMH serves over 10,000 members with recurring revenue. As FMH continues to grow significantly over the coming years, meeting security and compliance regulations will be inevitable.

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
  1. Improved from 6 to 2 steps

  2. Removed manual steps

  3. No more double data entry

New Payments page
  1. Organize tasks with a customized table design

  2. Access payment details swiftly (reduced from 10 minutes to 2 minutes per claim)

  3. Capability to provide invoices or receipts to members

Enhanced payment form
  1. Ensure payments are made using valid credit card information

  2. Enhance clarity with precise copy

  3. 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.

Iteration 1

Iteration 1

Iteration 1

Iteration 1

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.

Iteration 2

Iteration 2

Iteration 2

Iteration 2

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.

Iteration 3

Iteration 3

Iteration 3

Iteration 3

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.

Iteration 4

Iteration 4

Iteration 4

Iteration 4

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

Solution 1

Solution 1

Solution 1

Solution 1

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

Solution 2

Solution 2

Solution 2

Solution 2

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

Solution 3

Solution 3

Solution 3

Solution 3

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.

Let's connect

I would love to chat or work together :)

© 2024 Ji Yeom

Let's connect

I would love to chat or work together :)

© 2024 Ji Yeom

Let's connect

I would love to chat or work together :)

© 2024 Ji Yeom

Let's connect

I would love to chat or work together :)

© 2024 Ji Yeom