AirportRide · UX Case Study
No app download. Fixed fare. Cab waiting when you land.
A B2B2C airport cab booking platform designed for individual travellers, travel agents, and corporates — serving Pune, Mumbai, and Kolhapur airports.
My Role
Solo UX Designer
Tools
Figma · FigJam
Type
Concept Project
Duration
6 Weeks
01 — The Problem
Indian airports are served brilliantly by flights. Ground transport? Not so much.
Ola and Uber surge at peak hours — often 1.8× to 2.4× on night flights. There's no way to pre-book and lock in a price before you land. You only find out the fare after you've already mentally committed to the ride.
For travel agents, it was operational chaos — WhatsApp calls, tracking 20–30 airport pickups a week across multiple apps, no consolidated invoicing. For corporates, it was compliance: no GST receipts, no policy controls, no spend visibility.
Traveller frustration
No flight-linked pre-booking. No fixed fare guarantee. Surge pricing appears after you commit.
Agent fragmentation
Managing 20–30 transfers per week across WhatsApp, calls, and 3 different consumer apps.
Corporate compliance gap
No GST invoices from consumer apps. No employee travel policy enforcement. No spend dashboard.
"This is a completely predictable situation. Flights land every day. So why does booking ground transport still feel like a gamble?"
02 — Who I Designed For
Three users. One platform. Very different mental models.
Rajan Mehta
34 · Business Consultant · Pune
"I just need to know my cab exists before I walk out of the terminal."
Core Need
Pre-booked, fixed-fare cab confirmed before exit. No app download.
Sunita Travels
Pune · 20–30 transfers / week
"I'm calling drivers on WhatsApp at midnight. There has to be a better way."
Core Need
Bulk booking dashboard, flight-linked auto-fill, client invoicing.
TechCorp HR
Mumbai · 40+ employees
"My biggest headache is chasing receipts at month-end for reimbursements."
Core Need
Company account, travel policy controls, GST-compliant monthly invoicing.
03 — What Success Looked Like
Three measurable targets, set before I touched Figma.
>40%
Booking conversion rate
Remove every reason to abandon — upfront fixed pricing was the biggest lever.
<2 min
Avg. traveller booking time
No app download + flight auto-fill + pre-saved destinations aimed at this number.
<10 min
Agent onboarding time
If a travel agent couldn't complete their first booking quickly, they'd go back to WhatsApp.
04 — Mapping the Flows
Three very different journeys, mapped separately in FigJam.
Traveller Flow
Under 2 minutes, no account required
- 1Select Airport — PNQ / BOM T1 / BOM T2 / Navi / KLH
- 2Enter Destination — Google Maps autocomplete
- 3Compare Cabs — Hatchback / Sedan / SUV with price + ETA
- 4Enter Details — Name, phone, optional flight number
- 5Pay — UPI / Card / Wallet via Razorpay
- 6Confirmation — SMS + email, driver assigned instantly
Agent Flow
One screen to manage all client bookings
- 1Agent Login — Free or Pro plan
- 2New Booking — Enter client name + flight number
- 3Flight Lookup — Auto-fills airport, terminal, arrival
- 4Select Cab — Same comparison UI as traveller
- 5Booking Confirmed — Appears in agent dashboard
- 6Download Invoice — PDF per client or bulk export
Corporate Flow
Policy enforcement without manual HR oversight
- 1Company Registers — GST number + travel policy limits
- 2HR Adds Employees — Email invite, set cab tier limits
- 3Employee Books — Under corporate account, no personal payment
- 4HR Monitors — Real-time dashboard, department tagging
- 5Approve / Flag — Trips above policy require HR approval
- 6Monthly Invoice — Auto-generated, GST-compliant PDF
05 — From Wireframe to UI
I started with flows in FigJam, not pixels.
Research & Framing
Mapped the three personas and their core frustrations before touching Figma. The agent mental model was completely different from the traveller's — they weren't just booking a cab, they were managing a client relationship. That insight split the design in two early on.
Low-fidelity Wireframes
Built low-fi wireframes in FigJam for each of the three flows. Focused on information hierarchy first. For the traveller flow, every field I removed was a second saved. Cab comparison went through three versions before landing on price + ETA side-by-side.
Key Iteration — Cab Selection
The first version showed the cheapest option by default with others hidden behind 'Show more'. That felt like making the choice for the user. The final version shows all three types with fixed prices visible — no clicks, no hidden surge reveal.
Final UI in Figma
Built the final UI on a shared design system — tokens for color, spacing, and typography that carried across all three dashboards. Same colors, same type scale, different information density.
06 — V1 → V2 Iterations
What changed between the first draft and the final design.
Numbered arrows mark exactly what was wrong in V1 — and what I fixed in V2 across cab selection, booking form, agent dashboard, and payment. Every annotation is a real decision from the iteration process.
"The 'show more' pattern works on Netflix. It doesn't work when someone is at an airport at 11 PM and needs to make a decision in 10 seconds. Every hidden option is a reason to abandon."
07 — The Design System
Every choice had a reason. Nothing was just aesthetic.
Navy
Primary BG
Amber
Accent
Off-white
Light surfaces
Deep Navy
Dark BG
DM Serif Display
Headings · Prices · Display
Inter Regular / Semibold
Body · Navigation · Labels
JetBrains Mono
Booking IDs · Metadata · Tags
Navy reads as trustworthy and serious without feeling cold. Amber CTAs read instantly as "action" without aggression. DM Serif gives headings editorial weight; JetBrains Mono makes booking IDs feel precise, like a flight board.
08 — Challenges
The decisions that kept me up.
One system, three audiences
Making the agent dashboard and corporate portal feel like siblings of the traveller booking flow. Same tokens, same components, but very different information density. Kept the visual language identical while letting content density vary per context — feel the same, don't look identical.
When to show the fare
First instinct was to show the cheapest cab by default and reveal others on tap — standard e-commerce pattern. But airport cab booking isn't browsing, it's a decision under pressure. Chose to show all three cab types with price and ETA simultaneously — clarity over minimalism.
Language toggle placement
The EN / HI / MR toggle started in a settings page. Wrong. A user from Kolhapur on an English interface won't dig through settings — they'll leave. Moved it to the booking screen header, visible immediately. Accessibility isn't just supporting the feature, it's surfacing it where the user expects it.
"Every design decision has a trade-off. This one chose clarity over minimalism."
09 — What's Next
Phase 2 and what I'd test with real users.
Immediate
- Unmoderated usability testing with 5 users on the traveller flow
- Watch cab selection — likely main drop-off point
- Test language toggle discoverability from Kolhapur users
Phase 2 Features
- Live GPS tracking on a real map, not SVG simulation
- Full Hindi and regional language UI (currently prototype toggle)
- Flight-delay auto-detection to reschedule the cab
Agent Scale
- Bulk booking import via Excel / CSV
- Client portal link — view-only, no login required
- WhatsApp integration for driver dispatch updates
Corporate Depth
- HRMS integration (Darwinbox, Zoho People) for employee sync
- Per-employee travel history for performance reporting
- Auto-generated annual GST reconciliation report