Vantage Care · Process

The full process

Research, personas, flows and the design system behind Vantage Care. The case study covers the decisions; this is the work underneath them.

02 — User Research

One Primary User, Named

The brief supplied Margaret. Rather than broadening her into a segment, I kept her specific and added the two people who orbit her — the adult child who set the phone up, and the care coach on the other end of the readings. Designing for a named person made every trade-off concrete.

👵
Margaret
74 · Newly Diagnosed · Primary User
  • Take her reading each morning without help
  • Know immediately whether the number is a problem
  • Feel confident she has not broken anything
  • Reduced vision; small grey text is unreadable
  • Less-steady hands; small targets are missed and mis-tapped
  • Stops entirely when an app behaves unexpectedly
🧑
Steven
Margaret's Son, 46 · The Setup Helper
  • Set up the cuff and app once, correctly
  • Know his mother is actually taking readings
  • Not be the permanent help desk
  • Lives two hours away; support happens over the phone
  • Can't see her screen to talk her through a failure
👩‍⚕️
Dana
Care Coach · The Human on the Other End
  • Receive consistent, correctly-taken readings
  • Reach members before a trend becomes an event
  • Be visibly reachable so members don't panic alone
  • Readings taken incorrectly are clinically useless
  • Members who feel unsupported stop measuring entirely

03 — Defining the Opportunity

Core Challenges

CHALLENGE 01
👓
Accessible Without Being Patronising

Senior-first design usually collapses into an aesthetic of huge grey buttons on white — visibly "the simple version." Margaret does not want the simple version. The app had to be genuinely premium and genuinely legible at the same time.

CHALLENGE 02
📡
An Honest Hardware Dependency

The reading cannot happen without a paired Bluetooth cuff. Hiding that until it fails produces a technical error at the worst possible moment. The dependency had to be visible, explained and recoverable throughout the flow.

CHALLENGE 03
🔔
Reminders That Actually Work

A silent notification in a tray is invisible to the user who most needs the prompt. But an alarm that fires wrongly is alarming in the literal sense. The reminder had to be impossible to miss and impossible to misread.

CHALLENGE 04
🫂
A Human Within Reach, Always

A high reading at home, alone, is frightening. The app needed a named person one tap away from every screen — present enough to reassure, quiet enough not to imply that something is constantly wrong.


04 — Discovery & Research

Market Insights

FINDING 01
50%
Home Monitoring Adherence Falls Fast

Roughly half of patients prescribed home blood-pressure monitoring stop within months. Abandonment is rarely about the clinical value — it is about friction, uncertainty about correct technique, and the absence of feedback confirming the effort is worth anything. (Source: AHA Home BP Monitoring Scientific Statement)

FINDING 02
7:1
AAA Contrast for Reduced Vision

WCAG AA sets 4.5:1 for body text; AAA sets 7:1. For users with age-related vision loss the difference is the gap between readable and legible. Setting 7:1 as the floor rather than the aspiration meant the palette had to be designed around contrast, not corrected for it afterwards. (Source: WCAG 2.2 Contrast Guidance)

FINDING 03
3x
Technique Errors Distort Readings

Talking, crossed legs, a full bladder, or an unsupported arm can shift a reading by clinically meaningful margins. A monitoring app that only records numbers without coaching posture is collecting data that may actively mislead the clinician reading it. (Source: ESH Home BP Measurement Guidelines)


05 — User Flow

Take & Log a Reading

STEP 01
Home
One gauge showing the last reading with a plain verdict, a seven-day trend you can tap, and one large primary action: Take my reading. Nothing competes with it.
STEP 02
Connect
The Bluetooth dependency stated openly, with a single instruction — press START on the cuff — and a visible connecting state that resolves to a clear confirmation.
STEP 03
Get Comfortable
A short posture coach before measuring: sit back, feet flat, arm supported, don't talk. This step exists to protect the clinical validity of the number.
STEP 04
Measuring
A calm, honest wait state that explains what the cuff is doing, with a beating-heart indicator and an always-available way to stop and start over.
STEP 05
Result
The number, then immediately what it means in words, then confirmation that Dana has it. A high reading branches to what-to-do guidance rather than a red warning.

