Redesigning a healthcare platform that serves millions of patients. Where clarity isn’t a nice-to-have, it’s a clinical necessity.
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.
Patients managing serious diagnoses were forced to navigate complex, jargon-heavy interfaces with no plain-language support.
The portal had grown organically: no consistent information architecture, no unified design language across features.
Physicians needed a dense, efficient workflow tool. The existing portal treated providers like patients. Wrong mental model entirely.
A healthcare platform with millions of users, many with disabilities, had no consistent WCAG compliance across its components.
Four months, remote, as a contractor. Long enough to design and hand off two complete flows, not long enough to see them measured or to shape the platform around them. Being precise about that boundary matters more here than in most places, because a reader could otherwise assume I owned a product that serves millions of people.
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 and provider experiences designed as distinct products on a shared design system: same components, opposite information priorities.
Telling someone a number is out of range without frightening them is three problems wearing one coat. There is the colour, since red reads as emergency in a clinical context and the warning state had to live in orange instead. There is the copy, because a raw value means nothing to most people and the plain-language line underneath is doing the real work. Then there is the hierarchy: the number cannot shout louder than what to do about it. Fixing any one of those tended to break the other two, which is why the abnormal lab result went round more times than anything else I designed here. What shipped carries status in position and shade and a written label at once, so it survives being read by someone who cannot see the colour at all.
In a clinical interface the cost of a decision is rarely aesthetic. Each of these bought something and gave something up.
Options Red, which every interface convention says means wrong, or orange for the warning state.
Chose Orange, with red reserved out of the general UI entirely.
Why In a clinical context red reads as emergency, and most out-of-range values are not emergencies. A patient reading their own results at home should not be told to panic by a colour.
Trade-off Orange is harder to hold at AA contrast, and it is a weaker signal for the results that genuinely are urgent. Urgency had to be carried by position and copy instead, which is more work and less immediate.
Options Mirror the clinical record, which is familiar to staff and matches how the data is actually stored, or organise around what a patient came to do.
Chose Task-based views for appointments, results and care management.
Why A patient arrives with an errand, not an urge to browse their chart. The whole argument for the dashboard is that nobody should have to hunt.
Trade-off It diverges from the underlying data model, which pushes complexity onto engineering, and anyone looking for something genuinely unusual has further to travel to find it.
Options Separate screens per step, which is simpler to build and far less dense, or patient list, conversation and summary held on screen together.
Chose Three panels, with the patient summary never leaving view.
Why The provider view exists to collapse several lookups into one. Seconds per record is the honest test of that, and context that disappears when you click is the thing that costs those seconds.
Trade-off Density, and a layout that needs a large display. The provider experience is not portable the way the patient one is, which is a real limitation in a hospital.
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.
No information conveyed by color alone. The test result range bar uses shape + shade + text labels so colorblind users get the full picture.
Every interactive element meets the 44×44pt minimum, critical for patients with motor impairments or mobile access.
All text meets WCAG AA contrast. Orange for warnings, never red. Red signals emergency in clinical contexts.
Visible focus rings on every interactive element. Tab order follows logical reading flow. Screen reader labels on all icons.
“Hemoglobin A1c: 7.2%” becomes “Slightly above target. Discuss with doctor.” Clinical accuracy preserved, comprehension barrier removed.
Red is reserved for true emergencies. Orange (#E8651A) communicates urgency throughout, without triggering panic responses.
My contract ran January to May 2025 and ended at handoff, so I was not there for the measurement. Rather than borrow the platform's numbers and let them read as mine, here is what is verifiable: the work that went out, and the standard it had to meet.
If the engagement had run past launch, these are the three I would have instrumented first, and why each one maps to a decision on this page.
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.
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.
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.