← Selected Work
Visual Design · Mobile · Automotive

A car service app built around knowing what's wrong.

A personal exploration in service-app UI — designing the moment between "something feels off" and "it's booked and handled." The issue-tagger is the centrepiece: a visual interface for pointing at a problem on your own car.

Personal Project
Figma
4 key flows
Visual language
9:41
Track Live Location
Broadway W Broadway Worth St Reade St Warren St Park Pl Park Row
Estimated Arrival
09:30 – 10:00 AM
Rajan Kumar
Lead Mechanic · AutoPro
AutoPro Service Centre
411, 5th Main, 2nd Block
02 · Interactive prototype
9:41
Location
411, 5th Main, 2nd Block…
Search for services…
My Cars
In Service
History
Your Garage
Add car +
Primary
Mercedes-Benz
GLC 300 · 2022 · KA 01 AB 1234
Secondary
Toyota
Camry XSE · 2020 · KA 02 CD 5678
Service Menu
See all
Routine Service
Wash & Care
Repair & Fixes
Heat Wrapping
Latest Offers
See all
Limited time!
Get Special Offer
40% off
All Routine Service · T&C Applied
Claim
Festival
Car Wash Deal
25% off
All Wash Services · T&C Applied
Claim
Bank Offer
HDFC Card Offer
20% off
All Tire Services · T&C Applied
Claim
Home
Explore
Bookmark
Chat
Profile
9:41
Mercedes-Benz GLC
Tap zones to tag an issue
2 Issues
Engine
Brakes
Tap a zone
Tagged Issues 2
Engine Zone
"Strange knocking noise when accelerating above 60 km/h. Started 2 weeks ago."
Front Brakes
"Squealing when braking. Brake pads may need replacement."
Tap a zone above to add another issue
Home
Explore
Bookmark
Chat
Profile
9:41
Service Stations
12 stations near you · Engine + Brakes
All
Engine Specialist
Brake Service
Nearby
Offers
12 Stations Found
Sort & Filter
AutoPro Service Centre
Engine · Brakes · Electrical
4.9 (312)
Engine Specialist
Brake Expert
20% off today
1.2 km away · ~5 min
QuickFix Motors
Brakes · Suspension · Tyres
4.7 (189)
Brake Specialist
Same-day Service
2.4 km away · ~9 min
TechDrive Garage
Engine · Electrical · Diagnostics
4.8 (241)
Engine Expert
Diagnostics
HDFC 15% off
3.1 km away · ~12 min
WheelWorks Pro
Tyres · Suspension · Alignment
4.6 (98)
Tyre Specialist
Free Inspection
4.0 km away · ~15 min
Home
Explore
Bookmark
Chat
Profile
9:41
Station Details
🔧
AutoPro Service Centre
Engine · Brakes · Electrical
4.9 (312 reviews)
Open Now
1.2
km away
~5
min drive
20%
offer today
8yr
experience
Specialisations
Engine Overhaul
Brake System
Electrical
Diagnostics
AC Service
Your Issues
Engine — Knocking noise above 60 km/h
Matched
Brakes — Squealing, pad replacement
Matched
Estimated Service Cost
₹3,200 – ₹4,800
Includes parts + labour · Final quote after inspection
Available Slots — Today
9:00 AM
11:30 AM
2:00 PM
4:30 PM
Free cancellation up to 2 hours before
Home
Explore
Bookmark
Chat
Profile

A personal project exploring how service booking flows can be built around the user's actual knowledge — not a dropdown of generic issues, but a map of their own car.

Decision 01
The car as the input interface
Instead of asking users to pick from a list of service categories, they tap directly on the part of the car that has a problem. The SVG diagram makes the interaction spatial and concrete — it matches how people actually think about car issues.
Decision 02
Stations filtered by your issues
The service station list is ranked by how well each station matches the specific issues tagged. "Engine Specialist" and "Brake Expert" tags appear because the user flagged those problems — not as static labels.
Decision 03
Purple header as orientation anchor
The large rounded purple header carries location and context through every screen. The user always knows where they are in the flow because the header adapts to each screen's context while staying visually consistent.
Decision 04
Offers inline, not on a separate screen
Discounts appear as orange chips on station cards — not buried in a separate offers screen. The decision to book should be made in one place, with all relevant information visible at once.
03 · Design language

What this project is about.

Most service apps ask you to describe a problem in words, from a list someone else wrote. This one asks you to show it. The issue-tagger is a direct manipulation interface — the car is the form. It’s also a test of whether a spatial metaphor can reduce the friction of an inherently frustrating experience: something is wrong with my car and I don’t know exactly what to call it.

Colour
Purple for trust, orange for action
Deep purple carries the brand — authoritative and trustworthy for a service context. Orange marks things that need action: tagged issues, active offers, open status. Nothing else competes for attention.
Interaction
Tap the car, not a dropdown
The SVG car diagram with tappable zones replaces a 20-item issue category selector. Direct manipulation beats abstraction when the subject is inherently spatial. Users know where the noise is coming from — they just needed a way to point at it.
Information
Everything for a decision, nothing else
Each station card shows rating, distance, specialisation, and offers in one view. The detail screen adds a cost estimate and time slots. No screen requires navigating away to answer a basic question.