Consumer
Secure Pay Page

The Problem

Patients couldn't pay — and the platform wasn't secure enough to let them

PayGround is a platform that enables clinics to collect payments and patients to pay any medical bill via the mobile app. But a critical piece was missing: a HIPAA-compliant, 2FA-secured page for patients to view their invoices and actually make payments.

The impact was measurable. Payments weren't being made, which meant less revenue for clinics and for PayGround itself. The problems compounding the situation:

• Patients couldn't access important invoice data because the payment page wasn't secure or HIPAA-compliant
• Returning patients had to re-enter card details every visit — no way to save a preferred payment method
• PayGround had just undergone a major rebrand, but the custom-built component system made updating brand colors extremely cumbersome

Project Goals

Three goals, one cohesive solution

• Comply with HIPAA, accessibility, and payment capture standards
• Increase patient payments and business revenue through increased user trust and ease-of-use
• Introduce a new, scalable design system that would set the standard for the rest of the application

Challenges & Pivots

Selling a new design system to the dev team

One of the biggest non-design challenges was getting the development team on board with moving away from their custom-built component system. Everything was inconsistent, the recent rebrand had made things worse, and managing individual elements was already painful. I advocated for adopting MUI (Material UI) — an open-source React library — so we could build quickly without starting from scratch.

On the product side, an ideal solution would have let dependents view invoices within a parent's authenticated view. Time and technical constraints forced a pivot: dependents and guardians authenticate separately — which was cleaner from a privacy standpoint anyway.

Research & Findings

Testing with real users, not assumptions

I ran usability tests with the "PayGround User Group" — a standing panel of users who opted in to improve the product through studies and prototype tests. Key findings:

• Saving payment methods matters enormously — having to dig out a card every visit was a friction point that actively discouraged payments
• If a paper bill is lost, users need to see invoice details with visit information online — a trust and usability issue, not just a convenience one
• Payment Plans are table stakes for patients facing high medical bills — competitive research confirmed this, and it became a core feature
• Stakeholders assumed "fewer clicks = better." User research revealed the opposite: progressive disclosure — letting users focus on one task at a time — outperformed the one-page-everything approach

We also mapped edge cases thoroughly — including what happens when a patient has no communication method on file for 2FA, and what to show when verification fails.

Edge case: patient has no communication method on file for 2FA verification

Edge case: identity verification fails — what should the patient do next?

The New Design System

MUI adoption — building fast on a solid foundation

The team adopted MUI components in React as the new foundation. The Figma design library was rebuilt to mirror the MUI system, with custom PayGround components layered on top as needed. This project became the design system proof of concept that would propagate across the entire application.

The new PayGround design system built on MUI — scalable, consistent, and brand-aligned

Outcomes & Impact

Immediate results — and a platform transformed

• Patients receive a text or email with their balance and a secure link
• Identity validated via HIPAA-compliant Two-Factor Authentication
• Full invoice details visible — no more hunting for a lost paper bill
• Payment methods saved and managed on-file
• Payment Plans available for large balances, driving partial payment adoption immediately