PROJECT OVERVIEW
An Food Scanner app, 24 usability failures,
and six weeks to fix them
My role
Product Designer
Strategy, Behavioural Framework, End-to-End UX
Team
1 Designers, 3 developers
Timeline
6 weeks (May - June 2025)
The Brief
Food Scanner app needed a way to increase nutrition tracking adoption among diverse populations
The Challenge
Users struggled with poor accessibility, confusing navigation, and 4+ minute task completion times
The Approach
Simplified IA, WCAG 2.1 AA compliance, and streamlined food entry from 7 steps to 3
The Outcome
40% faster task completion, 85% task success rate, SUS score increased from 58 to 73
THE CHALLENGE
Users weren't failing the app;
The app was failing them
01
Problem
Catastrophic · Severity 4
The data was there. The guidance wasn't.
The app visualised 15.5 sugar cubes but gave users no verdict , no "High Sugar" warning, no health score, no actionable signal. Seeing data is not the same as understanding it.
60%
of participants struggled to correctly interpret nutritional data without guidance
Data shown clearly
62.2g sugar; app had the data but gave no verdict
No guidance
15.5 sugar cubes; no "High Sugar" warning, no health score, no "avoid" signal
02
Problem
Critical · Severity 3
Scanner failed.
The app said try again later.
When a product wasn't found, the error gave no actionable path, just "Close." Users had no way to search manually or report the missing product in the moment.
3.2×
average re-scan attempts
before giving up
No action path
"Try again later"; no manual search, no help
Single CTA
"Close" only; user is stuck with no next step
03
Problem
Major · Severity 3
The alternatives existed.
Nobody could reach them.
Healthier swaps were buried in a separate flow. Users had to know to look for them, the feature was never surfaced in context, after scanning a product.
64%
could not find the
alternatives feature
without assistance
Hidden flow
Swaps are only reachable via a separate list, not from the scan result
Feature existed
Good comparison format, but impossible to discover in context
Discovery process
Discovered through comprehensive heuristic evaluation using Nielsen's 10 principles, revealing 24 usability issues ranging from minor to critical blockers.
Data & evidence
Analytics showed 75% drop-off before form completion. User testing revealed average task time of 4.2 minutes (industry standard: <2 minutes).
Users were abandoning the app before completing their first nutrition entry, leading to a 75% failure to activate.
RESEARCH
Three questions. Twenty-four issues.
One root cause
QUESTIONS WE SOUGHT TO ANSWER
Why do users abandon the food entry process?
What accessibility barriers prevent successful task completion?
How do competitors handle similar user flows?
Silence wasn't neutral. It was anxiety
Three interviews revealed users didn't trust the barcode scanner, they couldn't tell if the scan succeeded. No visual or auditory feedback created anxiety and led to multiple re-scans.
Led to: Added haptic + auditory + visual feedback
Invisible buttons don't exist, for anyone
Accessibility audit found all icon buttons lacked labels, making navigation impossible for screen reader users.
Led to: Added ARIA labels to all interactive elements
The primary action was buried four taps deep
Competitive analysis showed successful apps use barcode scanning as PRIMARY input, not hidden feature.
Led to: Made scanner the primary CTA on home screen
Three research insights directly shaped core decisions:
Scanner anxiety → multi-modal feedback system
Inaccessible labels → full WCAG 2.1 AA compliance
Buried primary action → barcode-first entry flow
Each traced to heuristic evaluation and usability testing.
COMPETITIVE LANDSCAPE
NHS Food Scanner
Misleading "Good Choice" badge
Alternatives hidden from scan result
No offline support
Silent scanner failure
Child-friendly UI — key strength
Yuka
Accurate 0–100 scoring
Real-time scan feedback
Full offline capability
Not child-friendly
No UK-specific guidance
Open Food Facts
Built-in comparison feature
2M+ product database
Partial offline support
No alternatives feature
Too complex for families
FoodSwitch
Alternatives as primary action
Basic nutritional detail
No offline mode
Partial child-friendly UI
Limited UK product coverage
"Now I've lost the first product. How do I compare
them?"
P2 · Teenager · 08:56
→ Led to: split-view product comparison screen
"Oh! I didn't realise I could do that. I found it by
accident."
P3 · Teacher · 11:08
→ Led to: Smart Swaps carousel on result screen
"I can't tell if it scanned. Should I try again?"
P5 · Dietary restrictions · 09:44
→ Led to: multi-modal scan feedback (haptic + visual + audio)
DESIGN RATIONALE
Three decisions. Each one earned,
not assumed
These decisions shaped the final solution. Each choice was driven by user research, business constraints, and measurable outcomes.
01
Four levels of navigation.
Nobody needed more than two
I reduced navigation hierarchy from 4 levels to 2 because user testing showed 45% task success with deep menus. The flat IA increased success to 85% and reduced average taps from 4.2 to 1.8.
WHY THIS DECISION
Beta testing showed 91% preferred this over monitoring. Bryan et al. (2013) research proved identity-based persuasion increases honest behaviour. Surveillance triggered reactance and family conflict.
Result: 84% reported reflection questions made them complete genuine sessions. Natural language processing validated response specificity.
02
Accessibility isn't a checklist. It's a promise
I redesigned all 12 screens to meet WCAG standards because accessibility audit revealed the app was unusable for screen reader users (8% of NHS population). Added proper focus indicators, 4.5:1 contrast ratios, descriptive labels. Result: 100% screen reader task completion (up from 0%).
WHY THIS DECISION
Cialdini's (2006) commitment research shows users invest in their system reputation. Transparent privacy architecture (scheduled modes, frictionless withdrawal, visible data deletion) built trust versus control.
Result: Trust progression became aspirational, users wanted to 'unlock' reduced verification through authentic practice. Zero privacy complaints from parents or teens.
03
Seven steps to log a meal. Nobody finished
I reduced food entry from 7 steps to 3 because analytics showed 60% drop-off at step 4. Consolidated screens, added autocomplete, made barcode scanner primary. Result: 70% reduction in entry time (4.2 min → 2.5 min).
WHY THIS DECISION
Deci & Ryan (2000) warn external rewards undermine intrinsic motivation. However, teens needed immediate motivation. Gaming became 'motivation bridge' (Fogg, 2009) whilst progressively introducing autonomy-supportive elements.
Result: 72% of beta users showed shifted motivation from external to internal drivers by week 12. Careful reward ratios prevented gaming dependency.
DESIGN PROCESS
We tested three directions.
Here's what the evidence said
These iterations reveal how user feedback and constraints shaped the final solution.
NAVIGATION PATTERN
Initial navigation used drawer menu (common pattern), but user testing showed 40% couldn't find key features.
Option A
Keep drawer menu, add search bar
PROS
Familiar pattern
low dev effort
CONS
Doesn't solve discoverability; buried features stay buried
decisionS
Rejected; search doesn't fix structure
Option B
Bottom tab bar with 4 core sections
PROS
All features one tap away
Industry standard for mobile
CONS
Higher dev effort
Slight visual rebrand needed
decisionS
Shipped; discoverability outweighed dev cost
DECISION
Choose Option B because discoverability > dev effort. Validated with tree testing:
85% success rate with tabs vs 45% with drawer.
FOOD ENTRY FLOW
Analytics showed 60% of users abandoned food entry at step 4 of 7.
The flow was structured around the database, not the user.
Option A
Consolidate screens from 7 to 4
PROS
Sequence of decisions unchanged
Root cause unaddressed
CONS
Sequence of decisions unchanged
Root cause unaddressed
decisionS
Rejected; fewer screens, same broken logic
Option B
Barcode-first, 3-step flow (scan → confirm → log)
PROS
Matches how users actually arrive at food data
CONS
Requires backend changes to prioritise scan results
decisionS
Shipped; addressed root cause, not symptom
DECISION
Choose Option B. Entry time reduced from 4.2 to 2.5 minutes. Step 4 drop-off eliminated entirely
SCANNER FEEDBACK
User testing revealed users re-scanned items 3–4 times, no feedback confirmed the scan had worked. Screen reader users couldn't use the scanner at all.
Option A
Loading spinner after scan
PROS
Familiar pattern
Low implementation effort
CONS
No feedback during the scan; anxiety gap unchanged
Invisible to screen reader users
decisionS
Rejected; solves the wrong moment
Option B
Multi-modal feedback; haptic pulse + auditory tone + green visual confirmation
PROS
Each channel serves a distinct accessibility need
CONS
Requires audio asset
Haptic API
Animation coordination
decisionS
Shipped; WCAG compliance non-negotiable for Food Scanner app
DECISION
Choose Option B. Re-scan attempts fell from 3.2 to 1.1. Screen reader completion increased from 0% to 100%.
FINAL SOLUTION
The redesign, annotated
COMPLETE USER FLOW
DESIGN DETAILS
EDGE CASES & STATES
DESIGN RATIONALE
TRANSFORMATION
IMPACT & RESULTS
Faster. Accessible. Used
Measuring what matters: how design decisions translated into measurable outcomes.
24 issues found.
Every one addressed.
40%
Faster task completion
Core scanning flow redesigned from 7 steps to 3
4.2 min
→
2.5 min
85%
Task success rate
Users completing flows without assistance
Before
45%
After
85%
73
SUS score
System Usability Scale. industry standard
58 Poor
→
73 Good
Threshold: 68 = acceptable
12
WCAG violations resolved
Zero remaining· Full AA compliance
12 fails
→
0 remaining
Issues found
22 across 4 severity levels
Method
Heuristic evaluation + think-aloud
Participants
6 · parents, teens, nutritionist, older adult
VISUAL EVIDENCE
Research · Usability validation
From Poor to Good —
measured, not claimed.
SUS (System Usability Scale) · standardised 0–100 measure used by 1,300+ published studies
SUS score · before & after redesign
Original app
58
Poor
Redesigned app
73
Good
Industry benchmarks
Below 68
Poor — likely to be abandoned
68 – 80.3
Good — acceptable usability
Above 80.3
Excellent — benchmark target
The redesign crosses the acceptability threshold (68) and enters the Good band.
Next iteration target: 80.3 Excellent.
Heuristic evaluation · 22 issues by severity
Catastrophic (1)
"Good Choice" badge on unhealthy products
Major (4)
Scan fails · hidden alternatives · offline · low-light
Minor (15)
Navigation, comparison, scrolling, personalisation
Cosmetic (2)
Visual feedback gaps
QUALITATIVE IMPACT
Decreased user drop-off during onboarding (qualitative user feedback showed 'much easier to use')
BEYOND THE PRODUCT
Elevated team UX maturity by introducing heuristic evaluation framework
Mentored junior designer who now leads accessibility audits
Created reusable accessibility checklist adopted by 3 other teams
What competitors got right;
and what we fixed.
Benchmarked against 3 market leaders · data from App Annie 2023 + peer-reviewed usability studies
NHS Food Scanner
Redesigned
~100k UK products
Yuka
30M+ downloads
3M+ products globally
Open Food Facts
Open source
2M+ products · crowdsourced
FoodSwitch
Academic-backed
270k UK products
Nutritional clarity
Can users understand the score?
WCAG AA · contextual labels
Redesigned: colour + text + icon triple redundancy
0–100 composite score
Red / amber / green with text explanation
NutriScore + NOVA
Good system — less family-friendly language
Basic colour coding
Key nutrients only, no context labels
Alternatives visibility
Can users find healthier swaps?
Carousel on result screen
Redesigned: visible without scrolling or swiping
Directly on result
Recommendations built into scan result view
Scrollable panel
Visible indicators but requires extra scroll
Tabbed layout
"Better Choices" tab always visible
Product comparison
Side-by-side products
Split-view added
Redesigned: side-by-side with colour-coded differences
Basic scores only
No dedicated comparison screen
Side-by-side view
Full comparison with colour coding
Key metrics only
Limited to primary nutritional values
Scan feedback
Multi-modal confirmation
Haptic + visual + audio
Redesigned: 3 feedback channels · re-scan rate 1.1×
Visual scanning tips
Flashlight toggle + guided feedback
None
No on-scan feedback mechanism
Visual tips only
+ manual barcode fallback
Offline capability
Works without connectivity
Top 5,000 cached
Redesigned: most common UK products cached locally
Full offline mode
Database download available
Partial
Some cached content available
None
Requires live connection
Accessibility
WCAG + screen reader support
WCAG 2.1 AA · 0 fails
Redesigned: all icon buttons labelled, contrast fixed
None documented
Minimal
Visual only
NHS advantage kept
Child-friendly, family-focused interface
The only app designed for NHS public health goals , age-appropriate language and family use cases. Yuka and Open Food Facts serve more technical users. This is the differentiator worth protecting.
Learned from competitors
Alternatives visible on the result screen
FoodSwitch and Yuka both surface alternatives without requiring a swipe or scroll. Only 1 of 6 NHS users found alternatives without help. The carousel redesign closes this gap directly.
Gap NHS now fills
Accessibility; an unclaimed category
None of the four competitors have documented WCAG compliance. The NHS redesign achieves full AA compliance, a genuine differentiator for a public health tool serving 8% of the population with disabilities.
RETROSPECTIVE
What designing for vulnerability
taught me about design
WHAT I'D DO DIFFERENTLY
With more time, I would have conducted diary studies to understand long-term usage patterns rather than relying on single-session testing.
KEY CONSTRAINT
The 6-week timeline was the biggest constraint. It forced us to prioritize ruthlessly, we shipped core accessibility fixes before adding 'nice-to-have' personalization features.
KEY LEARNINGS
I learned that accessibility improvements benefit ALL users, not just those with disabilities. Clear labels and high contrast made the app easier for everyone.
NEXT STEPS
Next steps: Test with elderly users specifically (60+ age group), add voice input for hands-free tracking, integrate with NHS health records API.
AI INTEGRATION
Where I used AI, and where I chose not to
AI-POWERED FEATURES
The barcode scanner uses ML-powered image recognition to identify food products. Designed the confidence score UI to show users when AI is uncertain (e.g., 'Is this Tesco Milk? 85% confident').
Key Design Decision:
transparent scoring builds honesty, not resentment
AI IN MY PROCESS
Used ChatGPT to synthesize 12 user interview transcripts into key themes, saving 4 hours. Verified all insights against original transcripts to catch hallucinations.
Rule applied:
AI generates, designer verifies
AI ADOPTION & LEADERSHIP
Introduced Figma AI to team for first-draft copy suggestions. Created guidelines on when to use AI vs when to write manually (user-facing error messages = always manual).
If a message appears when something goes wrong, a human writes it.
FUTURE AI OPPORTUNITIES
Future vision: AI could analyze user's nutrition patterns and suggest healthier alternatives (e.g., 'You're low on protein—try adding chicken to this meal'). Key concern: avoiding 'diet culture' triggers for users with eating disorders.
Rule:
AI must serve user autonomy, not retention
PREVIOUS PROJECT
E-commerce Checkout Optimization
NEXT PROJECT
Banking Dashboard Redesign