DetailXperts
A UI/UX case study — a car-detailing platform with a booking app for customers and admin dashboards that run franchises, detailers and payments.
Ready to shine your car?
The Challenge
Booking a car detail meant phone calls, unclear prices and no idea when the detailer would arrive. Behind the scenes, franchises tracked jobs, detailers and refunds in spreadsheets.
The Goal
A booking app that takes customers from “Let’s book a service” to a tracked, paid job in minutes — and admin panels that give every franchise one view of bookings, people and money.
Our Role
UX research, flows for customers, detailers and admins, mobile UI, two web dashboards and a shared component kit.
Timeline
14 weeks
Team
Product designers, mobile & web engineers
Methods
Interviews, ride-alongs, usability tests
Platform
iOS, Android & web admin
We rode along with detailers first.
Primary Persona
Daniel, busy car owner
Works long hours and wants his car detailed at home or the office. Needs a clear price, a time slot and to know who is coming.
Goals
- Book in a few taps
- See clear pricing
- Track the detailer live
Frustrations
- Phone-only booking
- Surprise add-ons
- No arrival updates
Context
- At home or at work
- Books every few weeks
- Pays by card
From “Let’s book” to a shining car.
Before
- 01Call the shop
- 02Describe car
- 03Guess price
- 04Wait for slot
- 05No updates
- 06Pay in cash
Phone calls, rough quotes and no idea when the detailer would turn up.
After
- 01Pick a slot
- 02Address & car
- 03Confirm price
- 04Track detailer
- 05Pay & review
Customers pick a date and slot, add address and vehicle, see every add-on before paying, then track the detailer from arrival to final photos.
Wireframes first, pixels later.
Discovery
Customer interviews, ride-alongs, franchise calls.
Wireframes
Low-fi booking, tracking and admin flows.
UI design
App screens, two dashboards and a shared UI kit.
Development
Dev handoff, component specs and QA builds.
Launch & test
Pilot with franchises, then iterate.
Wireframe → Final UI — Home
Wireframe → Final UI — Schedule
Wireframe → Final UI — Track status
One platform, three kinds of users.
Royal blue, clean and dependable.
Colour
Royal
#003CA6
Navy
#1B3D96
Success
#067647
Surface
#F8F9FD
Ink
#151923
Type
App — Uber Move Medium / Bold
Admin — Poppins Regular / Medium
Components
Status
Blue headers · white cards · a status pill for every job
One kit, app and admin.
Three rounds of testing, each one calmer.
Round 01
Booking flow
What We Tested
Can a new customer book a detail in under two minutes?
What Changed
Split booking into schedule, address, vehicle and payment steps.
Round 02
Pricing
What We Tested
Do customers understand the final price before paying?
What Changed
Showed add-on charges (vehicle size, pet hair) on the review screen.
Round 03
Admin dashboard
What We Tested
Can franchise owners spot problem bookings at a glance?
What Changed
Added status pills, revenue cards and live detailer tracking.
