Case Study · Healthcare UX · 2025

Mayo Clinic
Patient & Provider
Portal

Redesigning a healthcare platform that serves millions of patients — where clarity isn’t a nice-to-have, it’s a clinical necessity.

RoleSenior Digital Designer
CompanyMayo Clinic
TimelineJan – May 2025
PlatformWeb · iOS · Android
ToolsFigma · WCAG 2.1 AA
Scroll
01 — The Problem

Healthcare is complex.
The digital experience shouldn’t be.

Mayo Clinic’s patient-facing platform serves millions of users navigating some of the most stressful moments of their lives — managing diagnoses, tracking lab results, coordinating care across multiple specialists.


The existing portal had grown organically over years, resulting in fragmented navigation, inconsistent visual language, and an experience that required too much cognitive load from people who were already overwhelmed.


On the provider side, physicians were working from a portal that didn’t reflect their actual clinical workflows — ordering labs, reviewing patient queues, and messaging patients required too many context switches.

Cognitive Overload

Patients managing serious diagnoses were forced to navigate complex, jargon-heavy interfaces with no plain-language support.

Fragmented Navigation

The portal had grown organically — no consistent information architecture, no unified design language across features.

Provider Friction

Physicians needed a dense, efficient workflow tool. The existing portal treated providers like patients — wrong mental model entirely.

Accessibility Gaps

A healthcare platform with millions of users — many with disabilities — had no consistent WCAG compliance across its components.

02 — Users

Two users.
Opposite relationships with the same data.

A patient seeing a lab result and a physician ordering that same test are looking at identical data from completely opposite emotional and professional contexts.

Patient
Adult managing their care
“What does this test result mean for me?”
Often anxious, low medical literacy
Needs plain language, not clinical jargon
Accessing on mobile at or between appointments
May have visual or motor accessibility needs
Wants to feel in control of their health
Provider
Physician or care coordinator
“Which patients need my attention right now?”
Time-constrained — seconds per screen
Needs clinical precision, not simplification
Manages multiple patients simultaneously
Needs clear action affordances to act fast
Frustrated by tools that slow clinical workflow
03 — Design Work

Six screens.
Two complete flows.

Patient and provider experiences designed as distinct products on a shared design system — same components, opposite information priorities.

Patient Flow
Patient Dashboard
Patient Dashboard
Appointments, health summary, care team — everything at a glance in plain language
Appointments
Appointments
Schedule, manage and cancel visits with a 3-step scheduling flow
Test Results
Health Records — Test Results
Custom range bar shows clinical values in plain language. No red/green color-only distinction — WCAG compliant.
Medications
Health Records — Medications
Refill tracking, plain-language dosage, WCAG AA compliance callout
Provider Flow
Provider Patient Queue
Provider Dashboard — Patient Queue
Dense clinical data: stat tiles, status chips, inline patient summary, critical lab flags. Designed for power users who need information fast.
Order Entry
Order Entry — Labs & Prescriptions
Patient context always visible. Drug interaction warning with two clear resolution paths.
Provider Messaging
Provider — Secure Messaging
Three-panel layout: patient list, conversation thread, patient summary always in context
04 — Accessibility

WCAG 2.1 AA
applied throughout.

In healthcare, accessibility isn’t a compliance checkbox — it’s a clinical obligation. A patient managing a chronic illness at 72 shouldn’t have to struggle with an interface designed for someone else.

🎨

Color — Never Only

No information conveyed by color alone. The test result range bar uses shape + shade + text labels so colorblind users get the full picture.

👆

44pt Touch Targets

Every interactive element meets the 44×44pt minimum — critical for patients with motor impairments or mobile access.

🔍

4.5:1 Contrast Ratio

All text meets WCAG AA contrast. Orange for warnings, never red — red signals emergency in clinical contexts.

⌨

Keyboard Navigation

Visible focus rings on every interactive element. Tab order follows logical reading flow. Screen reader labels on all icons.

📖

Plain Language

“Hemoglobin A1c: 7.2%” becomes “Slightly above target — discuss with doctor.” Clinical accuracy preserved, comprehension barrier removed.

🏥

No Red for General UI

Red is reserved for true emergencies. Orange (#E8651A) communicates urgency throughout — without triggering panic responses.

✓ WCAG 2.1 AA Compliant
05 — Impact

Designing for trust
at scale.

M+
Patients Served
Mayo Clinic platform — national network
AA
WCAG Compliance
All designed components met 2.1 AA standard
2
User Flows
Complete patient + provider experiences on one platform
06 — Reflection

What healthcare UX
taught me.

“The hardest design decision: how to surface an abnormal lab result without causing unnecessary panic. That single component went through more iterations than anything else I’ve designed.”

Zero tolerance for ambiguity

A confusing error message in a consumer app is annoying. In a patient portal it can cause someone to miss a critical health action. Healthcare sharpened my instinct for clarity.

Accessibility as design philosophy

Contrast ratios and touch targets stopped being checklist items. When you’re designing for someone managing a chronic illness at 72, they become the most human decisions you make.

Collaborating with clinicians

Physicians have extremely high standards for information accuracy and zero patience for design that prioritizes aesthetics over function. The best feedback I received came from a cardiologist with a red pen.