Payment Portal for Delaware’s Largest Healthcare System
I led UX/UI design and product engagement to create a web-based payment portal for the largest employer in Delaware - empowering patients to better understand and manage their hospital bills through a mobile and desktop friendly experience.
UX/UI Designer, Engagement & Product Manager
2020
Healthcare
Wireframes
UI Design
User Flows
Prototypes
Dev Handoff
Feature Management
Client success
Overview
The healthcare system was already using a third-party vendor to process payments. My task was to design the patient-facing interface - the layer patients would use to view, manage, and better understand their bills, especially when acting as a guarantor (someone responsible for another person’s medical expenses).
The goal: Reduce confusion, reduce call center volume, and increase the number of bills paid on time - all while improving the experience for everyday patients navigating an already stressful situation.
My role
I was responsible for both product engagement and hands-on UX/UI design. My tasks included:
Leading on-site discovery interviews with hospital patients and finance staff
Building stakeholder relationships and defining success metrics
Mapping data and billing system flows
Designing high-fidelity desktop and mobile interfaces
Collaborating with the senior product manager to align business needs with user goals
Challenge
Hospitals don’t just have a billing problem - they have a patient trust problem. In collaboration with hospital staff and patients, I surfaced three major UX breakdowns:
Managing Multiple Bills
Patients would receive separate bills for each service, even when visits happened on the same day. A patient might think they've paid for everything, only to later receive more bills - leading to missed payments and, often, collections. The issue became even worse for guarantors, like parents managing multiple sets of bills across family members.
Understanding the Actual Bill
Existing paper bills and digital views presented dense, unstructured data. Patients couldn't easily see what they owed, why, or whether insurance had been applied correctly. This created unnecessary cognitive load and reduced patient confidence in the billing process.
Disconnected Payment Systems
Three different payment providers meant three different accounts, three different logins, and no single view of what was owed. Patients often forgot credentials or didn’t know which system to use - increasing calls to patient support and delaying payment.
Solution
We designed a new unified payment portal UI that tackled all three of these core pain points:
Managing Multiple Bills
A centralized dashboard shows all bills - both for the patient and their dependents.
Bills are organized by patient, date, and payment status.
Sorting, filtering, and summary totals make managing complexity easier - especially for guarantors handling multiple family members.
Understanding the Actual Bill
Each bill is displayed as a card, summarizing key info: provider, date of service, patient responsibility, and insurance status.
The design prioritizes clarity and simplicity - reducing friction and empowering patients to trust what they’re seeing.
One Login to View & Pay
The UI integrates with the hospital’s Cerner-based authentication and enables single sign-on (SSO) with all three payment vendors.
Patients only need one username/password to access and pay all of their bills - regardless of provider or status.
Outcome
The final design was a responsive, patient-centered billing interface that streamlined how people manage, view, and act on their healthcare bills. While the actual payment process remained handled by external vendors, the experience of understanding and organizing one’s bills became dramatically easier — both for patients and for the hospital’s billing team.
User Flow
Data Diagramming
