Case study
WCAG 2.2 AA Redesign Project
ROAM is a calm navigation app built for everyone. It shows one step at a time, guides you with sound and touch, and only suggests routes that work for your body, so getting around a new place feels like exploring, not like a task.
Role
Lead Accessibility
& UI Designer
Timeline
6 Weeks (Winter 2025)
Core Tools
Figma, VoiceOver, Stark WCAG
Key Objective
Redefine digital wanderlust for travellers with visual impairments, motor constraints, and cognitive differences, boosting accessibility to all.
01 / The Challenge
Navigation apps give too much information. In an unfamiliar place, you keep checking the screen for the next turn, and each glance pulls you out of the moment. With a stroller, a wheelchair or another mobility aid, it's worse. Most apps assume every route works, but one staircase or broken lift can make it a dead end. ROAM asks: what if navigation let you stay present, on a route that works for you?
Cognitive Overwhelm
Hyper-complex filters, chaotic map screens, and hidden feedback indicators trigger anxiety and drop-offs before starting a path.
Visual Exclusion
Aesthetically muted, low-contrast text scales that are impossible to navigate for low-vision users or under direct sunlight.
Hidden Interactions
Interactive components built around hidden menus and unexplained gestures, leading to high drop-off rates for users with low digital literacy.
AFFINITY MAP
USER RESEARCH PERSONAS
02 / AFFINITY MAP
Main findings
Solutions for visually impaired or mobility-limited users also benefit runners and casual walkers.
Visual distractions disrupts flow; subtle haptic or audio cues build trust.
Clear, single-step functionality empowers users with independence.
Exploration should focus on peace, focus, and freedom, not data or screens.
People want to be PRESENT!
03/ Research Insights
Matthias, 28
Core Needs & Friction
• Relies fully on screen readers (VoiceOver) for search and checkout flows. • Constantly blocked by unlabelled map icon elements and erratic focus ordering. • Frustrated by dynamic calendar selectors that fail structural keyboard inputs.
"If the calendar is unlabelled, I can't book the flight. I'm forced to call customer support, losing hours."
Agatha, 64
Mature Explorer
Core Needs & Friction
• Experiences hand tremors. Requires larger tactile touch zones. • Blocked by small, closely spaced icon tags on filter modules. • Needs explicit, persistent error guidance during checkout inputs.
"When buttons are too tiny, I accidentally tap the wrong option repeatedly. It's draining."
04 / Inclusive System Architecture
Steel Blue
#4682A9 — Primary Brand Colour
WCAG AA PASS
Pastel Scarlet
#FF6B6B — Interface Accent
WCAG AAA PASS
Cream Base
#FAF5ED — Canvas Color
BACKGROUND CONTRAST
Golden Sand
#E8C85D — Interface Accent
WCAG AA PASS
Pastel Scarlet
#FF6B6B — Interface Accent
WCAG AAA PASS
Dark Grey Base
#3A3A3A — Canvas Color
BACKGROUND CONTRAST
05 / Refactoring Interface Friction
Color Contrast Audit
The first prototype didn’t have enough contrast: the grey text on grey backgrounds was hard to read. I audited every colour pair against WCAG and built two modes. Lite Mode uses steel blue and pastel scarlet on a warm cream base. Accessible Mode switches to golden sand and scarlet on dark grey for anyone who needs stronger contrast.
Before — Fail (1.8:1)
Filter: Wheelchair
Accessible
After — WCAG AAA PASS (8.2:1)
Filter: Wheelchair
Accessible
Tactile Touch Targets
Redefined all primary flight selection buttons. Swapped standard layouts for high tactile zones (minimum 48px footprint) for tremor and low dexterity navigation.
Before — 28px height
Book
After — 48px Touch Target
Book Flight
Task flow / wireframes
UI Design
user journey
key takeaways
06 / The Solution
A calm navigation app built around a simple, one-step-at-a-time layout, complete with explicit focus labels and Voiceover visual cues, and haptic cues.
07 / Task Flow
Find a Path
Mapping the critical user journey from app launch to route selection — designed to reduce cognitive load and surface accessible paths with the fewest possible steps.
Flow Breakdown
01
Start — Home Screen
User opens Roam. Accessibility mode is detected or toggled on. The Home screen presents a single primary action: "Find a Path."
02
Search Input
User types a destination or selects a nearby area. Two parallel paths: type the bar name of an area or select desired distance path.
03
Select Path
AI suggests the path and enters map. User selects desired path from results on the Path Page — rendered with accessibility overlays.
04
Navigate & Save
Start Path triggers haptic + audio cues. User navigates with minimal screen glances. On completion: Return Path, Create Path Loop, or Save Path.
Key Decision Points
Two entry paths: distance-based selection vs. area name search — both lead to the same accessible path results page.
A feedback loop exists: if no paths match, the user can re-enter search or widen the radius without losing context.
Stop Path triggers a recovery loop — user can Return to Home, Create a new path loop, or Save the completed path for future use.
Accessibility mode status persists across all steps, ensuring VoiceOver labels and haptic cues remain active throughout the flow.
08 / Measurable Metrics
94%
Compliance Score
Achieved WCAG 2.2 AA rating across all primary ticket booking user flows.
3×
Speed Improvement
Increased user task completion times for users using VoiceOver and keyboard inputs.
-82%
Mis-click Errors
Drastically reduced errors during checkout fields by widening target parameters.
09 / Key Takeaways
Key Takeaways
01 — Minimal is harder than it looks
The UI is quiet on purpose. The real challenge was finding where clean ends and bare begins, and staying on the right side of that line.
02 — Inclusive and appealing can coexist
ROAM set out to show that designing for everyone doesn't mean designing something bland. Accessibility shaped the product, not limited it.
03 — Freedom over directions
Calm audio and haptic cues guide the way, so users can put the phone away and explore, or simply enjoy the walk, hands-free.
04 — The words are the interface
With so little on screen, every word had to earn its place. The UX copy went through round after round of rewrites until each line told users exactly what they needed, the moment they needed it.
10 / Final thoughts
Many people have to think extra factors we mostly wouldn’t even consider before even getting out of their house. Someone using a wheelchair or pushing a stroller has to wonder whether the path will work, and someone in an unfamiliar city has their eyes on the screen and their hands on the phone. ROAM wants to give you your freedom back.
It guides you with sound and touch, so your hands are free and your eyes stay on the street. It only suggests routes you can take, so you don’t have to think about anything before taking a walk with friends. You get to look up, wander and simply be there.
This project taught me that something I used to take for granted isn’t a given for everyone. Our products should always be designed with the users facing the greatest challenges in mind. If it works for them, it will work for everyone.
Want to build accessible products?