Case Study

My Preventive Health

Leading end-to-end UX delivery across a complex, multi-surface product ecosystem — from strategy and workflow design to scalable UI systems, accessibility, and implementation handoff.

RoleUX Delivery Lead / Principal UX Designer
IndustryHealthcare / Preventive Wellness
FocusUX Strategy, Design Systems, Cross-Functional Leadership, QA
ToolsFigma, Figma Dev Mode, HTML/CSS, Prototyping, WCAG Audit

Why this translates: Healthcare and aviation share the same core UX challenge — high-stakes decisions, complex information, users under time pressure, and zero tolerance for errors. This project demonstrates the same UX delivery ownership model required of a Lead UX Delivery role.

mypreventivehealth.com/dashboard
My Preventive Health
Look Younger · Feel Younger
JD
Jane Doe
HEALTHCHEK™ ELITE
Health Overview
Age Scores
Wellness Plan
Appointments
Coaching
Messages
Resources
Billing
Profile & Settings
Health Overview
Welcome back, Jane — here's your health snapshot for today.
+ Schedule Appointment
Biological Age
52
3 yrs below baseline
Functional Age
58
On track for goals
WAP Progress
74%
This quarter
Next Appointment
Apr 12
14 days away
Vitals Summary
Latest Readings
Blood Pressure
118 / 76
Normal
Resting Heart Rate
64 bpm
Excellent
Blood Sugar
94 mg/dL
Normal
BMI
23.4
Healthy
Quick Actions
Quick Actions
Schedule Appointment
Message My Team
View Wellness Plan
Browse Resources
Age Score Breakdown
System Health Scores
Cardiovascular
78%
Metabolic
85%
Neurological
72%
Musculoskeletal
69%
Wellness Plan
Your WAP Progress
Nutrition & Diet
82%
Exercise & Fitness
68%
Sleep Hygiene
74%
Stress Management
61%
Preventive Screenings
90%
Upcoming
Appointments
Apr
8
Annual Health Review
Dr. Layne
Apr
12
Coaching Session
Sarah Chen
May
1
Biological Age Test
Care Team
Latest from Good Health News
View All Issues →
Prevention
Cancer Prevention — Part 1
Family history, breast cancer, and lung cancer screening — what every patient should know.
Antiaging
My Take on Age Management
Dr. Layne shares his personal philosophy on biological aging and what we can actually do about it.
Longevity
Trudy at 100 — Patient Insights
A remarkable patient shares her story of staying vibrant, active, and younger at 100 years old.
mypreventivehealth.com/onboarding
Welcome
2 — Personal Info
Health Profile
Goals
Dashboard
Step 2 of 5
👋
Welcome to My Preventive Health
This 5-step setup takes about 8 minutes and creates your personalized preventive care plan. Your data is always HIPAA-secured.
Full name
Sarah M. Johnson
Date of birth
March 14, 1982
Biological sex for clinical purposes
Female Male Prefer not to say
Continue →
Primary health goal
Preventive care & longevity ▾
Current conditions optional
None Hypertension Diabetes + More
Activity level
SedentaryModerateVery Active
Your responses personalize your care plan. All data is HIPAA-secured.
Continue →
Select your top 3 health goals
Reduce biological age Improve sleep Build strength Lower stress Heart health Weight management
Commitment level
LightModerateIntensive
Continue →

Your plan is ready, Sarah!

Based on your health profile and goals, we've created your personalized preventive care plan. Your care team will review it within 24 hours.

