Scoot UI design & app screens

Loud yellow, and how the app keeps it legible

Scoot commits hard to its Scoot yellow. The color floods hero banners, primary buttons, and brand moments in a way most airline apps would never dare, and the interesting design tension is how the app stays readable despite it. The trick is contrast discipline: yellow is paired with near-black text and used as a saturated background block, while the dense functional content — flight lists, fare tables, forms — sits on white with black type. Yellow marks the brand and the next action; white carries the information. That split keeps a genuinely bold identity from turning into an accessibility problem.

The tone extends into microcopy and iconography that lean playful and casual, matching the low-cost, youthful positioning. For designers, Scoot is a useful counterexample to the assumption that financial or transactional flows must look sober — it demonstrates that a strong, even aggressive color identity can coexist with the seriousness of a booking flow as long as the loud color and the working content are strictly zoned into separate layers.

Flight search and the fare-bundle decision screen

Search starts with the familiar origin/destination, date, and passenger inputs, but the screen that earns attention is the fare-bundle selector. After picking a flight, Scoot presents its bundles — the bare Economy fare alongside ScootPlus and value bundles — as side-by-side cards, each listing exactly what is and isn't included (baggage allowance, seat selection, meals, changes) with checkmarks and crosses. This comparison layout is doing the heavy lifting of the low-cost model: it makes the unbundled base fare look honestly cheap while presenting the upgrade path as a clear, itemized trade rather than a hidden upsell.

The date selection typically surfaces a price-aware calendar or fare strip so travelers can slide toward cheaper days, reinforcing the price-sensitive mindset the airline courts. The pattern to study is the transparency of the bundle cards: rather than burying inclusions in fine print, Scoot turns the 'what do I actually get' question into a scannable feature matrix, which both builds trust and does the selling.

The upsell staircase and the boarding-pass payoff

Scoot's booking funnel is a deliberate staircase of add-on steps: after the fare bundle come seat selection, baggage, meals, and extras, each as its own screen before payment. Seat selection renders an interactive cabin map where tapping a seat reveals its price tier, with premium and standard seats color-differentiated. Rather than feeling like nagging, the steps are sequenced and progress-tracked so the traveler always knows how far from checkout they are — a clean model for any product that has to monetize through optional add-ons without derailing the core purchase.

The reward at the end of the flow is the mobile boarding pass: a clean, high-contrast card with the flight details, gate, seat, a scannable barcode, and the flight status, designed to be pulled up quickly at a gate under bad lighting. It is the one screen where the app drops most of the brand flourish in favor of pure scannability. Following a loud, upsell-heavy funnel with a stripped-back, utilitarian boarding pass is a smart tonal shift worth noting — the app knows when to sell and when to simply get out of the traveler's way.

Frequently asked questions