Skip to main content
Case Study 05
healthcare

UX Center of Excellence

Built a UX Center of Excellence from zero. It delivered 80% user adoption and cut accessibility issues by 70%, inside a WCAG/ADA-regulated healthcare environment.

period
Healthcare SaaS
context
WCAG / ADA
role
UX Lead
tags
HealthcareDesign SystemAccessibility
The block being hoisted into the practiceSix blocks: principles to researchCarts crossing: teams shipping on the systemHow the UX Center of Excellence was built, as a bridge. There was nothing between design and production, so the practice went in one block at a time without stopping the teams working underneath, starting from zero in a WCAG/ADA-regulated healthcare product. The result: 80% user adoption, 70% fewer accessibility issues and 50% faster development cycles.
80%
user adoption
−70%
a11y issues
50%
faster dev cycles
0→1
design system
How Might We
// hmw
build a scalable, accessible, and consistent design system from zero, in a regulated healthcare environment, without disrupting ongoing product development?
The Problem

There was no design system, no component library, no naming conventions in Figma. Accessibility complaints were surfacing in production, and in healthcare, compliance failure has legal consequences, not just UX ones.

There were no documented design principles. PMs were making product decisions without research backing. The design function existed but lacked the infrastructure to scale or defend its decisions.

Illustrative Recreation

How the Component Library Felt to Use

The production member and admin portals are client-confidential. Below is an interactive recreation built for this portfolio, using the same interaction pattern with a generic product name and fictional data.

Illustrative recreation: interface rebuilt from memory in plain HTML/CSS/JS. Product name, brand names, and data are all fictional.

BenefitBridge Component Library
Button AA 4.6:1
Text Input AA 4.6:1
Plan ID must be 6 characters
Selection Controls
✓ Email me claim updates
Share data with employer
Individual plan
Family plan
Status Badges text + icon
● Active ● Pending ● Expired ● Draft
Toggle
Notifications on
Auto-renew off
Type Scale
AaH2 · 20/700
AaH3 · 15/600
AaBody · 13/400
AaCaption · mono 10

Every specimen shipped with a documented focus ring, a minimum 4.5:1 contrast ratio, and a written usage rule — the same three checks any component had to clear before it entered the library.

The Solution

Built a WCAG/ADA-aligned component library in Figma from zero, prioritizing accessibility-first components over visual refinement. I framed the design system as a risk-reduction tool to get cross-functional buy-in.

Established a design-to-dev handoff process and trained PMs and stakeholders on design system usage. Redesigned the shopping experience flow, which became the flagship proof of adoption: 80% of the product now runs through the system.

Key Decision
// design-decision

I prioritized accessibility-first components over visual refinement. In healthcare, compliance failure has legal consequences. Framing the design system as a risk-reduction tool, not a design preference, is what got buy-in from legal, engineering, and product at the same time.

// reflection

Building from zero is different from inheriting a system. The hardest part isn't the design. It's getting cross-functional buy-in before there's anything visible to show. The first deliverable that mattered wasn't a component either. It was a shared vocabulary.