First notice
of loss.
MobilityFlow is a calming, ten-step chat that turns the worst hour of a driver's year into ten manageable taps.
The brief, underneath the brief.
Four panels. The first two are public. The third is what we promised the engineers. The fourth is what we actually shipped.
Problem
Motability customers reporting vehicle damage face extended call wait times with no digital self-service alternative available.
Solution
A ten-step chat interface captures all claim details, verifies identity against policy records, assesses liability client-side, and routes to a live agent or books a callback.
Principle
Accessibility-first. Every interactive element meets WCAG 2.2 — minimum 56px touch targets, visible focus rings, aria-live regions, and full screen reader support throughout.
Scope
Single-file React application. Frontend-only — verification and liability assessment handled client-side against mock data with no backend dependency.
Discover. Define. Develop. Deliver.
Four phases. The widening then narrowing happens twice: once on the problem, once on the solution. The chat-as-form decision is the pinch in the middle.
Discover
Roadside-call audio, complaint logs, two field shadowings.
Define
Brief reframed: not 'a digital form', but 'a calm conversation'.
Develop
Step-by-step prototype, voice route added in week 3.
Deliver
Ten steps, one file, no backend. Ships as a sandboxed embed.
Ten taps, not forty-seven.
Each card flips. The front shows the screen. The back tells you what we removed and why. The mocks are the actual screens to Inter, slate-50, blue-700, no embellishment.
Welcome
Two-route entry
Welcome
The first frame sets the tone. No login wall. No legal preamble. Two equally weighted choices written as you'd say them.
Locate
Policy number or VRM
Locate
Normalised on input to a stray hyphen, lowercase, leading space all resolve. The only validator that fires is one that catches obvious typos.
Security
Postcode 2FA
Security
A second factor people already know. Postcode replaces a password. We loosen the match to case-insensitive, whitespace-tolerant.
Incident
Date & time pickers
Incident
Two native pickers, generously sized. Time is optional to if a customer can't remember, we don't block them.
Contact
Mobile number
Contact
Tel input with a numeric keyboard. Stripped to digits before validation. The hint is a real example, not a regex.
Driver
Who was driving
Driver
Three chips, full width on mobile. Selection auto-advances to confirming a tap with another tap is friction we don't need.
Description
Type or speak
Description
Voice input is the alternate route, not the secondary one. A driver with one hand on a steering wheel can dictate. The transcript still flows into the same field.
Circumstances
Incident type
Circumstances
Plain language for the four categories that drive 90% of motor claims. Each maps to a different liability path under the hood.
Liability
Client-side assessment
Liability
Likely Non-Fault or Assessment Pending. The result appears in seconds, not days, because the rules are static and run client-side.
Wrap
Claim summary
Wrap
A reference number, date, vehicle, status. The summary is the receipt to printable, screenshot-able, calmer than a confirmation page.
We asked for a form. We should have asked for a conversation .
Every system is a dial.
Move the controls and watch the chat respond. Contrast ratio, touch-target, progress, and tone to the four levers we tuned hardest.
Tune the conversation.
Move a slider to the chat responds. The shipped values: 7.3:1, 56px, calm.
WCAG 2.2 was the brief.
Five panels, five technical-drawing references. Each diagram measures the surface against a stated target.
Touch target
Contrast ratio
Focus ring
Reduced motion
Error feedback
Live region
<div role="status" aria-live="polite"> Assistant is typing </div>
Designed for the worst hour of the year.
Five vectors of disability to temporary, situational, permanent. The mocks were built against the loudest cell in each row, not the average.
Motor
Vision
Hearing
Speech
Cognitive
A stack chosen for demonstrability.
A frontend-only stack chosen for demonstrability. The whole app loads in a sandboxed iframe with no build step.
Why React without a build step?
Loading React from a CDN with Babel standalone keeps the case-study reproducible. Anyone can fork the file and have it running in under a minute.
Why Tailwind utility classes for a calm interface?
The slate-50 / blue-700 vocabulary covers 95% of the surface area. Custom CSS is reserved for the typing indicator and the reduced-motion branches.
Why no router?
The flow is a ten-step state machine. A history array supports the back button. URL state would have added complexity without giving the user a meaningful shareable surface.
Three decisions that shaped the feel.
Three architectural choices that define the character of this project.
Accessibility First
Every element was designed against WCAG 2.2 before any visual styling. The 56px touch target, amber focus rings, and role='alert' on errors are not retrofits — they are the specification.
Chat as Progressive Disclosure
A traditional form presents all fields at once. The chat metaphor reveals exactly one question at a time, matching the mental model customers already have from phone calls.
Runtime Liability Assessment
Fault determination is computed client-side from a single ChoiceChips answer. The handoff decision is made immediately — no network call required, no wait state to explain.