Good evening, Jennifer.
Saturday, May 16
Biological Age
32
Chronological Age 38
You're aging 6 years slower than your chronological age. Exceptional progress.
Today's Metrics
🌙 Optimal
7.8 hrs
Sleep
🫀 Excellent
58 bpm
Heart Health
📈 High
89%
Recovery
🧠 Optimal
Low
Stress
🧠
AI Insight
Your sleep quality has improved by 12% this week. Consider maintaining your current bedtime routine of 10:30 PM. Your HRV trends suggest optimal recovery.
View Full Analysis
🏠
Home
📊
Tracker
💬
Concierge
👑
Programs
👤
Profile
0% Reduction in design-to-development handoff time through Figma Dev Mode specs and QA review cadences
0% Improvement in task efficiency through UX iteration and structured onboarding flows
WCAG 2.1 AA Accessibility-informed responsive experience across all desktop and mobile surfaces
0 Teams Product, engineering, clinical content, and operations aligned under a single UX delivery framework

Turning a complex preventive health model into a clear digital experience.

My Preventive Health needed a digital platform that could support a premium preventive wellness model while making complex healthcare information easier to understand, compare, and act on.

The experience had to support member onboarding, program education, health profile collection, care-team workflows, biological age tracking, and long-term engagement — all across desktop and mobile surfaces, under regulatory accessibility standards.

Like enterprise operational systems, the platform demanded UX that could scale: reusable components, enforced design standards, and a handoff process that let engineering build accurately without constant back-and-forth.

I served as the primary UX point of contact across the full delivery lifecycle.

From strategy through handoff, I was the single connection between product vision, engineering execution, clinical content, and business stakeholders — owning every phase of UX delivery end-to-end.

UX Strategy

Defined product direction, user flows, information architecture, program hierarchy, and member journey structure across 6 product surfaces.

Design System

Created scalable Figma components and enforced reusable UI standards across desktop and mobile — documented so engineering could build without interpretation errors.

Workflow Design

Mapped onboarding, program selection, health profile collection, and member dashboard pathways — breaking complex flows into clear, guided steps.

Implementation QA

Documented visual styling specifications via Figma Dev Mode, conducted design review sessions, and verified implementation accuracy at every sprint milestone.

Aligning product, engineering, and clinical teams around a single design vision.

Preventive health products sit at the intersection of clinical accuracy, business model complexity, and user trust. This required continuous alignment across stakeholders who didn't always share the same priorities.

I led regular design reviews, facilitated cross-functional working sessions, and translated complex UX decisions into clear rationale that both technical and non-technical stakeholders could act on.

4 Cross-Functional Teams

Product, Engineering, Clinical Content, and Operations — all aligned to a shared UX delivery framework with clear ownership and decision protocols.

Weekly Design Reviews

Led structured review sessions with engineering and product leads — presenting rationale, fielding implementation questions, and documenting design decisions for audit trail.

Design Standards Enforcement

Established component governance and conducted QA reviews to ensure implementation consistency across 6 product surfaces — catching deviations before production.

Users needed confidence, clarity, and guidance.

Preventive healthcare programs can feel overwhelming. Users needed to understand what each program offered, why it mattered, what steps were required, and how their information would guide a personalized care plan.

The platform also needed to support business goals: increase trust, communicate premium value, capture qualified member information, and create a foundation for future product growth.

Both challenges required the same solution — a design system rigorous enough that any surface, any program tier, and any new feature could be built consistently by engineering without requiring design intervention at every step.

Designing the system around the member journey.

01

Define the journey

Mapped the user path from awareness to program selection, onboarding, profile completion, and dashboard engagement — presenting journey maps to product and clinical stakeholders for alignment.

02

Simplify the content

Structured complex healthcare and program information into scannable sections, comparison patterns, and guided steps — validated with user feedback and iterated with clinical review.

03

Create scalable components

Built reusable cards, program modules, form patterns, dashboard tiles, and responsive content blocks — documented with usage guidelines enforced across the engineering team.

04

Support delivery

Prepared Figma Dev Mode specifications, led build reviews, and documented sign-off criteria at each sprint milestone to maintain design integrity through launch.

Member onboarding flow

The onboarding experience was designed to reduce uncertainty by breaking the process into clear, manageable steps. Click any step to see the UX rationale behind it.