06 — Toolkits

Tools & Workflow

Designed and built end-to-end — from the assignment brief through an interactive HTML prototype to a running native Android application with real scheduled alarms.

📐Claude CodeDesign & Build
🤖Jetpack ComposeNative UI
🔤Atkinson HyperlegibleClear-Font Option
AlarmManagerExact Reminders
🗣️TextToSpeechRead-Aloud
Kotlin Jetpack Compose Material 3 Custom Animated Navigator AlarmManager + BroadcastReceiver Full-Screen Intent MediaPlayer Lottie Downloadable Google Fonts

07 — Design Strategy

Start at the edge,
and the centre follows.

The governing rule throughout was that Margaret is not a constraint on the design — she is the design target. Every decision was tested against her first, and repeatedly the version that worked for her was simply the better version. Larger type forced tighter copy. Bigger targets forced fewer actions per screen. The accessibility work made the product better, not merely compliant.

01
One Job Per Screen
Established the hardest rule first: every screen does exactly one thing and states it at the top. This single constraint eliminated the majority of layout debates and is the main reason the flow survives at triple text size without breaking.
02
Contrast-First Palette
Built the warm linen, petrol-teal and coral palette against a 7:1 body-text floor rather than designing it and testing later. A high-contrast mode drops translucency entirely for users who need the AAA-leaning solid version.
03
Blameless Error Writing
Rewrote every failure state so the software takes the blame and names the recovery step. "Connection lost" became a calm screen explaining what happened and offering one way forward — never an error code, never an implication that the user did it wrong.
04
The Accessibility Panel
Rather than guessing at Margaret's needs, built eight independent controls she can combine herself — text size, contrast, typeface, spacing, target size, motion, haptics and read-aloud. Preference over assumption.
05
Motion That Guides
A gauge ring that draws itself, count-up numbers, a beating-heart measure state and a tappable trend chart. Every animation communicates progress or state — and all of it freezes completely when Reduce motion is on.
06
Real Reminders, Not Notifications
Implemented exact AlarmManager alarms with a full-screen intent that rings a tone and wakes the screen straight into the app, surviving reboot. A reminder that can be missed is not a reminder for the person who needs it most.

10 — Design System & Scalability

A system that bends
without breaking.

The hardest requirement was not any single token — it was that every one of the eight accessibility controls could be combined with any other and nothing could break. Triple text size with bigger buttons and roomier spacing is a brutal layout test, and passing it is what forced the one-job-per-screen rule to hold everywhere.

Brand Colour Palette
Canvas #F5F2EE
Petrol #0B5563
Coral #CF5B41
Good #1B7A43
Caution #8C5410
Ink #15212B
Typography
Fraunces
Warm optical serif · headlines and the giant reading number
Figtree
Hyperlegible humanist sans · everything functional
Atkinson Hyperlegible
Replaces both roles when "Clear font" is on
Non-Negotiable Rules

Body text at 7:1 contrast minimum — AAA, not AA. Colour is never the only signal: every status is colour plus icon plus word. One clear job per screen, stated at the top.

Errors are blameless and always recoverable, and a named human — Dana — is reachable in one tap from anywhere in the app.

Scalability Test

Every layout is verified at the largest text level with bigger buttons and roomier spacing enabled simultaneously — the worst-case combination — with no clipping, no overlap and no horizontal scroll.

High contrast drops translucency entirely rather than tinting it, so frosted-glass surfaces degrade to solid rather than to muddy.

The Eight Controls

SettingWhat it does
Larger textScales all type across three levels, shown as a three-dot level indicator rather than an abstract slider
High contrastSwitches to an AAA-leaning solid palette, dropping translucency entirely
Clear fontSwaps the entire interface to Atkinson Hyperlegible, designed for low vision
More spacingRoomier line height and padding for users who track lines with difficulty
Bigger buttonsRaises every touch target to 72dp or above for less-steady hands
Reduce motionFreezes all animation, including the gauge draw and count-up numbers
Vibrate on tapReal haptic confirmation that a tap registered — critical for tremor
Read pages aloudText-to-speech narrates each screen automatically as the user navigates

Back Return to the case study