The problem
Promo codes sit at a sensitive point in flight booking: the moment a price-conscious traveler decides whether the fare is good enough. In the existing experience, the promo field was a dead end — a blank input that assumed users already knew a code. Users who didn't have one got nothing; users who mistyped one got a failure with no way forward. The push came from two directions: analytics showed drop-off at the promo step, and new wallet-partner offers (Mobikwik, Paytm) needed placement that would not clutter the booking form.
The brief: redesign the promo flow so that users without a code discover offers instead of hitting a wall, users with a code get a fast, forgiving path, and partner offers (Mobikwik, Paytm) get meaningful placement — without cluttering the booking form itself.
The flow at a glance
Key design decisions
1 · The empty state sells, it doesn't apologize
Most promo fields treat "no code" as the user's problem. I flipped it: tapping Add promo code opens a sheet where the input sits above a list of available offers — cashback and discount cards with the code, the eligibility terms, and a login CTA per offer. A user who arrived with nothing leaves with a code. The "Simply login to unlock your personalized promo code" line turns the same surface into a login incentive, which mattered because logged-in users complete bookings faster, retain preferences, and can be re-engaged with personalized fares.
2 · Errors keep the user in the flow
An invalid code doesn't eject the user or clear the sheet. The message — "The code entered does not exist or is expired" — appears inline, in place, with the available offers still listed directly below. The recovery path is literally on the same screen: if your code failed, a working one is one tap away. This was the difference between an error state and an exit point.
3 · Applied state lives on the booking form, with an exit
After applying, the user lands back on the booking form with the code shown as a confirmed chip — "QUIK10 Applied ✓" — plus an explicit Remove action. Two reasons: trust (the discount is visible where the price decision happens, not buried in a sheet) and control (removing a code is as easy as adding one, so users experiment with offers instead of fearing a wrong choice).
Craft details
- Edge badges for offer type. CASHBACK / 7% OFF / 13% OFF run vertically along each card's edge — color-coded, scannable, and out of the way of the offer content.
- One component, five states. The sheet handles empty, browsing, typed, error, and success with a single layout — less UI to learn, less to build.
- Copy that nudges without blocking. Login is encouraged ("unlock your personalized promo code") but never required to browse or apply public codes.
Outcome
The redesigned coupon flow shipped as part of IndiGo's wider flight-booking overhaul (Jan–Nov 2024), improving usability and reducing task completion time for users applying and managing promo codes. Just as important, the offers sheet turned the promo field from a support liability into a merchandising surface: partner offers gained first-class placement without adding a single element to the booking form itself.
Reflection
The offer cards depend on partner content quality — titles and terms we did not control — and we never tested the sheet on slow connections, where offer assets delay load. Next, I would instrument offer-card taps versus manual code entry to quantify how much of the improvement comes from discovery rather than pre-existing intent.