A live NHS public health app, and one question: why couldn't parents act on what they scanned?
The existing market wasn't failing to show nutritional data. It was failing to make it mean anything.
The NHS Food Scanner existed inside a market with three compounding failures — all rooted in treating nutritional data as the end point, not the starting point, of a health decision.
App store reviews for family nutrition apps consistently cite "confusing results" and "no clear next step" among the most common reasons for uninstalling.
{01} — Problem
The app had the data. It never gave users a verdict.
{02} — Problem
Every scan led to a dead end. The feature that could change behaviour was invisible.
The app's most powerful feature — Smart Swaps, which suggested healthier alternatives to a scanned product — was hidden behind a secondary scroll. The scanner itself sat behind the drawer menu, three taps from the home screen. Information architecture across four navigation levels created cognitive overhead at the exact moment users had a product in hand and seconds to decide.
{03} — Problem
The scanner worked every time. For screen reader users, it had never worked once.
The strategic breakthrough
Three assumptions research demolished before we redesigned anything
1
2
3
The badge said "Good Choice." The nutrition said otherwise.
Led to:
A contextual nutritional verdict replacing the badge — score, category, and a clear next action
Silence felt exactly like failure
Led to:
A multi-modal feedback system — haptic pulse, auditory tone, and visual state change, each serving a distinct accessibility need
The most important feature required the most effort to find
Led to:
Bottom-tab navigation with four persistent sections — every key feature one tap from any screen
Users read the number. They had no idea what to do next.
Led to:
A barcode-first, three-step entry flow with a clear post-scan action — scan → verdict → swap or log
{01} — Decision
Four levels of navigation. Nobody needed more than two.
64% of Think Aloud participants could not find the app's most important feature without help — not because they didn't look, but because four levels of navigation made it structurally impossible to find without a guide. The hierarchy was built around the database. The user had no map. The drawer menu, secondary tabs, modal overlays and deep scroll depth forced users to hold a mental model of the interface at every point. Navigation was restructured around a bottom tab bar with four persistent sections — Scan, History, Swaps, Profile. The scanner becomes the first tab. The hierarchy flattens from four levels to two: tab, then content.
85%
feature discovery success rate after restructuring — up from 36% in Think Aloud baseline testing.
{02} — Decision
Accessibility isn't a checklist. It's a promise.
WCAG 2.1 AA compliance for a public-health NHS tool wasn't a design consideration — it restructured the entire interaction model. I built a multi-modal feedback system where every scanner interaction triggers three simultaneous signals: a haptic pulse confirming barcode capture, an auditory tone toggleable for public use, and a visual state change — the scanner frame shifting from white to green with a brief confirmation overlay. Each channel is redundant by design, serving a distinct accessibility need. When accessibility constrains the design from the start rather than being retrofitted, it produces clarity: the requirement to make every state legible to a screen reader forced every state to be explicit — which made the app clearer for sighted users too.
{03} — Decision
Seven steps to log a meal. Nobody finished.
60% of food entry sessions ended at step 4 of 7 — not because users gave up, but because the sequence asked them to confirm nutritional data before they had finished telling the app what they'd eaten. The flow was structured around the database. The user was never part of the logic. I restructured the entire entry path around how users actually arrive at food data: they have a product in hand. Three steps replace seven — scan → confirm → log. The barcode handles the nutritional lookup; manual entry becomes the fallback. The user's only decision is quantity.
What this proves
The same task, two architectures. The original asked seven database-shaped questions and lost 60% of users at step four. The redesign asks three: scan the barcode, confirm the portion, log it. The data model still runs underneath — it just stopped being the user's problem.
Three moments where the obvious answer was wrong
{01} — Discovered in Think Aloud testing
The answer to a discoverability problem isn't search. It's structure.
Navigation & discoverability
Think Aloud testing showed only 40% of participants could find the app's core features without guidance. The cause wasn't confusing labels — it was a drawer-menu architecture that kept every feature one deliberate decision away from the user, at every point in the journey.
/
Option A — keep the drawer, add a search bar
Adding search to a drawer is the standard response — minimal restructuring, low effort. But search doesn't fix structure. A user who doesn't know the Smart Swaps feature exists will never search for it. Rejected — the symptom treated, the cause untouched.
/
Option B — bottom tab bar, four persistent sections
Scan, History, Swaps, Profile — every core function one tap from any screen. Higher development effort and a minor visual rebrand. The return: the entire discoverability failure resolved at the structural level, not patched at the surface. Shipped.
{02} — Discovered in analytics + Think Aloud
60% abandoned halfway. Removing three screens didn't help. Rewriting the sequence did.
Food entry flow
/
Option A — consolidate seven screens into four
Merge the confirmation steps, combine fields, reduce the screen count without altering the flow's logic. But users weren't abandoning because there were too many screens — they abandoned because the order of decisions made no sense at step 4. Rejected — root cause unaddressed.
/
Option B — rebuild as a barcode-first, three-step flow
Rebuild the path around how users actually arrive at food data — with a product in hand. Scan → confirm → log. The barcode scanner becomes the primary input; manual entry the fallback. Three decisions replace seven. Backend changes required to prioritise scan results. Shipped.
{03} — Discovered in Think Aloud testing
Scanner feedback
/
Option A — a loading spinner after the scan
A circular spinner while the scanner processes, then a brief success message. But this gives feedback after the scan, not during it. The uncertainty happens between pointing the camera and confirming the barcode was detected — and a visual spinner is invisible to a screen reader. Rejected — right intervention, wrong moment.
/
Option B — haptic + auditory + visual confirmation at detection
Three simultaneous signals the moment the barcode is detected: a haptic pulse, a single soft tone (toggleable for public spaces), and the scanner frame shifting from white to green with a confirmation overlay. Redundant by design, each serving a distinct accessibility need — and meeting WCAG 2.1 SC 1.3.3. Shipped.
The product, annotated
{01} — Scan & verdict
Scan to verdict in two taps — the scan-to-action gap closed.
Nutritional verdict replaces the badge — category + score + next action
Score, category and a clear 'avoid / swap' signal on one screen
Post-scan action path — the moment the scan-to-action gap closes
Ultra-processed warning shown alongside the score
{02} — Smart Swaps
Healthier alternatives at the moment of decision — not three scrolls away.
Smart Swaps above the fold, immediately after scanning
Each alternative shows the specific nutritional improvement
Side-by-side comparison of the two products
Add a swap to the shopping list in one tap
{03} — Barcode-first entry
Barcode-first, three steps — from 4.2 minutes to 2.5.
Barcode scanner as the primary input, not a buried feature
Three steps, not seven — one decision per screen
{04} — Accessibility & edge cases
Designed for the users the original app couldn't reach.
Every interactive control has a screen-reader label
Actionable error state — not a generic "Product not found"
Faster. Accessible. Used.
Feature discovery success rate
Discoverability
Screen reader task completion
Up from 0% on the original scanner. Every user can now complete a scan through three simultaneous feedback channels.
Accessible
Reduction in food entry time
Faster
3.2 → 1.1
Re-scan attempts per item
The scanner always worked. After the redesign — haptic pulse, auditory tone, visual state change — users finally knew it had. Screen-reader completion on the same interaction went from 0% to 100%.
