hero image 2.png

Designing a seamless and robust B2C payment portal. 

Industry: Healthcare

Role: UXUI, Engagement & Product Manager

Team member included a senior product manager. 

I designed a payment portal for a healthcare system that is state of Delaware's largest employer, which would enable hospital patients to better understand and continue on to paying their medical bills. 

My tasks:

  • Develop key stakeholder relationships 

  • Conduct on-site discovery interviews with patients and hospital finance department 

  • Data Diagramming

  • UXUI Design

Outcome: Desktop and mobile friendly payment portal where a patient is able to easily view list of all associated medical bills (guarantor included) from the hospital.

Note: During this stage of design, the client was already using a vendor that allowed for the actual payment of bills. The task I was assigned was only to create a patient facing interface that would help patients' better understand and manage all of their bills as a guarantor. 

More bills more problems

After scheduling and interviewing key stakeholders within the Finance Department as well as voluntary hospital patients, I identified three problematic themes that caused friction in the current user experience. 

1. Managing Multiple Bills

Patients receiving multiple services would receive multiple paper bills in the mail, even if they received services within the same day. For example, if Jane Doe went in to get lab work done and then was referred to a specialist, she would receive two bills in the mail. This seemed to cause confusion for many patients, as confirmed by feedback from the Finance Dept and patient interviews. Jane would pay one bill, thinking she'd just paid for all services received (lab work + specialist), and when the second bill arrived oftentimes it would not get paid, causing the second bill to go into collections only causing more bills to come into Jane's mailbox. The also had negative consequences on the hospital as it would decrease the number of bills paid on time. Jane's problem exponentially gets worse if she's the guarantor (parent or guardian responsible for someone else's bill). On top of her own bills, she has to manage an additional number of bills for her child(ren). 

2. Understanding the Actual Bills

Let's say Jane is finally able to get a grasp on the number of bills she is responsible for paying. Now she wants to make sure she isn't overpaying and that her patient responsibility (total charges minus insurance and adjustments) is as she expected. After reviewing the design of the existing paper bill and speaking with patients, I discovered that the information was densely presented and caused cognitive overload, oftentimes leading to frustration and confusion.  

3. Paying Bills

When it came time to finally paying the bills, there were three different payment providers each linked to the type of bill that needed to be paid. An example here would be Payment Provider A collects all bills for general services, Payment Provider B collects bills for speciality services, and Payment Provider C collects all bills overdue or in collections. This would require Jane to manage three separate accounts each with its own login information, which when forgotten, would increase the number of phone calls going into the patient support center. 

The solution

At the bare minimum, the MVP needed to address the above three issues. ​

1. Managing Multiple Bills

The solution must allow the patient to effectively manage multiple bills for themselves and others as a guarantor. To effectively manage bills, the patient must be able to view at a high level how many bills are currently due and for how many patients as well as easily filter/sort by name, date and other functions. 

2. Understanding the Actual Bills

The solution must allow the patient to easily understand the information contained within each bill. This meant presenting the most important pieces of information in a simple and digestable way. I decided to use card components to contain all related information for each bill and provide actions for the user. This design would translate well with both desktop and mobile devices. 

3. Paying Bills

The solution must allow the patient to sign in with one username and password to view and pay their bills. This meant implementing a single sign on process linked to each of the three payment providers. This would be implemented using Cerner's authentication protocol which linked the hospitals patient portal with the three payment providers. 

User flow

Data diagramming

Components & Landing Page