01 / 15
Clarity
Health
Simplifying Medical Reports for Everyday Users — transforming clinical complexity into confident, human-friendly health insight.
02 / 15
First impressions — onboarding
Three screens that establish the problem, value, and privacy before asking for sign-in.
Problem framing
Medical reports are hard to understand
Value proposition
Health score, risk colours, plain language
Trust & privacy
HIPAA-grade security, never shared
UX rationale
Structured as a story arc: problem → solution → trust. Each screen is single-purpose and skippable. Privacy surfaces before sign-in to lower the barrier of sharing sensitive health data.
03 / 15
The problem with medical reports
Most people receive lab reports but have no way to interpret what the results actually mean for their health.
📋
Medical jargon overload
Terms like "thrombocytopenia" are meaningless to most patients — creating an immediate comprehension barrier and a sense of exclusion from their own health data.
🔍
Unreliable online searches
Users turn to Google and encounter worst-case scenarios, amplifying anxiety rather than providing the reassurance or context they need.
😰
Fear and health anxiety
Abnormal value flags without context create unnecessary panic. Users can't tell if a result is mildly concerning or genuinely urgent.
❓
No clear next steps
Reports present raw numbers with zero guidance — users are left asking "what do I do now?" with no actionable path forward.
04 / 15
What we set out to achieve
Design a mobile experience that bridges the gap between clinical data and patient understanding.
🧠
Plain language
Translate complex metrics into simple, human-friendly explanations — no medical background required.
😊
Reduce anxiety
Reassuring visuals, tone of voice, and contextual framing lower the emotional stress of receiving health data.
✅
Actionable next steps
Clear, prioritised recommendations so users know exactly what to do — from lifestyle changes to seeing a doctor.
🛡️
Build trust
Credibility through transparent AI confidence levels, clinical range references, and doctor consultation prompts.
📈
Track progress
Monitor health trends over time — turning one-off reports into an ongoing personal health journal.
✨
Simplify complexity
Surface what matters — distil lengthy reports into a focused summary with optional drill-down for more detail.
05 / 15
Who we designed for
Four primary user groups with distinct goals, frustrations, and needs when interacting with medical data.
💼
Working professionals
Goal: Quick clear summaries
Frustration: No time to research
Need: Fast insights & alerts
❤️
Parents
Goal: Understand kids' reports
Frustration: Paediatric ranges differ
Need: Age context & guidance
🏠
Senior citizens
Goal: Monitor chronic conditions
Frustration: Complex multi-reports
Need: Large text, simple UI
🙋
General users
Goal: Know what's normal
Frustration: No medical knowledge
Need: Context & comparisons
06 / 15
Key friction areas uncovered
Research and empathy mapping revealed five critical pain points in the existing experience.
01Difficult medical terminology
Abbreviations (WBC, MCH, HbA1c) and Latin-based terms create an immediate comprehension barrier — users feel excluded from their own health data.
02No understanding of abnormal values
Users see "L" or "H" flags but can't gauge if a slightly abnormal value is dangerous or clinically insignificant — causing disproportionate anxiety.
03Information overload
Reports contain 20–40 parameters with no hierarchy. Users can't identify what actually deserves attention versus routine background data.
04Fear and uncertainty
Abnormal flags without explanatory context trigger panic, spiralling users into worst-case Google searches before they've even consulted a doctor.
05No clear recommendations
Reports present raw data but never guide users toward meaningful next steps — leaving them asking "what do I actually do now?"
07 / 15
How Clarity Health solves this
A six-stage AI-powered pipeline that transforms raw clinical reports into plain-language actionable insights.
📤 Upload
→
🤖 AI Analysis
→
📋 Health Summary
→
📖 Explanations
→
✅ Recommendations
→
📈 Tracking
📤
Upload & scan
Camera scan or PDF import with real-time OCR, extracting all parameters, values, and reference ranges automatically from any lab format.
🤖
AI analysis engine
Cross-references values against validated clinical ranges, flags anomalies, and generates a confidence score per insight.
💬
Plain-language output
Results rewritten in everyday language — what it measures, why it matters, and what the user should do next.
08 / 15
From confusion to confident action
The emotional arc users travel — from receiving a confusing report to taking control of their health.
User steps
01
Receive report
Lab issues a PDF or printed lab report
02
Confusion & anxiety
Sees abnormal flags and unfamiliar terms
03
Upload to Clarity Health
One-tap camera scan or PDF upload
04
AI processes the report
Analysis in seconds with confidence scores
05
Understand findings
Plain-language summary with risk colours
06
Take action
Follow prioritised recommendations
07
Track progress
Monitor trends across future reports
Emotional state
Neutral / Unaware
😰 Anxious & confused
🙂 Curious, taking action
⚙️ Engaged, anticipating
💡 Relieved, informed
✅ Confident & empowered
📈 In control, proactive
Key design insight
The shift from anxiety to clarity happens at step 5. The design must make this transition feel immediate and reassuring — not clinical or overwhelming.
09 / 15
App navigation structure
A flat five-tab structure — every core function reachable within one tap, designed around the most frequent action: uploading a report.
🏠
Home
Health score
Recent activity
Quick actions
Alerts
📄
Reports
Report history
Full breakdown
Metric details
Status flags
📤
Upload
Camera scan
PDF import
Gallery upload
Progress state
Primary CTA
📊
Trends
Over-time charts
Metric history
Score tracking
Export data
🤖
Ask AI
Chat interface
Metric questions
Suggestion chips
Report-aware
Rationale: Upload sits centre-tab for maximum discoverability. Home surfaces personalised context on launch. Ask AI is a power feature — accessible but not the default entry point. Profile and notifications remain one tap away.
10 / 15
All 16 app screens at a glance
Complete user journey — from splash to profile, with every interaction designed and considered.
Report Breakdown
Metrics + status
Detailed Metric
Plain-language
Recommendations
Prioritised actions
Health Trends
Over-time charts
Report History
Timeline archive
11 / 15
From paper to insight — the upload flow
Three entry methods for every context. Real-time progress feedback keeps users informed and builds confidence in the AI.
📷
Scan Report
Use camera to scan a physical report
📄
Upload PDF
Import PDF directly from device files
🖼️
Gallery Upload
Select image from photo library
🔒 End-to-end encrypted · Reports never shared
✅
Reading report
OCR extracts all text and values
✅
Extracting medical values
Identifies and normalises all metric data
⚙️
Comparing standard ranges
Cross-references validated clinical ranges
⏳
Preparing summary
Generates plain-language insights
12 / 15
Understanding your report — three levels deep
Progressive disclosure: overview → breakdown → metric detail. Users go as deep as they want, in their own time.
Health score card
74/100 with 96% AI confidence. Personalised greeting, quick actions (Actions / Upload / Ask AI) and recent reports listed below.
Metric list with status
5 metrics analysed, 2 need attention. Each row shows name, value, normal range and a colour-coded badge. Tap for full detail.
Vitamin D deep-dive
18 ng/mL — deficient. Range bar, plain-language explanation, possible symptoms, and three recommended actions with doctor disclaimer.
13 / 15
Action & Monitoring Screens
From insight to action to ongoing health
Recommendations, trends, and AI chat complete the loop — users don't just understand, they act and improve.
Prioritised action hub
2 Immediate · 3 Lifestyle · 1 Follow-up. Immediate actions first, expandable lifestyle changes, consultation CTA with "Find a Doctor" link.
Over-time charts
Health score trending +6pts over 3 months. Vitamin D improving but still low. Positive reinforcement when trending right.
Report-aware chat
Ask "Why is my cholesterol high?" and get a personalised answer based on actual report values with specific next steps listed.
14 / 15
Design system foundations
A consistent, accessible token-based system ensuring clarity and trust across all 16 screens.
Typography
Sora 800H1 — 24px Display
Sora 600H2 — 18px Section
DM Sans 400Body — 15px
DM MonoLabel — 11px
Status indicators
✓ Normal
↓ Low
↑ High
ℹ Info
⚙ Processing
Green = healthy · Amber = monitor · Red = act now · Blue = informational
Spacing & components
Base: 4px grid · Card pad: 16px
Corner radius: 12px · Tap target: 48px
Row height: 56px · Icon: 20/36px
Border: 1px solid · Subtle shadows
15 / 15
What Clarity Health delivers
A complete, interview-ready product design case study built in a two-day sprint — 16 screens, end-to-end.
"From confusion to informed action — in under two minutes."
Clarity Health enables anyone to understand their lab report, grasp why it matters, and know what to do next — moving from anxiety to empowered action in a single app session.
<2m
Upload to full understanding of any report
16
Screens covering the complete user journey
5
Core UX principles applied throughout
↓😰
Anxiety reduced through contextual language
✅What worked well
- Progressive disclosure reduced cognitive load effectively
- Colour-coded status system felt immediately intuitive
- Plain-language copy was the single highest-impact decision
- Five-tab IA kept all tasks within one tap
🚀Future features to explore
- Doctor sharing — send annotated summary to physician
- Family profiles — manage reports for multiple people
- Medication interaction alerts from report findings
- Wearable integration for real-time health context
Clarity Health — Product Design Case Study
Product Designer · 2-Day Sprint · Mobile UX/UI · 16 Screens