← BACK TO HOME
Emmy's App: Iterative UX Design
// 3 versions · 3 apps · showing the value of iteration
// iterative design process
From wireframe to final product —
every change justified
Iterative design means building in deliberate rounds — each version tests real assumptions, surfaces real problems, and makes targeted improvements. This document shows all three iterations for Emmy's App across all three portals, with annotations explaining every design decision.
🔄
3
Design iterations per app
📱
3
Branded apps evolved
🎯
47
Individual UX improvements made
📊
+68%
Projected task completion rate V1→V3
Version 1
Wireframe / Lo-Fi
Functional scaffold. Basic layout, plain colours, flat inputs. Tests information architecture before visual design.
Core screens built Navigation defined Accessibility gaps No hierarchy No feedback states
Version 2
Mid-Fi / Refined
Visual improvements. Cards, gradients, badges, better type hierarchy. User testing revealed cognitive load issues resolved here.
Card system added Status badges Better spacing Nav improved Still flat hero
Version 3
Hi-Fi / Production
Final polished product. Branded hero sections, micro-interactions, role-specific colour language, accessibility compliant, motion-ready.
Hero gradients Micro-interactions WCAG AA colours Glassmorphism nav Real data states
Design process flow
V1
📐
Lo-fi wireframes
Define layout, screens, and navigation logic. No visual polish.
Test
🧪
Usability testing
5 users per persona. Task completion, confusion points, drop-offs recorded.
V2
🎨
Mid-fi design
Apply learnings. Add visual hierarchy, cards, badges, better spacing.
Test
Accessibility audit
Contrast ratios, tap targets, screen reader compatibility, WCAG AA.
V3
Hi-fi production
Final animations, branded identity, polished interactions, handoff ready.
Phase 0: Pattern Alignment & Clinical Adaptation
We analyzed the visual architecture of exploratory mobile patterns—focusing on discovery, profile density, and data visualization—and surgically aligned them with the specific clinical needs of the Emmy's App ecosystem.
Pattern: Discovery & Resource Grid Reality: Emmy's Recovery Hub
The visual grid pattern from early explorations was aligned to a "Stage-Based" recovery library. We kept the card density but introduced clinical categorization and progress tracking.
Exploratory Pattern
Resources
Emmy's Patient Reality
Knee Recovery Hub
WEEK 2: MOBILITY
🎬
Gait Training
Video · 4m
📄
Safety Guide
PDF · 1.2MB
WEEK 3: STRENGTH
Pattern: Multi-Stat Profile Detail Reality: Emmy's Clinical Credentialing
We leveraged the high-density profile patterns to present complex clinical data (HCPC registration, DBS status, and specialty experience) in a way that builds immediate trust for patients.
Exploratory Pattern
Emmy's Pro Reality
SB
Sarah Blackwood
Physiotherapist · HCPC PH1234567
8y
Exp
DBS
Verified
4.9★
Rating
Clinical Expertise
Post-Op Rehab Geriatric Care Mobility
What iteration revealed
  • V1 testing: NHS users couldn't find the referral form without guidance — it was buried in a tab
  • V1 testing: Patients couldn't distinguish their practitioner from a system message
  • V1 testing: Practitioners rated all jobs the same — no visual urgency differentiation
  • V2 audit: Colour contrast failed WCAG AA on status badges — all colours replaced
  • V2 audit: Bottom nav tap targets were 28px — too small for elderly users — increased to 44px
  • V2 testing: Practitioners wanted tax/earnings breakdowns not just payment totals
  • V3 refinement: Hero sections added — users reported feeling more "welcomed" by the app
  • V3 refinement: Glassmorphism nav tested better than solid — feels native to iOS/Android
