UX CASE STUDY · 2026
Designing a calm patient app —
with AI as a collaborator, not a shortcut
The complete story: research, iteration, where AI accelerated the work, where I overrode it, and what I'd tell an interviewer about it.
Senior UI/UX and Web Designer
10-week solo project
iOS and android patient app
Booking · Telemedicine · Records · Rx
RECRUITER SUMMARY · 30-SECOND READ
Redesigned a fragmented patient experience (web portal + phone calls + paper) into one mobile app. Ran the research, used AI to accelerate wireframing and prototyping, then applied clinical-UX judgment AI can't: safety-critical hierarchy, accessibility, and trust cues. Booking task success rose from 61% to 94% in usability testing.
End-to-end UX process
Design systems
AI-augmented workflow
Accessibility (WCAG AA)
Healthcare / regulated UX
If you only look at 3 things
How I used AI in the workflow →
Booking flow: v1 → v3 →
Booking flow: v1 → v3 →
Usability results →
Care felt scattered across logins, phones, and paper
Patients at a two-clinic regional network booked appointments on one web portal, got lab results by mail, and had to call during business hours for a refill. Front-desk staff fielded the overflow. Nobody owned the whole journey.
41%
of bookings abandoned before completion on the legacy portal
3.5 min
average phone hold time just to request a refill
3 logins
across booking, billing, and the lab-results mailer site
Business goal: cut no-shows and phone volume. Human goal: make a stressful system feel less stressful.
11 interviews, 2 clinics shadowed, one journey map
Charting the emotional arc of a routine care episode showed exactly where the app had to intervene.
Contextual inquiry
Sat with front-desk staff during peak hours; watched patients navigate the portal on their own devices, not a lab setup.
Semi-structured interviews
11 patients, ages 24–71, mixed tech comfort. Focused on the last time they booked, got results, or refilled a prescription.
Heuristic evaluation
Audited the existing portal against Nielsen's heuristics — logged 18 issues, ranked by severity and frequency.
Cognitive load pass
Timed how long it took patients to find "am I okay?" in a lab report. Dense tables buried the one line that mattered.
"I have three logins and still end up calling." — patient, age 58
Six stages, not a straight line
In practice this looped constantly — testing sent me back to research twice — but the arc ran:
01
Discover
Interviews, shadowing, heuristic audit
02
Map
Journey map + service blueprint
03
Draft
AI-assisted wireframes, fast breadth
04
Refine
Hand-edited copy, hierarchy, safety
05
Test
Moderated usability sessions ×2 rounds
06
Ship
Final prototype + design system
The booking flow, three times over
This flow got the most rework because it's the make-or-break moment: if patients bail here, nothing else in the app matters.
v1 Single Long Form
Sat with front-desk staff during peak hours; watched patients navigate the portal on their own devices, not a lab setup.
v2 Stepped, no context
Split into steps, but no progress indicator or cost preview — testers didn't know how many steps remained or what it would cost.
v3 SHIPPED
94% success
Specialty › Doctor › Time › Confirm
4 clear steps, visible progress bar, and cost/coverage shown before the final tap.
Three constraints I couldn't design around
In practice this looped constantly — testing sent me back to research twice — but the arc ran:
Clinical safety can't be sacrificed for simplicity
Allergy and drug-interaction alerts had to stay visually loud even when it fought the "calm" aesthetic. I solved this by reserving red exclusively for safety, never for ordinary emphasis.
Wide age range, wide ability range
Designing for both a 24-year-old and a 71-year-old first-time-smartphone patient meant no clever gestures — every action needed a visible, labeled, 44px+ target.
Insurance logic is genuinely confusing
Coverage rules varied by plan and visit type. Rather than explain the rules, I surfaced the answer that mattered — "$0, covered" — and let a human support line handle edge cases.
What shipped, and why
One app, one login
Booking, telemedicine, records, and prescriptions unified — replacing the 3-login sprawl.
Plain-language status
Lab tables became "Normal / Review / Low" badges — the answer up front, detail on request.
Self-service refills
One-tap refill requests with visible pill-supply tracking replace the phone-hold ritual.
Transparency before commitment
Every booking shows cost, coverage, and cancellation terms before the final confirm tap.
Who the app touches across the hospital
Doctor
Nurse
Receptionist
Pharmacist
Admin
What shipped, and why
One app, one login
Booking, telemedicine, records, and prescriptions unified — replacing the 3-login sprawl.
Plain-language status
Lab tables became "Normal / Review / Low" badges — the answer up front, detail on request.
Self-service refills
One-tap refill requests with visible pill-supply tracking replace the phone-hold ritual.
Transparency before commitment
Every booking shows cost, coverage, and cancellation terms before the final confirm tap.
Who the app touches across the hospital
Doctor
Nurse
Receptionist
Pharmacist
Admin
Where AI actually helped — and where it didn't
I used an AI design tool as a fast hands, not a decision-maker. Here's the honest breakdown.
Wireframe breadth
Generated 3 layout directions per flow in minutes so I could compare structures instead of drafting each by hand.
Component drafts
First-pass component styling (cards, badges, buttons) as a starting canvas to react to, not final answers.
Copy scaffolding
Draft microcopy and labels I then rewrote for tone, clarity, and clinical safety.
Rapid iteration
Turned around v1 → v2 → v3 of the booking flow same-day after each testing round.
Net effect: AI compressed roughly two weeks of wireframe/prototype production into three days — time I reinvested in more usability testing rounds.
What I changed by hand, and why a person had to
Rewrote every AI-drafted clinical label
First drafts said "Hypertension — Stage 1." I changed status language to what a scared, non-clinical patient actually needs: "Controlled," "Normal," "Needs review."
Forced the allergy alert to break the visual system
The generated layout kept it consistent with other cards. I deliberately made it louder and impossible to miss — consistency lost to safety on purpose.
Cut an AI-suggested "AI diagnosis" feature
Early drafts leaned hard into AI-forward framing. I scoped that back to a single optional symptom-checker entry point — this is a booking tool, not a diagnostic one.
Re-timed the video-call states by hand
Connecting → live transitions felt instant and jarring in the first pass. I slowed and staged them so the moment of "you're now talking to your doctor" reads as calm, not abrupt.
Tested with 12 patients on the interactive prototype
94%
Booking task success
up from 61% on the old portal
38s
Avg. time to book
was ~3.5 min via phone
86
SUS usability score
"excellent" band
Self-directed concept project; figures are from a moderated usability study on the prototype, not a shipped product.
Three things I'd tell my past self
01
Test the boring flows first. I polished telemedicine before booking — but booking is where everyone drops off. Prioritize by funnel position, not by what's fun to design.
02
AI drafts need a safety review pass, always. Generated copy defaults to clinical precision over patient reassurance. Budget explicit time to rewrite for the reader, not the record.
03
Recruit for the edges, not the average. My sharpest fixes came from the 71-year-old first-time-smartphone tester, not the median participant.
What's next, if this kept going
Clinician workspace
The doctor-side chart, AI scribe, and clinical decision support this patient data should flow into.
Larger-type & one-handed modes
A dedicated accessibility pass beyond WCAG-AA minimums for older or motor-impaired patients.
Tablet & caregiver mode
Two-pane master-detail layouts (already wireframed) and a delegated-access mode for family caregivers.
Questions this project prepares me to answer
"How do you decide what to keep from an AI-generated draft?"
I treat AI output as a fast first draft, not a decision. Anything touching clinical safety, trust language, or accessibility gets a manual review pass — I can point to the allergy-alert and symptom-checker decisions as concrete examples.
"Walk me through your process on this project."
Contextual research first, then a journey map to find the real intervention points, then AI-accelerated wireframes to explore structure fast, then two rounds of usability testing that reshaped the booking flow from a single form into a 4-step guided flow.
"What's a design decision you'd defend even if data disagreed?"
Keeping the allergy alert visually inconsistent with the rest of the system. It breaks the calm aesthetic on purpose — clinical safety overrides visual consistency, every time.
"How do you design for accessibility in a regulated industry?"
WCAG AA contrast as a floor, 44px minimum targets, status conveyed by label plus color (never color alone) for color-blind safety, and recruiting test participants at the edges of the age/ability range, not just the average user.
"What would you do differently next time?"
Test the highest-drop-off flow first instead of the most novel one — I polished telemedicine before realizing booking abandonment was the real business risk.
Behavioral-interview version, ready to tell
For "tell me about a time you pushed back on a decision" or similar.
SITUATION
AI-generated drafts leaned toward a flashy "AI diagnosis assistant" as the hero feature of the patient app.
TASK
Decide whether to keep it, knowing it would look impressive in a portfolio but risked implying clinical authority the product didn't have.
ACTION
Scoped it down to a single optional symptom-checker entry point, and documented the reasoning — clinical safety over visual novelty — directly in the design rationale.
RESULT
A calmer, more trustworthy product — and a clear story for why I'll override an AI suggestion, or a stakeholder ask, when patient trust is on the line.
Same story, three formats
The right medium changes how much detail a viewer wants — I package this case study differently for each.
Rewrote every AI-drafted clinical label
First drafts said "Hypertension — Stage 1." I changed status language to what a scared, non-clinical patient actually needs: "Controlled," "Normal," "Needs review."
Forced the allergy alert to break the visual system
The generated layout kept it consistent with other cards. I deliberately made it louder and impossible to miss — consistency lost to safety on purpose.
Cut an AI-suggested "AI diagnosis" feature
Early drafts leaned hard into AI-forward framing. I scoped that back to a single optional symptom-checker entry point — this is a booking tool, not a diagnostic one.
Re-timed the video-call states by hand
Connecting → live transitions felt instant and jarring in the first pass. I slowed and staged them so the moment of "you're now talking to your doctor" reads as calm, not abrupt.
The calm, clinical
system behind the app
A blue-and-white foundation built for trust and clarity — every token, type ramp and component tuned for WCAG-AA and clinical safety.
28 color tokens7-step type ramp4px spacing grid
28 color tokens
7-step type ramp
4px spacing grid
14 components
Color
Blue carries every primary action; neutrals do the quiet work; semantic colors are reserved strictly for clinical status — never decoration.
PRIMARY— CLINICAL BLUE
Soft
#EAF1FE
300
#93B5F7
Primary
#2563EB
Ink Blue
#1E40AF
Semantic — Clinical status (color-blind safe pairings)
Success · Normal
#15A34A
Warning · Review
#D97706
Danger · Critical
#DC2626
Info · AI
#7C4DE0
Neutrals — Ink & surfaces
Ink
#0E1B2E
Ink Soft
#52627A
Ink Mute
#94A3B4
Line
#E6EDF5
Surface
#F4F7FB
App BG
#EEF3F9
Typography
Inter for everything on screen; JetBrains Mono for micro-labels and data. A tight ramp keeps hierarchy obvious without shouting.
Display
Inter · 800 · 44/1.03 · -3%
Heading 1
Inter · 800 · 32 · -2%
Heading 2
Inter · 700 · 22
Title
Inter · 700 · 17
Body — the quick brown fox jumps.
Inter · 400 · 15/1.5
Caption & helper text
Inter · 500 · 12.5
MONO LABEL / DATA
JetBrains Mono · 600
Spacing, radius & elevation - Tokens
Inter for everything on screen; JetBrains Mono for micro-labels and data. A tight ramp keeps hierarchy obvious without shouting.
Spacing · 4px grid
4 · xs
8 · sm
16 · md
24 · lg
32 · xl
Radius
8
16
20
pill
Elevation
sm
md
lg
Components
The building blocks used across the patient app — live samples, not pictures.
Buttons
Primary
Secondary
Tonal
Danger
Status badges
Normal
Review
Low
Critical
AI
Each pairs an icon or label with color — never color alone.
Segmented control
Lab reports
Visits
Summary
Lab result row
Lipid Panel
Jul 3, 2026
Review
Vitals metric
Lipid Panel
Heart rate
Review
Medication card
Lipid Panel
Jul 3, 2026
Review
UX CASE STUDY · 2026
Designing a calm patient app —
with AI as a collaborator, not a shortcut
The complete story: research, iteration, where AI accelerated the work, where I overrode it, and what I'd tell an interviewer about it.
Senior UI/UX and Web Designer
10-week solo project
iOS and android patient app
Booking · Telemedicine · Records · Rx
RECRUITER SUMMARY · 30-SECOND READ
Redesigned a fragmented patient experience (web portal + phone calls + paper) into one mobile app. Ran the research, used AI to accelerate wireframing and prototyping, then applied clinical-UX judgment AI can't: safety-critical hierarchy, accessibility, and trust cues. Booking task success rose from 61% to 94% in usability testing.
End-to-end UX process
Design systems
AI-augmented workflow
Accessibility (WCAG AA)
Healthcare / regulated UX
If you only look at 3 things
How I used AI in the workflow →
Booking flow: v1 → v3 →
Booking flow: v1 → v3 →
Usability results →
Care felt scattered across logins, phones, and paper
Patients at a two-clinic regional network booked appointments on one web portal, got lab results by mail, and had to call during business hours for a refill. Front-desk staff fielded the overflow. Nobody owned the whole journey.
41%
of bookings abandoned before completion on the legacy portal
3.5 min
average phone hold time just to request a refill
3 logins
across booking, billing, and the lab-results mailer site
Business goal: cut no-shows and phone volume. Human goal: make a stressful system feel less stressful.
11 interviews, 2 clinics shadowed, one journey map
Charting the emotional arc of a routine care episode showed exactly where the app had to intervene.
Contextual inquiry
Sat with front-desk staff during peak hours; watched patients navigate the portal on their own devices, not a lab setup.
Semi-structured interviews
11 patients, ages 24–71, mixed tech comfort. Focused on the last time they booked, got results, or refilled a prescription.
Heuristic evaluation
Audited the existing portal against Nielsen's heuristics — logged 18 issues, ranked by severity and frequency.
Cognitive load pass
Timed how long it took patients to find "am I okay?" in a lab report. Dense tables buried the one line that mattered.
"I have three logins and still end up calling." — patient, age 58
Six stages, not a straight line
In practice this looped constantly — testing sent me back to research twice — but the arc ran:
01
Discover
Interviews, shadowing, heuristic audit
02
Map
Journey map + service blueprint
03
Draft
AI-assisted wireframes, fast breadth
04
Refine
Hand-edited copy, hierarchy, safety
05
Test
Moderated usability sessions ×2 rounds
06
Ship
Final prototype + design system
The booking flow, three times over
This flow got the most rework because it's the make-or-break moment: if patients bail here, nothing else in the app matters.
v1 Single Long Form
Sat with front-desk staff during peak hours; watched patients navigate the portal on their own devices, not a lab setup.
v2 Stepped, no context
Split into steps, but no progress indicator or cost preview — testers didn't know how many steps remained or what it would cost.
v3 SHIPPED
94% success
Specialty › Doctor › Time › Confirm
4 clear steps, visible progress bar, and cost/coverage shown before the final tap.
Three constraints I couldn't design around
In practice this looped constantly — testing sent me back to research twice — but the arc ran:
Clinical safety can't be sacrificed for simplicity
Allergy and drug-interaction alerts had to stay visually loud even when it fought the "calm" aesthetic. I solved this by reserving red exclusively for safety, never for ordinary emphasis.
Wide age range, wide ability range
Designing for both a 24-year-old and a 71-year-old first-time-smartphone patient meant no clever gestures — every action needed a visible, labeled, 44px+ target.
Insurance logic is genuinely confusing
Coverage rules varied by plan and visit type. Rather than explain the rules, I surfaced the answer that mattered — "$0, covered" — and let a human support line handle edge cases.
What shipped, and why
One app, one login
Booking, telemedicine, records, and prescriptions unified — replacing the 3-login sprawl.
Plain-language status
Lab tables became "Normal / Review / Low" badges — the answer up front, detail on request.
Self-service refills
One-tap refill requests with visible pill-supply tracking replace the phone-hold ritual.
Transparency before commitment
Every booking shows cost, coverage, and cancellation terms before the final confirm tap.
Who the app touches across the hospital
Doctor
Nurse
Receptionist
Pharmacist
Admin
What shipped, and why
One app, one login
Booking, telemedicine, records, and prescriptions unified — replacing the 3-login sprawl.
Plain-language status
Lab tables became "Normal / Review / Low" badges — the answer up front, detail on request.
Self-service refills
One-tap refill requests with visible pill-supply tracking replace the phone-hold ritual.
Transparency before commitment
Every booking shows cost, coverage, and cancellation terms before the final confirm tap.
Who the app touches across the hospital
Doctor
Nurse
Receptionist
Pharmacist
Admin
Where AI actually helped — and where it didn't
I used an AI design tool as a fast hands, not a decision-maker. Here's the honest breakdown.
Wireframe breadth
Generated 3 layout directions per flow in minutes so I could compare structures instead of drafting each by hand.
Component drafts
First-pass component styling (cards, badges, buttons) as a starting canvas to react to, not final answers.
Copy scaffolding
Draft microcopy and labels I then rewrote for tone, clarity, and clinical safety.
Rapid iteration
Turned around v1 → v2 → v3 of the booking flow same-day after each testing round.
Net effect: AI compressed roughly two weeks of wireframe/prototype production into three days — time I reinvested in more usability testing rounds.
What I changed by hand, and why a person had to
Rewrote every AI-drafted clinical label
First drafts said "Hypertension — Stage 1." I changed status language to what a scared, non-clinical patient actually needs: "Controlled," "Normal," "Needs review."
Forced the allergy alert to break the visual system
The generated layout kept it consistent with other cards. I deliberately made it louder and impossible to miss — consistency lost to safety on purpose.
Cut an AI-suggested "AI diagnosis" feature
Early drafts leaned hard into AI-forward framing. I scoped that back to a single optional symptom-checker entry point — this is a booking tool, not a diagnostic one.
Re-timed the video-call states by hand
Connecting → live transitions felt instant and jarring in the first pass. I slowed and staged them so the moment of "you're now talking to your doctor" reads as calm, not abrupt.
Tested with 12 patients on the interactive prototype
94%
Booking task success
up from 61% on the old portal
38s
Avg. time to book
was ~3.5 min via phone
86
SUS usability score
"excellent" band
Self-directed concept project; figures are from a moderated usability study on the prototype, not a shipped product.
Three things I'd tell my past self
01
Test the boring flows first. I polished telemedicine before booking — but booking is where everyone drops off. Prioritize by funnel position, not by what's fun to design.
02
AI drafts need a safety review pass, always. Generated copy defaults to clinical precision over patient reassurance. Budget explicit time to rewrite for the reader, not the record.
03
Recruit for the edges, not the average. My sharpest fixes came from the 71-year-old first-time-smartphone tester, not the median participant.
What's next, if this kept going
Clinician workspace
The doctor-side chart, AI scribe, and clinical decision support this patient data should flow into.
Larger-type & one-handed modes
A dedicated accessibility pass beyond WCAG-AA minimums for older or motor-impaired patients.
Tablet & caregiver mode
Two-pane master-detail layouts (already wireframed) and a delegated-access mode for family caregivers.
Questions this project prepares me to answer
"How do you decide what to keep from an AI-generated draft?"
I treat AI output as a fast first draft, not a decision. Anything touching clinical safety, trust language, or accessibility gets a manual review pass — I can point to the allergy-alert and symptom-checker decisions as concrete examples.
"Walk me through your process on this project."
Contextual research first, then a journey map to find the real intervention points, then AI-accelerated wireframes to explore structure fast, then two rounds of usability testing that reshaped the booking flow from a single form into a 4-step guided flow.
"What's a design decision you'd defend even if data disagreed?"
Keeping the allergy alert visually inconsistent with the rest of the system. It breaks the calm aesthetic on purpose — clinical safety overrides visual consistency, every time.
"How do you design for accessibility in a regulated industry?"
WCAG AA contrast as a floor, 44px minimum targets, status conveyed by label plus color (never color alone) for color-blind safety, and recruiting test participants at the edges of the age/ability range, not just the average user.
"What would you do differently next time?"
Test the highest-drop-off flow first instead of the most novel one — I polished telemedicine before realizing booking abandonment was the real business risk.
Behavioral-interview version, ready to tell
For "tell me about a time you pushed back on a decision" or similar.
SITUATION
AI-generated drafts leaned toward a flashy "AI diagnosis assistant" as the hero feature of the patient app.
TASK
Decide whether to keep it, knowing it would look impressive in a portfolio but risked implying clinical authority the product didn't have.
ACTION
Scoped it down to a single optional symptom-checker entry point, and documented the reasoning — clinical safety over visual novelty — directly in the design rationale.
RESULT
A calmer, more trustworthy product — and a clear story for why I'll override an AI suggestion, or a stakeholder ask, when patient trust is on the line.
Same story, three formats
The right medium changes how much detail a viewer wants — I package this case study differently for each.
Rewrote every AI-drafted clinical label
First drafts said "Hypertension — Stage 1." I changed status language to what a scared, non-clinical patient actually needs: "Controlled," "Normal," "Needs review."
Forced the allergy alert to break the visual system
The generated layout kept it consistent with other cards. I deliberately made it louder and impossible to miss — consistency lost to safety on purpose.
Cut an AI-suggested "AI diagnosis" feature
Early drafts leaned hard into AI-forward framing. I scoped that back to a single optional symptom-checker entry point — this is a booking tool, not a diagnostic one.
Re-timed the video-call states by hand
Connecting → live transitions felt instant and jarring in the first pass. I slowed and staged them so the moment of "you're now talking to your doctor" reads as calm, not abrupt.
The calm, clinical
system behind the app
A blue-and-white foundation built for trust and clarity — every token, type ramp and component tuned for WCAG-AA and clinical safety.
28 color tokens7-step type ramp4px spacing grid
28 color tokens
7-step type ramp
4px spacing grid
14 components
Color
Blue carries every primary action; neutrals do the quiet work; semantic colors are reserved strictly for clinical status — never decoration.
PRIMARY— CLINICAL BLUE
Soft
#EAF1FE
300
#93B5F7
Primary
#2563EB
Ink Blue
#1E40AF
Semantic — Clinical status (color-blind safe pairings)
Success · Normal
#15A34A
Warning · Review
#D97706
Danger · Critical
#DC2626
Info · AI
#7C4DE0
Neutrals — Ink & surfaces
Ink
#0E1B2E
Ink Soft
#52627A
Ink Mute
#94A3B4
Line
#E6EDF5
Surface
#F4F7FB
App BG
#EEF3F9
Typography
Inter for everything on screen; JetBrains Mono for micro-labels and data. A tight ramp keeps hierarchy obvious without shouting.
Display
Inter · 800 · 44/1.03 · -3%
Heading 1
Inter · 800 · 32 · -2%
Heading 2
Inter · 700 · 22
Title
Inter · 700 · 17
Body — the quick brown fox jumps.
Inter · 400 · 15/1.5
Caption & helper text
Inter · 500 · 12.5
MONO LABEL / DATA
JetBrains Mono · 600
Spacing, radius & elevation - Tokens
Inter for everything on screen; JetBrains Mono for micro-labels and data. A tight ramp keeps hierarchy obvious without shouting.
Spacing · 4px grid
4 · xs
8 · sm
16 · md
24 · lg
32 · xl
Radius
8
16
20
pill
Elevation
sm
md
lg
Components
The building blocks used across the patient app — live samples, not pictures.
Buttons
Primary
Secondary
Tonal
Danger
Status badges
Normal
Review
Low
Critical
AI
Each pairs an icon or label with color — never color alone.
Segmented control
Lab reports
Visits
Summary
Lab result row
Lipid Panel
Jul 3, 2026
Review
Vitals metric
Lipid Panel
Heart rate
Review
Medication card
Lipid Panel
Jul 3, 2026
Review
UX CASE STUDY · 2026
Designing a calm patient app —
with AI as a collaborator, not a shortcut
The complete story: research, iteration, where AI accelerated the work, where I overrode it, and what I'd tell an interviewer about it.
Senior UI/UX and Web Designer
10-week solo project
iOS and android patient app
Booking · Telemedicine · Records · Rx
RECRUITER SUMMARY · 30-SECOND READ
Redesigned a fragmented patient experience (web portal + phone calls + paper) into one mobile app. Ran the research, used AI to accelerate wireframing and prototyping, then applied clinical-UX judgment AI can't: safety-critical hierarchy, accessibility, and trust cues. Booking task success rose from 61% to 94% in usability testing.
End-to-end UX process
Design systems
AI-augmented workflow
Accessibility (WCAG AA)
Healthcare / regulated UX
If you only look at 3 things
How I used AI in the workflow →
Booking flow: v1 → v3 →
Booking flow: v1 → v3 →
Usability results →
Care felt scattered across logins, phones, and paper
Patients at a two-clinic regional network booked appointments on one web portal, got lab results by mail, and had to call during business hours for a refill. Front-desk staff fielded the overflow. Nobody owned the whole journey.
41%
of bookings abandoned before completion on the legacy portal
3.5 min
average phone hold time just to request a refill
3 logins
across booking, billing, and the lab-results mailer site
Business goal: cut no-shows and phone volume. Human goal: make a stressful system feel less stressful.
11 interviews, 2 clinics shadowed, one journey map
Charting the emotional arc of a routine care episode showed exactly where the app had to intervene.
Contextual inquiry
Sat with front-desk staff during peak hours; watched patients navigate the portal on their own devices, not a lab setup.
Semi-structured interviews
11 patients, ages 24–71, mixed tech comfort. Focused on the last time they booked, got results, or refilled a prescription.
Heuristic evaluation
Audited the existing portal against Nielsen's heuristics — logged 18 issues, ranked by severity and frequency.
Cognitive load pass
Timed how long it took patients to find "am I okay?" in a lab report. Dense tables buried the one line that mattered.
"I have three logins and still end up calling." — patient, age 58
Six stages, not a straight line
In practice this looped constantly — testing sent me back to research twice — but the arc ran:
01
Discover
Interviews, shadowing, heuristic audit
02
Map
Journey map + service blueprint
03
Draft
AI-assisted wireframes, fast breadth
04
Refine
Hand-edited copy, hierarchy, safety
05
Test
Moderated usability sessions ×2 rounds
06
Ship
Final prototype + design system
The booking flow, three times over
This flow got the most rework because it's the make-or-break moment: if patients bail here, nothing else in the app matters.
v1 Single Long Form
Sat with front-desk staff during peak hours; watched patients navigate the portal on their own devices, not a lab setup.
v2 Stepped, no context
Split into steps, but no progress indicator or cost preview — testers didn't know how many steps remained or what it would cost.
v3 SHIPPED
94% success
Specialty › Doctor › Time › Confirm
4 clear steps, visible progress bar, and cost/coverage shown before the final tap.
Three constraints I couldn't design around
In practice this looped constantly — testing sent me back to research twice — but the arc ran:
Clinical safety can't be sacrificed for simplicity
Allergy and drug-interaction alerts had to stay visually loud even when it fought the "calm" aesthetic. I solved this by reserving red exclusively for safety, never for ordinary emphasis.
Wide age range, wide ability range
Designing for both a 24-year-old and a 71-year-old first-time-smartphone patient meant no clever gestures — every action needed a visible, labeled, 44px+ target.
Insurance logic is genuinely confusing
Coverage rules varied by plan and visit type. Rather than explain the rules, I surfaced the answer that mattered — "$0, covered" — and let a human support line handle edge cases.
What shipped, and why
One app, one login
Booking, telemedicine, records, and prescriptions unified — replacing the 3-login sprawl.
Plain-language status
Lab tables became "Normal / Review / Low" badges — the answer up front, detail on request.
Self-service refills
One-tap refill requests with visible pill-supply tracking replace the phone-hold ritual.
Transparency before commitment
Every booking shows cost, coverage, and cancellation terms before the final confirm tap.
Who the app touches across the hospital
Doctor
Nurse
Receptionist
Pharmacist
Admin
What shipped, and why
One app, one login
Booking, telemedicine, records, and prescriptions unified — replacing the 3-login sprawl.
Plain-language status
Lab tables became "Normal / Review / Low" badges — the answer up front, detail on request.
Self-service refills
One-tap refill requests with visible pill-supply tracking replace the phone-hold ritual.
Transparency before commitment
Every booking shows cost, coverage, and cancellation terms before the final confirm tap.
Who the app touches across the hospital
Doctor
Nurse
Receptionist
Pharmacist
Admin
Where AI actually helped — and where it didn't
I used an AI design tool as a fast hands, not a decision-maker. Here's the honest breakdown.
Wireframe breadth
Generated 3 layout directions per flow in minutes so I could compare structures instead of drafting each by hand.
Component drafts
First-pass component styling (cards, badges, buttons) as a starting canvas to react to, not final answers.
Copy scaffolding
Draft microcopy and labels I then rewrote for tone, clarity, and clinical safety.
Rapid iteration
Turned around v1 → v2 → v3 of the booking flow same-day after each testing round.
Net effect: AI compressed roughly two weeks of wireframe/prototype production into three days — time I reinvested in more usability testing rounds.
What I changed by hand, and why a person had to
Rewrote every AI-drafted clinical label
First drafts said "Hypertension — Stage 1." I changed status language to what a scared, non-clinical patient actually needs: "Controlled," "Normal," "Needs review."
Forced the allergy alert to break the visual system
The generated layout kept it consistent with other cards. I deliberately made it louder and impossible to miss — consistency lost to safety on purpose.
Cut an AI-suggested "AI diagnosis" feature
Early drafts leaned hard into AI-forward framing. I scoped that back to a single optional symptom-checker entry point — this is a booking tool, not a diagnostic one.
Re-timed the video-call states by hand
Connecting → live transitions felt instant and jarring in the first pass. I slowed and staged them so the moment of "you're now talking to your doctor" reads as calm, not abrupt.
Tested with 12 patients on the interactive prototype
94%
Booking task success
up from 61% on the old portal
38s
Avg. time to book
was ~3.5 min via phone
86
SUS usability score
"excellent" band
Self-directed concept project; figures are from a moderated usability study on the prototype, not a shipped product.
Three things I'd tell my past self
01
Test the boring flows first. I polished telemedicine before booking — but booking is where everyone drops off. Prioritize by funnel position, not by what's fun to design.
02
AI drafts need a safety review pass, always. Generated copy defaults to clinical precision over patient reassurance. Budget explicit time to rewrite for the reader, not the record.
03
Recruit for the edges, not the average. My sharpest fixes came from the 71-year-old first-time-smartphone tester, not the median participant.
What's next, if this kept going
Clinician workspace
The doctor-side chart, AI scribe, and clinical decision support this patient data should flow into.
Larger-type & one-handed modes
A dedicated accessibility pass beyond WCAG-AA minimums for older or motor-impaired patients.
Tablet & caregiver mode
Two-pane master-detail layouts (already wireframed) and a delegated-access mode for family caregivers.
Questions this project prepares me to answer
"How do you decide what to keep from an AI-generated draft?"
I treat AI output as a fast first draft, not a decision. Anything touching clinical safety, trust language, or accessibility gets a manual review pass — I can point to the allergy-alert and symptom-checker decisions as concrete examples.
"Walk me through your process on this project."
Contextual research first, then a journey map to find the real intervention points, then AI-accelerated wireframes to explore structure fast, then two rounds of usability testing that reshaped the booking flow from a single form into a 4-step guided flow.
"What's a design decision you'd defend even if data disagreed?"
Keeping the allergy alert visually inconsistent with the rest of the system. It breaks the calm aesthetic on purpose — clinical safety overrides visual consistency, every time.
"How do you design for accessibility in a regulated industry?"
WCAG AA contrast as a floor, 44px minimum targets, status conveyed by label plus color (never color alone) for color-blind safety, and recruiting test participants at the edges of the age/ability range, not just the average user.
"What would you do differently next time?"
Test the highest-drop-off flow first instead of the most novel one — I polished telemedicine before realizing booking abandonment was the real business risk.
Behavioral-interview version, ready to tell
For "tell me about a time you pushed back on a decision" or similar.
SITUATION
AI-generated drafts leaned toward a flashy "AI diagnosis assistant" as the hero feature of the patient app.
TASK
Decide whether to keep it, knowing it would look impressive in a portfolio but risked implying clinical authority the product didn't have.
ACTION
Scoped it down to a single optional symptom-checker entry point, and documented the reasoning — clinical safety over visual novelty — directly in the design rationale.
RESULT
A calmer, more trustworthy product — and a clear story for why I'll override an AI suggestion, or a stakeholder ask, when patient trust is on the line.
Same story, three formats
The right medium changes how much detail a viewer wants — I package this case study differently for each.
Rewrote every AI-drafted clinical label
First drafts said "Hypertension — Stage 1." I changed status language to what a scared, non-clinical patient actually needs: "Controlled," "Normal," "Needs review."
Forced the allergy alert to break the visual system
The generated layout kept it consistent with other cards. I deliberately made it louder and impossible to miss — consistency lost to safety on purpose.
Cut an AI-suggested "AI diagnosis" feature
Early drafts leaned hard into AI-forward framing. I scoped that back to a single optional symptom-checker entry point — this is a booking tool, not a diagnostic one.
Re-timed the video-call states by hand
Connecting → live transitions felt instant and jarring in the first pass. I slowed and staged them so the moment of "you're now talking to your doctor" reads as calm, not abrupt.
The calm, clinical
system behind the app
A blue-and-white foundation built for trust and clarity — every token, type ramp and component tuned for WCAG-AA and clinical safety.
28 color tokens7-step type ramp4px spacing grid
28 color tokens
7-step type ramp
4px spacing grid
14 components
Color
Blue carries every primary action; neutrals do the quiet work; semantic colors are reserved strictly for clinical status — never decoration.
PRIMARY— CLINICAL BLUE
Soft
#EAF1FE
300
#93B5F7
Primary
#2563EB
Ink Blue
#1E40AF
Semantic — Clinical status (color-blind safe pairings)
Success · Normal
#15A34A
Warning · Review
#D97706
Danger · Critical
#DC2626
Info · AI
#7C4DE0
Neutrals — Ink & surfaces
Ink
#0E1B2E
Ink Soft
#52627A
Ink Mute
#94A3B4
Line
#E6EDF5
Surface
#F4F7FB
App BG
#EEF3F9
Typography
Inter for everything on screen; JetBrains Mono for micro-labels and data. A tight ramp keeps hierarchy obvious without shouting.
Display
Inter · 800 · 44/1.03 · -3%
Heading 1
Inter · 800 · 32 · -2%
Heading 2
Inter · 700 · 22
Title
Inter · 700 · 17
Body — the quick brown fox jumps.
Inter · 400 · 15/1.5
Caption & helper text
Inter · 500 · 12.5
MONO LABEL / DATA
JetBrains Mono · 600
Spacing, radius & elevation - Tokens
Inter for everything on screen; JetBrains Mono for micro-labels and data. A tight ramp keeps hierarchy obvious without shouting.
Spacing · 4px grid
4 · xs
8 · sm
16 · md
24 · lg
32 · xl
Radius
8
16
20
pill
Elevation
sm
md
lg
Components
The building blocks used across the patient app — live samples, not pictures.
Buttons
Primary
Secondary
Tonal
Danger
Status badges
Normal
Review
Low
Critical
AI
Each pairs an icon or label with color — never color alone.
Segmented control
Lab reports
Visits
Summary
Lab result row
Lipid Panel
Jul 3, 2026
Review
Vitals metric
Lipid Panel
Heart rate
Review
Medication card