It's 11 pm at Mumbai airport and a flight to Bengaluru has just been cancelled. 180 people rush one desk. Design the airline app flow that gets a traveller rebooked or refunded, and somewhere to sleep, without standing in that line.
Tired, stressed travellers on a phone with little battery left. Some are with family, some have a connecting flight, some rarely fly.
Start the timer and think out loud, like you would with an interviewer.
45-minute interview
One clock for the whole interview. Each phase fills up as time passes.
45:00left
Each prompt gives the AI a role, the whole brief, every edge case and a palette. AI drafts, you decide.
Best for a clickable prototype, fast.
ROLE You are a senior product designer building a high-fidelity, clickable mobile app prototype for a UX design interview. Make design decisions a hiring manager would respect, and keep the scope to the brief. THE CHALLENGE Flight cancelled: It's 11 pm at Mumbai airport and a flight to Bengaluru has just been cancelled. 180 people rush one desk. Design the airline app flow that gets a traveller rebooked or refunded, and somewhere to sleep, without standing in that line. THE USER Tired, stressed travellers on a phone with little battery left. Some are with family, some have a connecting flight, some rarely fly. MUST-HAVES - Explain what happened, and what they're entitled to - Rebook on another flight in a few taps - Choose a refund instead - Get a hotel or meal voucher EDGE CASES (every one must be handled) - A family of four who must sit together - A connecting flight on a partner airline - Checked bags that are already on the plane - The next flight is full, so a waitlist is the only way on - A phone at 5% battery SCREENS TO BUILD 1. What happened (390×844): the cancellation, why, and the traveller's options 2. Pick a new flight (390×844): choosing a new flight, keeping the group together 3. You're rebooked (390×844): the new boarding pass, plus the hotel and meal vouchers Link them so the main flow is clickable end to end. Show each edge case as a real state (an error, a warning, an empty state or a confirmation), not as a note. VISUAL STYLE - Plum #4A2366: primary buttons and the boarding pass - Lavender #F8F5FC: the screen background - Lilac #EFE6F7: soft panels and tips - Ink #1E1428: text - Alert red #B3261E: the cancellation only - Calm green #1B7A4A: confirmations - Type: one clean sans-serif. One clear hero (a title or a number) per screen, then a clear order of importance. - Spacing: an 8-point grid, generous margins, touch targets of at least 44 px. - Accessibility: text contrast of at least 4.5:1, labels on every input, never colour alone to carry meaning. CONTENT Use realistic content: an Indian airline flight 6E 512 from Mumbai (BOM) to Bengaluru (BLR), a family of four, prices in rupees (₹), and a hotel near the airport. No lorem ipsum. DON'T - Don't add features the brief doesn't ask for. - Don't use more than one primary button per screen.
2 strong answers, each with its own look and reasoning. Try it yourself first.
Done designing?
Compare your screens with 2 different solutions, decision by decision.