TotalHealth UI case study — Anna Jennings

Responsive web app · Health records and data

Health tracking that doesn't ask you to weigh in every morning.

TotalHealth desktop data page showing Nutrition, Activity and Mood cards above Trends & Progress, Sync devices and More Resources buttons

RoleUI design, design system, research, testing

PlatformResponsive web — mobile and desktop

Screens22 designed, 5 tested tasks

Most health apps ask for a little data many times a day. Research turned up two groups that quietly opt out of that: people in eating disorder recovery, for whom granular daily logging can be a trigger, and people who simply want to look at their phone less.

TotalHealth doesn't compete with Apple Health or Noom on logging. It syncs the apps someone already uses, pulls their medical records into the same place, and presents the whole picture at a distance — a macro view instead of a daily one.

I ran the research, built the design system, designed every screen at both breakpoints, and tested the high-fidelity prototype with six people.

Why not a tutorialInterviews found people dislike upfront tutorials and prefer instruction in context. Onboarding states what the product does instead of teaching an interface.

Onboarding builds one line at a time

Five screens, one illustration, and a sentence added on each. The list accumulates until the payoff and the call to action land together on the last screen. Nothing is explained; the product simply says what it holds.

Five onboarding screens: Welcome, then Health Data, then Appointments added, then Medical Records added, then All in one place with a Get started button — The illustration holds steady while the copy accumulates — the whole proposition is readable at a glance across the row.

Card sortFive participants. “Health Data” proved too close to “Medical Records” to separate, so the two merged and Settings moved under Account.

Four places to be

Home, Data, Calendar, Records. Each mobile screen is built from full-width targets with generous spacing — the system specifies large buttons and type wherever possible, and components placed close together to imply they belong together.

Four TotalHealth mobile screens: home with My Data, My Calendar and My Records cards; data with Nutrition, Activity and Mood; a June calendar with Sync and New buttons; and records with search, photo capture and category buttons — Home, Data, Calendar, Records. On the records screen, photo capture sits above the category list because uploading by camera was one of the five tasks I tested.

Two platforms, one systemBackground, card and button colours each carry a separate mobile and desktop value.

The system

Thirteen colour tokens, each named by the job it does rather than by hue, and split by platform where the two needed different values. Century Gothic throughout, at ten defined sizes.

#F4F9FABackground · mobile

#F7FFEFNavigation bar

#E0F5F4Cards · mobile

#95C8DACards · desktop

#8CDBC9Nav buttons

#45C4AFButtons · mobile

#BDE8EBButtons · both

#565987Accent buttons

#662D5BAccent lines

#9039F2Illustrations

#100DB1Links

#012030Text and icons

Heading 1

Bold · 60

Heading 2

Bold · 50

Heading 3

Bold · 40

Text, desktop large

Regular · 40

Text, desktop small

Regular · 30

Text, mobile large

Regular · 25

Label, desktop

Bold · 25

Label, mobile

Regular · 15

Why so plainSparse, common words translate cleanly and read well aloud — the vocabulary was chosen with screen readers and other languages in mind.

Choosing the words

The system fixes a vocabulary as tightly as it fixes colour. Features take “My” to give the user a sense of ownership. Every label uses the fewest and plainest words available. And some obvious words are ruled out on purpose.

Calories and weigh-ins are the mechanics of the daily tracking this product exists to avoid, so the interface never names them. The same decision that shapes the product shapes its vocabulary.

~~Calories~~ Nutrition

~~Fitness~~ Activity

~~Stats~~ Data

~~Documents~~ Records

Field statesPlaceholder copy carries required and optional without labels or asterisks — the same economy applied to forms.

Adding a record

Photograph a document, title it, file it, and get told it worked. Five steps from empty form to confirmation.

Five screens of the new record flow: empty form with Required, Select and optional placeholders; file title entered; category selected; notes added; and a success confirmation reading Your record has been uploaded — 1. Empty · 2. Title · 3. Category · 4. Notes · 5. Confirmed.

Six participantsAges 18 to 75, moderated, remote and in person, 10–15 minutes each, across five tasks.

What testing changed

83%

couldn't get back to the home screen between tasks. I had designed a bottom navigation bar without a home button in it — a structural omission I'd looked straight past, and the clearest argument for testing before you're confident.

Issue	Severity	Evidence	Fix
No home icon in the bottom bar	Very severe	83% stranded between tasks	Home added as the first tab
Icons not recognisable	Severe	50% needed prompting to sync	Text label under every icon
No confirmation after a task	Moderate	33% would have repeated the task	Confirmation screens added
Missing back buttons	Moderate	One participant	Added where needed
Redundant tabs on desktop home	Low	One participant	Duplicated tabs removed

Close-up of the TotalHealth bottom navigation bar showing Home, Data, Calendar and Records, each with an icon and a text label — Three of the five fixes are visible in one component: a home tab that exists, a label under every icon, and an underline marking where you are.

Preference test25 participants split 52/48 on two intro screens. I read the comments rather than the margin and chose the version whose imagery showed what the product does.

The same system, wider

On desktop the four tabs move up into a persistent bar and the overflow menu carries Account and Settings — the structure the card sort pointed to. Cards take a deeper fill to hold their own against more surrounding space.

Two TotalHealth desktop screens: the home page with the navigation overlay open showing Account, Home, Data, Calendar, Records and Settings; and the create-an-account page with the form in a tinted panel beside a full-height illustration — The sign-up screen puts the form in a tinted panel against the illustration at full height. On mobile the same components collapse to a single centred card.

What I'd do next

Another round of testing. The first round surfaced problems large enough to mask smaller ones.
Validate the icon labels. Adding text may prove too crowded at mobile widths; defining the icons during onboarding is the fallback.
Design for HIPAA. Securing health data was named as the project's main risk at the outset and never got a screen.