One task per page
Appointment, treatments, notes and X-ray each get their own focused page instead of competing on one screen.
01 · The challenge
Healthcare moved online. Its design did not move with its patients.
When a health website is hard to read, the cost is not frustration. It is a missed appointment or aftercare that is misunderstood.
Type that is too smallSmall fonts and low contrast are the barriers older users report most.
Too many stepsEvery extra step and every hidden message costs more working memory.
No person nearbyThe journey had to be possible alone, and still reach the clinic fast.
Balakrishnan et al. on type, contrast and dexterity. Dixon et al. on working memory and extra steps.
≤2steps from the home screen to any task
4quick-access tiles, each a clearly bounded action
7connected screens, each focused on one task
40px+minimum height for primary buttons and X-ray controls
02 · Research
Designing for Mr Adam
I just want a website that’s clear and easy to use. I get lost when there are too many buttons.
- Age 76
- Retired engineer
- London
- Mild arthritis
He manages his own appointments. Small buttons, low contrast and crowded screens are what lose him.
- Large text and strong contrast, on every page.
- Only what the current task needs, nothing more.
- A clear path back home from anywhere.
- Confirmation before anything that cannot be undone.
- A fast route to a human when it matters.
What gets in the way
- Small buttons are hard to hit
- Declining eyesight and hearing
- Too many controls on one screen
What the interface must do
- Large text and strong contrast
- One task per page
- A clear path home
- Confirm before anything lasting
- A fast route to a person
03 · Design decisions
Built on evidence about ageing, not assumptions
Filter by principle to see which parts of the portal it shaped.
Breadcrumbs everywhere
The full path is always visible, so users never need to remember how they got somewhere.
Buttons for shaky hands
Primary actions are at least 40px tall with generous padding and space around them to prevent accidental presses.
Cancelling asks first
Cancelling an appointment needs explicit confirmation that describes exactly what will happen.
Every note is attributed
Clinical notes show the dentist’s name, the date and the treatment, because older users question information without credibility cues.
Tiles with clear edges
Four bounded quick-access tiles, and each one now opens its own page. Aftercare and Tips used to look clickable and go nowhere.
Read Aloud
Key pages can be read out through the browser’s speech engine, at a slightly slower rate.
A− and A+ in the header
Text size changes on every page, not in a settings menu. The choice is remembered between visits. The buttons are 44px so they are easy to hit.
Line icons, always labelled
Lucide line icons replaced emoji. Every icon sits next to a text label, so nothing depends on interpreting a symbol.
Navy and white
Blue signals trust and clinical care. Navy on white gives strong contrast; red is kept for cancel and emergency.
Simple first, depth available
The top-level flow stays linear, while confident users can zoom X-rays and filter treatments by month.
Back and Home, same place
Back and Home Page sit in identical positions on every deep page, so their location is learnt once.
Help, one press away
A Dental Emergency call button sits on the home screen, and notes pages offer Message Dentist and Call Clinic.
04 · The product
Every tile now leads somewhere
Home
What is next, first
The upcoming appointment and a calendar lead the page, so the most time-critical information needs no scrolling. A− and A+ in the header change the text size on every page and remember the choice.
- All four tiles open a page
- Read Aloud in two places
- Emergency call on the first screen
Appointment
Everything about the visit
Reason, dentist, location, duration and a confirmation reference, plus reminders about how to prepare.
- Reschedule and cancel both confirm first
- Breadcrumb back to home
Booking
Step by step
Booking breaks into clear steps with large choices, and ends with a confirmation reference.
- One decision at a time
- Clear labels, no jargon
Treatments
History, filtered simply
A chronological list of past visits, narrowed by year and month without leaving the page.
- Filtering happens instantly
- Each visit links to its notes
Notes
Understand what was done
Treatment, date and dentist up front, then summary, aftercare and follow-up advice in clearly separated blocks.
- Attributed to a named dentist
- Message Dentist and Call Clinic
X-ray
Your X-ray, in your hands
Zoom, invert and download an X-ray to share with another clinician. The toolbar uses 40px targets.
- Invert helps some users read detail
- Download in one press
Aftercare
One step from home
The Aftercare tile now opens the latest visit’s instructions, instead of sitting there looking clickable and doing nothing.
- Uses the same aftercare as the notes page
- Call Clinic and Read Aloud on the page
Tips
Short advice, large type
Five practical facts, one idea each, with Read Aloud. This tile also used to lead nowhere.
- Still one step from home
- Plain language, no jargon
Sign in
A human is always listed
A simple two-field sign-in with a clear error message and the clinic’s phone number right below it.
- Plain-language errors
- Help without leaving the page
05 · Try it
Hear it. Zoom it. Check it.
Three product behaviours you can use right here. The Read Aloud text and speed match the real home page.
Read AloudWeb Speech API · rate 0.9
Upcoming appointment
Good morning Mr Adam. You have an upcoming appointment on Thursday 18 April at 10:00 with Dr. Smith in Clinic Room 2.
Words highlight as they are spoken in browsers that report word positions.
X-ray viewerZoom and invert
Contrast checkWCAG 2.1 formula, live
Headings · Good morning
Header · DentaCare
Button · Book Appointment
06 · Iteration
Why the emoji had to go
The first version used emoji on the home tiles and buttons. On reflection, three problems made them wrong for this audience:
They render differently everywhere. The same character can look different on an older device or browser than on the designer’s laptop.
They assume familiarity. Emoji conventions come from social media; older adults have less experience inferring meaning from them.
They carry the wrong tone. Informal, emotional symbols undermine the trustworthy, clinical feel that older users need from health information.
Lucide line icons replaced them everywhere: monochrome, identical on every platform, and always paired with a label.
Illustration · emoji vs line icons
Emoji: varies by device, informal
Line icons: consistent, calm, labelled
The wider design path, from structure to code:
- Home
- My Treatments
- Dentist notes
- X-ray
07 · Design system
Clinical, warm and readable
Navy#0E4A73 · header
Clinic blue#1A6FA8 · primary actions
Mist#E4F2FB · highlight cards
Alert red#EF4444 cancel · #DC2626 emergency
WhitePage background
Serif + sansPlayfair Display headings (24–32px) with DM Sans body text
24–28pxInner padding on containers, 20px+ between elements
40pxMinimum height for primary buttons and X-ray tools
Label + iconEvery icon is paired with a word, on every control
Layout, focused pages, reusable Breadcrumb, PageTop and NoteBlock components, and a useReadAloud hook.
08 · Evaluation
An expert review, with the gap stated plainly
Not yet tested with older adults. DentaCare was completed in Term 2 and there was not enough time left to recruit, run and analyse sessions. The evaluation below is a structured heuristic review, which finds likely issues but does not replace observing real users.
| Heuristic | Evidence in the product | Result |
|---|---|---|
| H1 Visibility of status | Breadcrumb trail on every page; confirmation reference after booking | Pass |
| H2 Match the real world | Clinical language; calendar, document and phone icons map to their real referents | Pass |
| H3 User control | Back and Home Page on every deep page; confirmation before cancelling | Pass |
| H4 Consistency | Identical Back and Home placement; one primary action colour throughout | Pass |
| H5 Error prevention | Cancellation requires explicit confirmation | Pass |
| H6 Recognition over recall | Every icon labelled; breadcrumb shows the full path | Pass |
| H7 Flexibility | Read Aloud as an alternative to reading; A− and A+ on every page; month filter for confident users | Pass |
| H8 Minimalist design | Home shows only the next appointment and four tiles | Pass |
| H9 Recover from errors | Confirmation dialogs describe the action; empty states explain themselves | Pass |
| H10 Help | Read Aloud; preparation reminders on the appointment page | Pass |
09 · Reflection
What I would do next
Test with five older adults
Nielsen’s five-user benchmark is the clear next step, run with think-aloud tasks based on the three journeys.
Emergency on every page
Extend the home screen’s emergency call into a persistent banner, as designed, so help is never more than one press away.
Measure effort
Add a simple workload measure such as NASA-TLX to check that fewer steps actually feel easier.
