Flight Card
A scalable trip management experience, redesigned under pressure and built to grow.
01 - Overview
A high-stakes redesign with no room for error.
Flight Card is the central hub for trip management in the American Airlines app. Customers use it to view all flight segments, access their boarding pass, monitor upgrade and standby waitlists, manage passengers, change seats, and add bags — with a roadmap that extends to meals, loyalty numbers, passport info, and additional services.
With two weeks until release, an executive escalation triggered a full redesign. What followed was one of the fastest end-to-end design cycles on the team.
Role
Senior Product Designer
Timeline
1 week design · 2 weeks dev collaboration · Q2 2026 release
Team
Product, engineering, UX principal, app principal, design manager
02 - context
The problem wasn't the product — it was the foundation.
A foundation that couldn't scale
The inherited design didn’t align with the design system — misalignment meant any styling update would require disproportionate effort. The layout didn’t accommodate accessibility or dynamic fonts, and trip options used a horizontal scroll that could reach 10 items with near-zero discoverability.
End-to-end design, under pressure
Owned experience design and led daily dev collaboration for two weeks through edge cases and error scenarios. Prior work on the .com counterpart and field research at DFW, ORD, and MIA meant no onboarding required.
From design studio to stakeholder alignment.
The original design established the core layout, initial information hierarchy, and the backend framework and contracts that would underpin the entire experience — the baseline the team pressure-tested before any redesign work began.
Before any frames were touched, a design studio session with the UX principal, app principal, and design manager re-established information architecture from the ground up. Rough sketches surfaced competing assumptions early, resolving them at low cost before moving into structured wireframes.
Wireframes were elevated into presentation-ready concepts for directors, tech leads, and architects. The goal was directional alignment — locking scope and structure so hi-fidelity work could move without revisiting foundational decisions.
03 — Framing & Strategy
The goal wasn't to redesign.
It was to build a foundation that wouldn’t need to be redesigned again.
Principles
Align to the system
Every decision had to map to existing design system tokens — not just for consistency, but to make future updates sustainable.
Design for scalability
Passenger cards, trip options, and the overall structure had to accommodate future features without requiring a restructure.
Constrain to accelerate
Front-end only wasn’t a limitation — it was the decision framework that kept the timeline intact.
How the system works.
The page is structured in three layers, each designed to expand independently as new features are introduced.
Flight information
Passengers
Trip management
04 — Decisions & Tradeoffs
Every decision kept the release date intact.
Linear to two-column layout
Horizontal scroll to scannable list
Inspiration imagery
Progress tracker
Loyalty medallions on passenger cards
Peaking bottom sheet for trip options
05 — Solution
A scalable, system-aligned experience built to grow.
The hero image is anchored to the final destination, not the departure airport — because that's where anticipation lives. It replaced a flat, utilitarian screen with something that gives the experience a sense of place. Fallback states were scoped for smaller regional airports to ensure no destination renders without appropriate imagery.
Multi-leg itineraries create an orientation problem. Chips solve it — each segment is a scannable airport code pair, switching cost is low, and the active chip always reflects the current segment. It works for simple roundtrips and complex multi-city itineraries without collapsing context the way accordion or tab patterns tend to.
One component handles every flight state — on time, delayed on the ground or in the air, awaiting takeoff, inflight, cancelled, IRROPS, and non-standard states like unpurchased holds and non-rev travel. The work wasn't designing per scenario. It was defining the state variables that let a single flexible component express all of them without layout breakage or bespoke handling.
A plane icon moves between origin and destination based on a time-elapsed calculation against scheduled flight duration — active only when airborne, with defined rest states pre-departure and post-landing. The real design challenge was ensuring the indicator stays coherent through delays and cancellations, so every state transition feels intentional rather than broken.
The primary action responds to where the customer is in their journey. No CTA outside 24 hours. Check-in prompt inside 24. Boarding pass once checked in. Waitlist option added inside 12 hours when relevant. The logic accounts for combinations — checked in but waitlisted, status changes mid-window — so the most urgent action is always what's most prominent.
Each tile shows seat, bags, and AAdvantage number at a glance. Tapping opens a management sheet built for extensibility — bags and seats are fully functional today, loyalty and SSRs are read-only with full editing coming. Upcoming capabilities like meal selection, passport, and KTN add as new tiles with no structural redesign. The architecture scales from a solo traveler to a family with mixed assignments without the layout breaking.
06 — Impact
Shipped on time. Built to last.
Expected outcomes
Design system alignment
Full token compliance means styling updates are sustainable — no one-off fixes required as the system evolves.
Scalability
Built to accommodate the full feature roadmap — meals, loyalty numbers, passport info, and additional services — without structural changes.
Systems impact
Flight information pattern
The flight card structure established a reusable pattern for how flight information is displayed across the entire app — becoming the standard for every surface that shows flight details.
Passenger card component
Introduced as a net-new component now used across the app, including the booking flow.
Inspiration imagery and progress tracker
Both originated in Airport Guide, were adopted here with stakeholder alignment, and are scoped for future release — extending the influence of that work across the product.
Reflection
Designing for variability is more effective than designing for completeness.
The constraint was the strategy. Keeping every decision front-end only wasn’t a compromise — it was the frame that made fast, confident decisions possible. The hardest part wasn’t the speed. It was resisting the temptation to solve everything at once.
The medallion decision is the clearest example of that discipline. It was the right idea at the wrong time — and knowing the difference is what kept the release on track.