Consumer
Secure Pay Page

The Problem

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

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

• Patients couldn’t access 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 to set the standard for the rest of the application

Challenges & Pivots

Selling a new design system to the dev team

The biggest challenge was getting developers on board with moving away from their custom component system. I advocated for MUI (Material UI) — an open-source React library — so we could build quickly without starting from scratch.

An ideal solution would have let dependents view invoices within a parent’s authenticated view. Time and technical constraints led to a pivot: dependents and guardians authenticate separately — 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. Key findings:

• Saving payment methods matters enormously — re-entering card details every visit actively discouraged payments
• If a paper bill is lost, users need invoice details online — a trust issue, not just a convenience one
• Payment Plans are table stakes for patients facing high medical bills
• Stakeholders assumed “fewer clicks = better.” User research revealed the opposite: progressive disclosure outperformed the one-page-everything approach

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 in React as the new foundation. The Figma library was rebuilt to mirror MUI, with custom PayGround components layered on top. This became the design system proof of concept that propagated across the entire application.

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

Outcomes & Impact

Immediate results — and a platform transformed

• Patients receive a secure link with their balance via text or email
• 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 immediate adoption