Tokens
Colour, type, spacing, radius and touch targets as semantic roles.
Product design case studyiOS + AndroidAutomotive AI
Redesigning the vehicle damage detection app.
Making AI-assisted inspection faster, clearer and easier for field inspectors with low-to-moderate digital literacy.
44→91%Task completion
9.4→3 minAvg. completion
~68%Faster projects
Scroll through the case study
Case study thesis
The redesign was not a visual refresh. It was about reducing memory, ambiguity and rework during high-volume vehicle photography, and building a direct feedback loop between inspectors and Quality Control.
00 / Executive summary
Friction before the AI could ever add value.
An AI inspection app that classifies damage across Exterior, Interior and Tyres, held back by an interface that demanded too much interpretation.
Vehicle Damage Detection analyzes photographs and classifies damage across three capture groups. But for field users working quickly, outdoors, and with limited time to read, the app created friction before the AI could deliver value: unclear categories, uncertain angles, invisible project status, and rejection reasons disconnected from the image that caused them.
The result was abandonment, incorrect submissions, repeated photography, and slower throughput. Users were not failing because the AI concept was unclear. They were failing because the app did not guide them through the work in a predictable sequence.
The experience problemUsers had to interpret, not follow.
Similar information looked different across screens, and users were forced to remember what to capture next.
The business problemEvery rejection cost time and money.
Abandoned or rejected inspections meant more photographer time, more QC cycles, and slower dealer turnaround.
The design responseMake the workflow visible.
Clear project states, explicit capture categories, visual angle guidance, persistent progress, image-level QC feedback and reusable accessible components.
The outcomeMore complete, much faster.
Task completion rose from 44.3% to 91%, and average project time fell from ~9.4 minutes to ~3 minutes.
01 / Project context
Designed for the lot, not the office.
The product, its users, and the field conditions that shaped every decision.
Exterior
Body, panels, glass, lights and external angles.
Interior
Cabin, seats, dashboard and internal surfaces.
Tyres
Tyre condition, wheel/rim and required close-ups.
Low attention bandwidth
Inspectors move around a vehicle, holding a phone, dealing with glare and dealership staff. The interface cannot depend on long reading.
Repetitive high-volume work
The same capture pattern repeats across many vehicles. Consistency and muscle memory matter more than novelty.
Mixed digital literacy
It must work for experienced smartphone users and inspectors less comfortable with complex navigation.
Operational consequences
A single unclear image can cause a full QC loop, adding time for both inspector and admin teams.
02 / Problem definition
The app was asking users to remember the workflow.
Turning scattered UI complaints into a single, focused product problem with a clear hierarchy.
01
Orientation
Users cannot quickly tell project state or next action.
Why it mattersCreates hesitation and abandonment.
02
Capture clarity
Category and required angle are not unmistakable.
Why it mattersCreates wrong or missing images.
03
Feedback
QC comments are separated from the rejected asset.
Why it mattersCreates repeat mistakes and slow retakes.
04
Consistency
Patterns change across screens.
Why it mattersRaises cognitive load and slows learning.
05
Accessibility
Hierarchy, contrast and tap targets are uneven.
Why it mattersMakes field use harder, especially for low-literacy users.
Reframed problem statement
How might we help a field inspector move from assigned vehicle to approved inspection with minimal reading, minimal memory, and immediate recovery when QC finds an issue?
03 / Goals & success metrics
Optimize for correct, not just fast.
Connecting each experience improvement to a measurable operational outcome.
Make the flow obvious
Users always understand what to do next.
Task completion; abandonment rate
Reduce rework
Correct category and angle first time.
Retake rate; first-pass QC acceptance
Increase speed
Fewer decisions and less reading.
Average time per project
Improve feedback
Know exactly what QC rejected and why.
Time to retake; repeat-rejection rate
Build consistency
The product feels familiar across screens.
Usability score; error rate; reuse
Improve accessibility
Legible and tappable in real field conditions.
Accessibility issues; mis-taps
North-star experience metric
Successful inspection completion without avoidable retake — optimizing not only for faster submission, but for correct submission.
04 / User research
Inspectors did not reject the AI. They rejected the guesswork.
Contextual interviews, QC and operations interviews, a field survey, and an end-to-end UX/UI audit.
8 inspectorsContextual interviews
Capture habits, comprehension, workarounds and field constraints.
3 adminsQC interviews
Rejection logic, feedback workflow and repeat issues.
2 stakeholdersOperations
Linking friction to turnaround and throughput.
38 usersField survey
Quantifying recurring pain points across dealer locations.
Category confusion
"I can take the photos, but sometimes I am not sure which section I am in until I go back."Field Inspector
Angle uncertainty
"The correct angle should be visible before I shoot. A long instruction is easy to miss."Photographer
QC ambiguity
"If QC rejects one image, show me that image and the reason. I should not have to search."Field Inspector
Repeat rejections
"We reject the same kinds of photos again because the comment is not obvious to the inspector."QC Admin
The biggest insight
The app was asking users to remember the workflow. The redesign needed to make the workflow visible.
05 / Exploratory audit
Where effort and failure accumulated.
Separating interaction problems from visual-system problems surfaced the highest-impact fixes.
CriticalUnclear information architecture
Organize the product around project state and inspection category.
CriticalHigh memory burden for angles
Use visual shot references and in-camera guidance.
CriticalNo unified component system
Create reusable components and state variants.
HighWeak progress visibility
Persist section progress and overall completion throughout the flow.
HighPoor error recovery
Create image-level retake states with a direct CTA.
HighUneven contrast & tap targets
Accessible semantic colors and 44×44pt touch targets.
06 / Personas
Two users, one operational loop.
Behavior-based composites derived from the research themes — the inspector in the field and the admin in QC.
Persona 01MR
Marcus Reed
Field Inspector / Photographer · 25–35 vehicles a day
Behaviors
Works fast, repeats familiar routines, often one-handed, prefers visual cues, and returns to interrupted jobs through the day.
Frustrations
Unclear categories, long instructions, unknown project status, repeated navigation, and rejection comments that miss the exact problem.
Needs
A visible step-by-step sequence, reference angle, autosaved progress, large primary actions and immediate retake guidance.
Primary goal
Finish every assigned vehicle quickly and correctly without calling QC or a supervisor.
"I can open a project, follow the pictures, submit it, and move to the next car without thinking about the app."
Persona 02SC
Sarah Chen
Quality Control Admin · 80–120 projects a day
Behaviors
Scans for missing or incorrect shots, compares consistency, uses standardized reasons, and follows up when projects repeatedly fail.
Frustrations
Generic comments, repeat mistakes, missing context, inconsistent states, and time lost re-explaining the same issue.
Needs
Image-level rejection reasons, standardized issue tags, clear project history, and confidence the inspector will see the feedback.
Primary goal
Approve complete, usable inspection sets quickly and make rejection reasons impossible to misunderstand.
"A rejected image should come back once, corrected, and then be approved."
07 / Current-state journey
Nine stages, friction at every handoff.
Mapping where effort and failure accumulated across the project lifecycle — and the opportunity at each step.
1 · Receive assignment
PainHome does not prioritize next action or status.
OpportunityStatus-led home with Assigned / In Progress / Needs Retake.
2 · Start project
PainToo much information; weak progress context.
OpportunityShort vehicle summary + prominent Start / Resume.
3 · Capture Exterior
PainCategory and angle guidance unclear.
OpportunityPersistent category, shot count and visual reference.
4 · Capture Interior
PainUsers lose orientation between categories.
OpportunitySection transition and completion state.
5 · Capture Tyres
PainClose-up requirements easy to miss.
OpportunityImage examples + in-camera overlay.
6 · Review
PainNo clear missing/invalid summary.
OpportunityPre-submit validation and missing-shot checklist.
7 · QC review
PainProject status not actionable.
OpportunityTimeline/status card and push notification.
8 · Retake
PainFeedback not tied to exact image.
OpportunityImage-level reason + direct Retake action.
9 · Complete
PainCompletion lacks closure.
OpportunitySuccess state and fast move to next assignment.
08 / Strategy & principles
What we believed would change behavior.
Each hypothesis paired a design response with an expected, measurable signal.
H1
Keep categories visible and separate
Exterior / Interior / Tyres as explicit sections with progress counts.
Expected signalLower category errors; faster completion.
H2
Show the angle before capture
Reference thumbnail + optional overlay/watermark in camera.
Expected signalHigher first-pass acceptance.
H3
Attach QC feedback to the exact photo
Rejected-image card + issue reason + Retake CTA.
Expected signalShorter retake time; fewer repeat rejections.
H4
Autosave and persist progress
Persistent project progress and a Resume state.
Expected signalLower abandonment; higher completion.
01Show, don't tell
Prefer images, previews, status and progress over long instruction text.
02One decision at a time
Keep the primary action obvious; avoid competing CTAs during capture.
03Context never disappears
Persist vehicle, category, shot count and project state.
04Feedback must be actionable
Every error explains what happened, where, and what to do next.
05Familiar beats clever
Predictable mobile patterns so low-literacy users learn by repetition.
06Accessibility is operational UX
Contrast, text size, tap targets and error states must work in the field.
09 / Process
Four phases, one operational goal.
From understanding the lot to handing engineering a system they could build on.
Phase 01
Discover
Field research where the work happens
Contextual interviews with 8 field inspectors, 3 QC admins and 2 operations leads, plus a 38-user survey and an end-to-end UX/UI audit of the current app.
8 contextual interviews38-user field surveyEnd-to-end UX audit
Phase 02
Define
Turning complaints into one problem
Synthesized findings into a five-level problem hierarchy, two behavior-based personas, a current-state journey map and a set of How-Might-We questions.
Problem hierarchyPersonas + journeyHMW framing
Phase 03
Design
From information architecture to flows
Restructured the IA around project state, mapped a state-aware user flow with a retake loop, and designed guided capture, review and QC feedback in high fidelity.
IA + user flowGuided-capture conceptHi-fi screens
Phase 04
Deliver
Validate, systematize, hand off
Ran a moderated usability round, built a tokenised design system with full component states, and prepared an annotated developer handoff with accessibility criteria.
Usability validationDesign systemAnnotated handoff
10 / Solution
An operational loop, made visible.
Assigned → Capture → Review → QC → Retake if needed → Complete — every step designed to reduce interpretation.
01 / Orientation
A status-led home that answers three questions at a glance.
The home screen answers: what needs my attention, what is in progress, and what is done? Work is grouped by status so the most urgent project surfaces first.
- Prominent next-action card for the most urgent project
- Project cards show identity, location, progress and status
- Needs Retake appears ahead of completed work
- Resume returns to the exact unfinished image
Status-led home · Inspect dashboard
02 / Project listing
Every project, filterable by the state that matters.
A searchable list separates All, Pending and Approved, with each row carrying the VIN, date, photo count and a status chip — plus a feedback indicator when QC has commented.
- Search and status filters at the top
- Consistent row anatomy across every project
- Unread QC feedback flagged inline
Project listing · search & status filters
03 / Identify the vehicle
Two ways in: scan it, or type it.
Adding a project starts with the 17-character VIN. Camera capture is the fastest path; manual entry with inline validation is the fallback, with plain-language help on where to find the VIN.
- Camera capture for VIN plate or barcode
- Manual entry with format validation
- Contextual "where to find the VIN" help
Add VIN · step 1 of 3
04 / Guided capture
Three persistent sections, progress you can always see.
Before capture, a compact vehicle summary and a three-section progress map build a strong mental model. Each category shows required shots, completed shots and any issue state.
- Persistent Exterior / Interior / Tyres sections
- Required vs. completed shot counts per section
- Overall completion bar that never disappears
Capture Images · section progress
05 / In-camera guidance
Show the shot — don't describe it.
The camera keeps the active category and shot position visible at all times. A reference overlay helps users align the vehicle with the expected perspective, supporting recognition instead of recall. An Add Note flow lets inspectors flag context without leaving the frame.
Framing overlay · 1 of 31
Category selector & zoom
Add Note · capture context
06 / Review before submit
A checkpoint that prevents avoidable rejections.
A dedicated review step summarizes every required image and surfaces anything missing or unresolved before Submit becomes available. Confirmation explains exactly what happens next: QC review.
- Category-level completion summary with thumbnails
- Issue state attached to the exact image
- Clear enabled/disabled Submit with a reason
One last look · pre-submit review
07 / QC feedback & retake loop
Rejection becomes a task, not a dead end.
When QC rejects an image, the project moves to Needs Retake, the affected image is highlighted, and the user sees a standardized reason plus an optional admin note — with the original image kept visible for comparison and a single Retake action.
- Image-level reason tag and QC note
- Original rejected image stays visible for comparison
- One clear Retake action, no searching
Feedback from Quality Control · image-level
08 / Recovery & completion
Corrected once, then closed with confidence.
Needs Retake surfaces the exact card requiring action, and a clear success state gives the completion closure the old flow lacked — with a fast path to the next assignment.
- Retake requests appear as their own status card
- Explicit "Submitted Successfully" closure
- Start New Project keeps high-volume users moving
11 / Usability validation
Testing whether the patterns removed the guesswork.
A moderated round confirmed the redesign reduced interpretation and rework, and pointed to a few refinements.
Find and start an assigned project
5/5
All participants identified the primary action without prompting.
Capture a required Exterior angle
5/5
Reference image reduced the need to read supporting text.
Switch from Exterior to Interior
5/5
Persistent category progress made the transition clear.
Identify why an image was rejected
5/5
Image-level feedback removed the search behavior seen before.
Retake and resubmit the rejected image
4/5
One user opened the preview before Retake; CTA hierarchy was increased.
What testing changed
Made the active category label larger and persistent in the camera header; moved the QC reason above the free-text comment so the problem is recognizable at a glance.
Language over labels
Replaced generic "Continue" CTAs with context-specific labels: Start Exterior, Review Photos, Retake Photo, Submit to QC. Added a pre-start progress summary and increased outdoor contrast on camera controls.
12 / Design system
From unrelated screens to one product language.
A tokenised system across colour, typography and components — built so behavior is predictable and learning transfers between screens.
Foundations
Brand, neutrals, primary ramp and semantic states across nine families.
Bricolage headings with an Inter product scale, H1 through Tag.
Components & states
Variants, sizes and states with icon and dropdown affordances.
Soft and solid status badges across every semantic colour.
Default, focus, filled, error and disabled field states.
Unchecked, checked, error and disabled selection states.
A consistent stroke icon set spanning action, alert, AV and device.
Components
Buttons, badges, inputs, checkboxes and radios with states by default.
Patterns
Capture, review, feedback and retake behave the same across the app.
Accessibility & low-literacy design
"Retake photo," not "Resolve asset." Actions read the way users speak.
Words paired with icons and thumbnails; status is never colour alone.
Primary controls and critical states stay legible in bright light.
Camera, next, retake and submit use generous 44×44pt hit areas.
Incomplete submission is blocked, with an exact list of what's missing.
Progress is preserved when connectivity drops, with a visible sync state.
~16px body minimum; important instructions avoid low-contrast grey.
No text baked into illustrations; layouts flex for translated labels.
13 / Impact
More complete inspections, in a fraction of the time.
The redesign improved both completion and speed — an operational win as much as an experiential one.
+46.7ppTask completion
From 44.3% to 91% — more than doubling the prior completion rate.
−6.4 minTime saved per project
Average completion fell from ~9.4 minutes to ~3 minutes.
~68%Faster projects
Less active task time per inspection, at higher volume.
Task completion increased from 44.3% to 91%, and average project time dropped from roughly 9.4 minutes to about 3 minutes. The impact compounds: faster, more complete inspections mean more vehicles move through the workflow with fewer inspector retries and fewer QC cycles.
14 / Reflection
"Intuitive" is contextual.
The single decision that made everything else fall into place — and what I'd build on next.
The strongest decision was to stop treating the app as a collection of screens and model it as one operational loop. Once that loop was explicit, the information architecture, navigation, feedback states and component system could all support the same mental model.
Assigned→
Capture→
Review→
QC→
Retake→
Complete
For field inspectors, "intuitive" did not mean sophisticated interactions or dense dashboards. It meant seeing the right vehicle, the right category, the right angle, the right next action — and, when something went wrong, the exact reason and recovery step.
Portfolio takeaway
The revamp created value by reducing interpretation. The product became faster because users spent less time understanding the interface and more time completing the inspection correctly.
Have a product challenge?
Let's make the complicated feel obvious.
Healthcare, AI or SaaS product with a high-friction workflow? I help teams turn complexity into confident decisions and measurable outcomes.