1
WelcomeSet expectations
2
Personal InfoCollect basics
3
Health ProfileUnderstand needs
4
GoalsPersonalize plan
5
DashboardTrack progress
↑ Click any step to see the design rationale
Set expectations clearly upfront — program overview, time commitment, and what users can expect. Reduces drop-off anxiety before data collection begins. Tested against a version without this screen: 22% lower completion.

From wireframe to polished experience.

The initial wireframes established information hierarchy and flow logic. The final design translated that structure into a polished, accessible, brand-aligned experience with a complete component system. Drag the slider to compare.

HealthChek™ Member Dashboard
Elite
Biological Age42
Daily Score78
Goals Met78%
Next Review6 mo
Active Minutes
128 min +12%
Heart Rate
72 bpm Good
Sleep Quality
85 Good
Wireframe
Final Design

Creating enforced, reusable patterns for a scalable healthcare experience.

The design system wasn't just built — it was socialized, documented, and enforced. Every component includes usage guidelines, accessibility annotations, and spacing specifications reviewed with engineering before build. Hover each card to interact.

Gold Program
$299/mo
✓ Annual physical
✓ Lab panel
✓ Care team access
What's included
Entry-level preventive care
✓ 1 physician visit/year
✓ Full lab workup
✓ Digital care portal
✓ WCAG AA compliant
Hover to flip →

Program Cards

Reusable content blocks for Gold, Platinum, Elite, and Executive tiers — enforced spacing, consistent hierarchy, WCAG AA color contrast verified.

📊
7,842
Steps
🌙
7h 23m
Sleep

Dashboard Tiles

Health metrics, next steps, biological age monitoring, and progress summaries — modular tiles that plug into any layout without re-design.

Primary health goal
Preventive care ▾
Activity level

Form Patterns

Structured intake fields, progressive disclosure, and guided profile completion — with accessibility annotations ensuring screen-reader and keyboard compatibility.

Responsive Layouts

Desktop and mobile patterns designed for clarity, hierarchy, and accessibility — breakpoint behavior documented in Figma Dev Mode for engineering handoff.

Ensuring design intent survived the build.

Design quality doesn't end at handoff — it requires active participation in the build process. I established a structured QA practice that caught implementation deviations before they reached production.

This reduced revision cycles, built engineering confidence in the design system, and ensured the final product matched the approved design specifications.

Figma Dev Mode specifications

Every component delivered with auto-generated spacing, color, and typography tokens — reducing "what's the padding?" questions by design.

Sprint-milestone design reviews

Structured build reviews at each sprint checkpoint — comparing implementation against approved Figma files with documented pass/fail criteria.

Accessibility compliance review

WCAG 2.1 AA audit on production builds — color contrast, keyboard navigation, screen reader labels, and focus management verified before launch.

Cross-surface consistency audit

Verified visual and interaction consistency across desktop web, mobile web, and native mobile — catching surface-specific deviations from the design system.

A clearer, more scalable product — built to last.

The redesigned experience created a stronger foundation for member onboarding, program education, and long-term engagement. The design system reduced production friction and made it easier to scale new content, program types, and dashboard features without redesign from scratch.

By connecting UX strategy, visual design, accessibility standards, and implementation support under single-point ownership, the platform became easier to understand, easier to build, and better aligned with the business vision — with 50% faster handoff and 35% better task efficiency to show for it.

What this project demonstrates

My Preventive Health demonstrates my ability to function as a single point of contact for UX across a complex, multi-surface product ecosystem — owning strategy, enforcing design standards, managing cross-functional alignment, and maintaining design integrity through development handoff and QA.

The same capabilities that drove this healthcare platform — stakeholder alignment, design system governance, workflow clarity, and end-to-end delivery ownership — are the foundation of effective UX Delivery leadership in any complex enterprise environment.

UX StrategyDesign SystemsCross-Functional Alignment Stakeholder CommunicationImplementation QAWCAG 2.1 AA Figma Dev ModeHTML / CSSWorkflow DesignAgile Delivery