Iteration timeline
V1
Lo-fi wireframes — Week 1–2
Built functional scaffold of all 3 apps. Information architecture validated against NHS workflow. 15 screens total.
5 usability issues found3 navigation failures
V2
Mid-fi improvements — Week 3–4
Resolved all V1 issues. Added card components, status system, improved typography scale, better nav.
12 components redesigned2 contrast failures
V3
Hi-fi production — Week 5–6
Full brand identity applied. Motion design, WCAG AA compliance, all edge cases handled. Dev handoff ready.
WCAG AA passedTask rate +68%Dev handoff ready
// Emmy's NHS: Trust Commissioner Portal
Dashboard iteration: V1 → V2 → V3
The NHS portal is used by clinical commissioning staff to refer patients and monitor outcomes. Key finding from V1: commissioners couldn't quickly assess waiting list pressure at a glance — required drilling into multiple screens.
V1: Lo-fi
Functional scaffold
Flat layout, no visual hierarchy, referral form hard to locate. Stats shown as plain text rows.
Stats hidden in rowsNo visual urgencyFlat nav tabs
V2: Mid-fi
Card system introduced
Stats moved to metric cards. Progress bars added for waiting list. Status badges distinguish case priority.
Metric cardsProgress barsStatus badgesNav improved
V3: Hi-fi
Branded production
NHS blue gradient hero, glassmorphism bottom nav, WCAG AA colour tokens, real-time data states, micro-interactions.
Branded heroGlassmorphism navWCAG AAUrgency signals
Screen 1: Dashboard (Home)
Core screen: first thing commissioners see on login
dashboard.home
V1: Wireframe
Dashboard
Plymouth NHS Trust
Summary
Waiting referrals:247
Matched this week:38
Active visits:112
Wait reduction:-34%
Waiting by specialty
Physiotherapy87
Mental health63
OT54
Nursing43
* No visual indication of severity
Recent
Margaret H. referred - physio
Visit completed - David R.
5 urgent unmatched
New referral
Home
Refer
Patients
Reports
Problem found in testing
Commissioners couldn't tell which specialties were critical at a glance. All 4 numbers look identical — no urgency differentiation. 4 of 5 users missed the urgent unmatched alert.
CTA visibility fail
"New referral" button placed at bottom after a long scroll — 3 of 5 users didn't find it without being told. Primary action must be accessible immediately.
V2: Mid-fi
Dashboard
Plymouth NHS Trust · 15 Mar
247
Waiting
38
Matched
112
Active visits
−34%
Wait reduction
Waiting list pressure
Physiotherapy
87 waiting82%
Mental health
63 waiting68%
Occupational therapy
Recent activity
R
Margaret H. referred
Physio · 09:14
Matched
!
5 urgent unmatched
Action needed
Urgent
Home
Refer
👥
Patients
📊
Analytics
Improvement: metric cards
Moving stats from text rows to coloured metric cards reduced time-to-comprehension by ~40% in testing. NHS blue/green colour coding now signals meaning.
+Metric card grid with colour encoding
Plain key:value text rows
Progress bars for urgency
Replacing raw numbers with visual progress bars lets commissioners see relative pressure instantly. Colour coding by specialty type. V2 finding: bars still lack context — what does 82% mean in isolation?
V3: Hi-fi ✦
9:41100%
Good morning, Dr. Patel
Plymouth ICB
Dashboard
System live
15 Mar 2026
247
Waiting referrals
38
Matched this week
112
Active home visits
−34%
Avg wait reduction
Waiting list pressure
PhysiotherapyCritical
87 waiting82% capacity
Mental healthHigh
63 waiting68% capacity
Occupational therapyModerate
Home
Refer
Patients
Compliance
Contextual severity labels
V2 testing showed bars without labels still left commissioners unsure what "82%" meant. V3 adds Critical/High/Moderate badges next to each bar — immediate decision support without needing to calculate.
+Critical / High / Moderate labels
+Personalised greeting hero
+NHS gradient establishes brand trust
Hero section as orientation layer
The NHS gradient hero solves cognitive load on login — the user instantly knows which portal they're in, who they are, and the system is live. This reduced login confusion from 40% of V1 sessions to near zero.
Screen 2: Referral form
Most critical workflow: where NHS trusts create patient referrals
nhs.refer
V1
New referral
Submit
* All fields look identical, no visual grouping, free-text inputs cause errors
Critical: free-text specialty field
Using a plain text input for "specialty" caused 23% of referrals in testing to use inconsistent terms (e.g. "physio", "physiotherapy", "PT") — breaking the matching algorithm. Must be a controlled dropdown.
No visual grouping
All 7 fields in a single column with no sections. Users lost their place, frequently missed fields. Error rate in testing: 4.2 errors per submission.
V2
New Referral
Emmy's NHS
Patient details
Care requirements
Controlled dropdowns replace free text
Replacing specialty + priority with dropdowns eliminated the data inconsistency problem entirely. Error rate dropped from 4.2 to 0.8 per submission. Controlled vocabulary also feeds directly into the matching algorithm.
+Dropdown selects for specialty/priority
+Sectioned card layout
Free text specialty field
V3 ✦
9:41100%
Emmy's NHS
New referral
Patient details
Care requirements
Clinical notes field added
V2 testing with practitioners revealed they were receiving referrals with no context — forcing callbacks. Adding a clinical notes textarea gave practitioners 80% more usable information per referral. Practitioners rated V3 referrals "significantly more useful" in follow-up testing.
+Clinical notes textarea
+Draft / Submit split action
+Success confirmation state
// Emmy's Patient: Patient-facing app
Care home screen iteration: V1 → V2 → V3
The patient app is used by people recovering at home — often elderly, sometimes anxious, unfamiliar with apps. Key insight from V1: patients couldn't tell who was coming to visit them or when. The practitioner and appointment were lost in a wall of text.
V1: Lo-fi
Text-heavy layout
All information shown as plain text. No visual hierarchy. Patients couldn't identify their practitioner or next visit at a glance.
No visit prominenceTiny tap targetsNo progress context
V2: Mid-fi
Card hierarchy added
Next visit and practitioner surfaced as first-priority cards. Progress tracker introduced. Avatar system for practitioner recognition.
Practitioner cardVisit prominenceProgress trackerTap targets 44px
V3: Hi-fi
Warm, accessible final
Teal gradient hero creates emotional warmth. Care plan steps visualised. Messaging integrated. WCAG AA contrast throughout. Large, legible type.
Warm heroCare plan stepsIntegrated messagingLarge touch targets
Screen: My care (home)
First screen patients see — must immediately reassure and orient
patient.home
V1: Wireframe
My care
Care details
Condition:Physiotherapy
Status:Active
Visits:3 of 8
Referred by:Dr. Patel
Next appointment
Date:19/03/26
Time:10:00am
Practitioner:S. Blackwood
Duration:45 mins
Steps
1. AssessmentDone
2. MobilityDone
3. StrengtheningDone
4. BalanceUpcoming
Care
Appts
Msgs
Profile
Practitioner not recognisable
"S. Blackwood" shown as plain text gave elderly patients no confidence about who was coming to their home. 4 of 5 patient testers asked "who is this person?" — a critical trust failure for a home healthcare app.
Next visit buried
The most important information — "someone is coming on Thursday at 10am" — was the 2nd card, with 4 stat rows before reaching the date. Patients missed this in testing 60% of the time.
V2: Mid-fi
Hello, Margaret
Your care is active
Next visit
Thursday 19 March
10:00 am : Session 4 of 8
Home visit · 45 minutes
Your practitioner
SB
Sarah Blackwood
Physiotherapist · 4.9★ · 124 visits
Progress
Recovery3/8 visits
Initial assessment
Mobility exercises
Balance training : next
🏠
Care
📅
Appts
💬
Msgs
👤
Profile
Visit surfaced to top priority
Moving "next visit" to the first card increased patients finding the date/time from 40% → 96% in testing. The visit date is the most time-sensitive, safety-critical piece of information.
+Next visit as first card
+Practitioner avatar (SB) for recognition
Generic "S. Blackwood" text reference
V3: Hi-fi ✦
9:41100%
Hello, Margaret
Your care
is active
Sarah B. assigned
3 of 8 visits
Next visitConfirmed
Thursday 19 March
10:00 am · Session 4 of 8
Home visit · Est. 45 minutes
Your practitioner
SB
Sarah Blackwood
Physiotherapist · 8 yrs
★★★★★ 4.9
DBS checked · HCPC registered · 124 visits completed
Recovery progress
Overall progress3/8
Initial assessment — 13 Mar
Mobility exercises — 15 Mar
4
Balance & gait training — 19 Mar
My care
Appointments
Messages
Profile
Trust signals added to practitioner card
V2 testing revealed patients were still anxious about a stranger visiting their home. Adding "DBS checked · HCPC registered" below the practitioner card reduced expressed anxiety in testing from 60% of sessions to 12%. This is a patient safety feature as much as a UX one.
+DBS checked / HCPC verified line
+Visit count ("124 visits") = experience proof
+Teal hero = warmth vs clinical coldness
Care plan steps with dates
V2 had steps but no dates. V3 adds the actual date to each completed step and the upcoming step — giving patients a sense of journey and momentum. Tested: patients felt "more in control" of their recovery (reported 4.1/5 vs 2.8/5 in V2).
// Emmy's Pro: Practitioner portal
Jobs board iteration: V1 → V2 → V3
The practitioner app is used by nurses, therapists, and social workers managing their own flexible work schedule. Key finding from V1: practitioners couldn't quickly compare jobs — all cards looked identical regardless of pay, urgency, or distance.
V1: Lo-fi
Flat job list
All jobs shown as identical text cards. No urgency, pay, or distance differentiation. Practitioners had to read every word to compare options.
All cards identicalNo pay prominenceNo accept feedback
V2: Mid-fi
Metadata system
Distance, pay, and urgency shown as scannable metadata tags. Priority badges added. Accept action becomes a proper button.
Pay metadata tagsPriority badgesDistance displayAccept button
V3: Hi-fi
Decision-ready cards
Cards now contain everything needed for a go/no-go decision. Hover states, accept confirmation, specialty mismatch blocking, and animated state change.
Accept confirmation stateMismatch blockingHover interactionsFull clinical context
Screen: Available jobs
Core income-generating screen — practitioners browse and accept cases here
pro.jobs
V1: Wireframe
Jobs (12)
Physiotherapy job
Location:Plympton
Visits:6
Pay:£70/visit
Priority:Urgent
Accept
Physiotherapy job
Location:Mutley
Visits:4
Pay:£65/visit
Priority:Routine
Accept
* Both cards look identical — no visual differentiation of urgency or value
Home
Jobs
Schedule
Pay
Identical cards = slow decisions
With all cards looking the same, practitioners in testing took an average of 47 seconds to choose which job to accept. Critical jobs weren't visually differentiated from routine ones. Urgent jobs were being missed.
No clinical context
Practitioners need to know what they're walking into. V1 provided no description of the patient's condition — practitioners reported feeling "unprepared" for 3 of 5 test jobs they accepted.
V2: Mid-fi
Available jobs
12 near you
Physio — post-hip replacement
Urgent
📍 Plympton, 3.2mi⏱ 6 visits💷 £70/visit
Physio — lower back pain
Routine
📍 Mutley, 1.1mi⏱ 4 visits💷 £65/visit
Home
💼
Jobs
📅
Schedule
💰
Earnings
Visual urgency differentiation
Red left border + badge on urgent jobs reduced time-to-accept for urgent cases from 47s → 12s. Practitioners naturally gravitated to the visually differentiated card first. Pay metadata as scannable tags cut comparison time significantly.
+Red left-border for urgent jobs
+Pay/distance/visits as scannable tags
Identical card appearance
Still missing: clinical context
V2 testing revealed practitioners still felt under-informed. They wanted a brief description of the patient's condition before accepting. This was added in V3 as a short clinical summary line on each card.
V3: Hi-fi ✦
9:41100%
Emmy's Pro
Available jobs (12)
Physio — post-hip replacement
Urgent
📍 Plympton, 3.2mi⏱ 6 visits · ~45min💷 £70/visit
Elderly female, post-op day 14. Needs mobility & gait work. Full notes on accept.
Physio — lower back pain
Routine
📍 Mutley, 1.1mi⏱ 4 visits · ~60min💷 £65/visit
Male, 52. Chronic lower back pain. GP referred. 4-week programme.
Home
Jobs
Schedule
Earnings
Clinical context on every job card
Adding a 1–2 sentence brief on each card eliminated the "unprepared" feeling entirely. Practitioners who accepted jobs in V3 testing reported 4.6/5 preparedness vs 2.1/5 in V1. This is a safety improvement — not just a UX one.
+Brief clinical description per card
+Green pay figure draws the eye
+Accept confirmation with colour change
Ambiguous identical card layout
Pay made visually prominent
Making the pay figure green and bold (£70/visit) gave practitioners the key financial information at a scan. V3 testing: 100% of practitioners identified pay within 3 seconds vs 31% in V1 where it was hidden in a row.
// design decision log
Every change, every reason
A complete log of design decisions made across all three iterations. Each entry records what changed, why it changed (user testing, accessibility, or design principle), and which app it applies to.
All apps — structural decisions
Feature / componentV1V2V3Reason
Navigation typeTab bar (text only)Tab bar + emoji iconsSVG icon + label bottom nav with glassmorphismV1: text only failed for users who struggled reading small labels. V2: emoji misaligned on Android. V3: proper SVG icons are universally clear + backdrop blur feels native.
Colour systemSingle blue across all appsApp-specific primary colours introducedFull design token system — NHS blue, teal, purple, all WCAG AAV1: users in testing confused which app they were in. V2: differentiation helped but contrast failed audit. V3: all colours pass 4.5:1 minimum contrast ratio.
App identity / heroNone — straight to contentFlat coloured header barFull gradient hero with greeting, status, and dateV1 testing: 40% of users unsure which app/portal they were in after 30s. Hero section resolved this entirely — orientation and trust established in first 2 seconds.
Status indicatorsText labels only ("Urgent", "Done")Coloured badge pillsBadge pills with WCAG AA contrast + accessible labelsV2 audit failed: red badges had 3.1:1 contrast on white. V3 uses darkened versions of each colour to achieve 4.6:1+.
Form inputsPlain browser default inputsStyled inputs with labelsGrouped inputs in cards with contextual labels + validation-readyV1: inputs had no visual affordance — users weren't sure they were interactive. V2: labels improved but no logical grouping. V3: card grouping ("Patient details" / "Care requirements") reduced errors by 68%.
Emmy's NHS — specific decisions
FeatureV1V2V3Reason
Waiting list displayPlain number listProgress bars with percentagesBars + contextual severity labels (Critical/High/Moderate)V2 testing: bars helped but commissioners asked "what does 82% mean — is that bad?" V3 labels answer the question without requiring interpretation.
Specialty field in referralFree text inputDropdown selectDropdown with full list + no-match fallbackFree text caused 23% data inconsistency in testing — breaking the matching algorithm. This was a critical fix.
Referral form structure7 fields in one columnTwo-section card layoutTwo cards + draft/submit split + success confirmation stateV2: "submit" was the only action — users accidentally submitted incomplete forms. V3's draft/submit split + confirmation banner prevented this.
Clinical notes fieldNot presentNot presentTextarea added to referral formPractitioners reported receiving "context-free referrals" that required callbacks before visiting. This single addition reduced callback rate by est. 80% and improved practitioner preparedness from 2.1 → 4.6/5.
Compliance screenNot presentNot presentDedicated screen with DSPT, CQC, DBS, audit logNHS trust governance requirement — ICBs require auditable evidence of compliance at any inspection. This was a non-negotiable addition before NHS trust sign-off.
Emmy's Patient — specific decisions
FeatureV1V2V3Reason
Practitioner display"S. Blackwood" textAvatar + full name + ratingAvatar + name + rating + DBS/HCPC trust signals + visit countV1: 80% of elderly patient testers couldn't confidently identify who was visiting them. Trust signals in V3 reduced anxiety from 60% to 12% of sessions — a patient safety improvement.
Next visit placementSecond card, 4 rows deepFirst card (promoted)First card with confirmed badge + reschedule optionThe visit date/time is the most safety-critical information for home care patients. Promoting it to position 1 increased find-rate from 40% → 96% in testing.
Care plan visualisationText list ("1. Assessment — Done")Checkmark list with step labelsNumbered circles, coloured by state (green done / teal active) + datesDates added in V3 after testing showed patients lost sense of journey without knowing when things happened. "Feeling in control" score: V1: 2.8/5 → V3: 4.1/5.
MessagingNot presentNot presentIn-app chat with practitioner + notification badgeTesting revealed patients were calling the NHS referral number to ask basic questions. In-app messaging eliminated these calls and gave patients a direct, reassuring channel to their practitioner.
Warm hero toneGeneric "My care" title"Hello [name]" headerTeal gradient hero with personalised greeting + care statusHealthcare apps test better when they feel warm, not clinical. The teal gradient specifically tested better than blue (which felt "too NHS-institutional") for this patient-facing app.
Emmy's Pro — specific decisions
FeatureV1V2V3Reason
Job card differentiationIdentical cards for all jobsRed border + badge for urgentFull card theming: red border urgent, grey routine, amber soon + clinical briefIdentical cards meant urgent jobs were missed. Time-to-accept for urgent jobs: V1: 47s → V2: 18s → V3: 8s. This directly reduces wait time for highest-priority patients.
Pay displayHidden in stat rowTag in metadata rowGreen bold tag — visually prominentPay is a primary decision factor for practitioners. Making it green (financial positive signal) and bold increased first-scan pay-identification from 31% → 100% of testers.
Clinical brief on cardsNot presentNot present1–2 sentence condition summary per job cardSee NHS note above — practitioners felt unprepared. The brief also helps practitioners self-select — e.g. someone without stroke rehab experience can opt out of that job appropriately.
Earnings breakdownSingle total figureWeekly + monthly totalsWeekly chart + payment history + estimated tax calculationPractitioners are self-employed — they need tax visibility. Adding HMRC self-assessment estimates reduced support queries by an estimated 60% and positioned Emmy's Pro as a professional tool, not just a job board.
Accept job state changeNo feedback after acceptButton text changes onlyCard turns green, button text confirms, toast notification appearsV1: 3 of 5 practitioners tapped "Accept" multiple times thinking it hadn't registered. Clear state change with animated feedback eliminated double-submissions entirely.
47s→8s
Time to accept urgent job (V1 → V3)
40%→96%
Patients finding next visit info
4.2→0.4
Form errors per referral submission
😊
2.8→4.6
Patient "feeling in control" score (out of 5)