Flighty
every flight, read like a departure board
Your flight leaves at 14:05. Its plane is still in Denver, running 48 minutes late. The board won’t say so for hours. At 08:10 your phone tells you to expect 14:53; the departure board changes to delayed at 13:20. You knew at 08:10.
01 · The brief · Discover
Make bad news feel boringly obvious.
Flighty is a flight tracker for iPhone, iPad, Mac, Apple Watch and Apple Vision, founded by Ryan Jones, a former Apple operations employee. A six-hour delay pushed him to tweet that he’d build something better himself; his co-founders came from the replies. It launched in 2019 and combines live flight data with FAA and air-traffic-control data. The promise is simple: delay alerts that arrive faster than the airline’s own. The team’s own bar: “work so well that it feels almost boringly obvious.”
- 2019
- Launched, after about 18 months of beta with frequent flyers and pilots (Mercury)
- ADA ’23
- Apple Design Award winner, Interaction category
- Finalist
- App Store Awards 2023, App of the Year
- ~10
- People across seven countries; bootstrapped, no VC (Mercury)
- 3M+
- Users, per Flighty’s homepage (Mercury reports a higher figure)
- 4.8
- App Store rating from about 155K ratings (snapshot)
Design problems we chose
- 01
Calm under bad news
A cancellation or diversion has to feel urgent but never panicky, and lead with the next action: rebook.
- 02
One hierarchy, every surface
Watch, Live Activity, widget and Mac each need the same reading order: one line per flight, like a departure board.
- 03
Shareable by design
Flighty grows without paid marketing. Passport and Friends could become richer, privacy-safe moments worth sharing.
Our goal
Every surface answers two questions in one glance: is my flight OK, and what do I do next?
02 · Research
Three travellers, one departure board.
We built personas from Flighty’s public audience: frequent flyers, business travellers, aviation fans and the families who track them. Then we studied the interface every traveller already knows how to read.
Personas are NUUKE research assumptions built from the brand’s public audience, not real customers.
What airport signage already solved
“They’ve had 50 years of figuring out what’s important.”
Flighty’s team on airport boards, in Apple’s Behind the Design. We treat that as a design brief.
One line per flight
The departure-board analogy Flighty is known for. If it can’t fit a board row, it isn’t the headline.
A circle for progress
Apple notes the Dynamic Island uses a simple circular chart for flight progress. We extend it into a flight clock.
How we’d validate it
- AGate-side interviews6 travellers at 2 airports, met during real delays.
- BTwo-trip diary studyScreenshots of every alert that helped or annoyed.
- CAirline-app teardownWhere each one hides the reason for a delay.
- DModerated usability test5 people, 3 tasks, v1 against v2. Replayed in chapter 08.
03 · Journey map
A travel day, from inbox to baggage belt.
Ana’s day with a delayed flight. Tap each moment to see what she’s doing, how she feels, and where the app can step in. The low point is the gate. That’s the moment to design for first.
Stage 1 · Booking
Doing
Forwards the confirmation email.
Feeling
🙂 Fine. One more trip.
Opportunity
Import from email, calendar or TripIt. The flight appears without typing a single code.
Stage 2 · Morning of
Doing
Checks the airline app: on time.
Feeling
😐 Cautiously fine.
Opportunity
Watch the inbound plane. “Your plane is 48 min late in Denver” lands hours before the airline says so.
Stage 3 · To the airport
Doing
Decides whether to leave early.
Feeling
😕 Second-guessing.
Opportunity
A “leave by” time based on the predicted departure, not the schedule.
Stage 4 · At the gate
Doing
Gate changes; the board flips to DELAYED.
Feeling
😣 Frustrated, stuck in a crowd.
Opportunity
A gate-change alert with walk time, the reason in plain words, and rebooking one tap away.
Stage 5 · In the air
Doing
Phone in flight mode, family waiting.
Feeling
🙂 Settled.
Opportunity
The Live Activity keeps the flight clock on the lock screen; Friends show Tom a live ETA.
Stage 6 · Landing
Doing
Finds the connection and the bags.
Feeling
🙂 Relief.
Opportunity
Arrival gate and baggage belt the moment the wheels touch down.
Stage 7 · Year end
Doing
Shares the Passport poster.
Feeling
😄 Proud, a bit nerdy.
Opportunity
A richer poster that is safe to share: routes and totals, no dates or seat numbers.
04 · User flow
Ten screens around one flight card.
Everything branches from the flight card: the reason, the timeline, the gate and the plane itself. Tap any screen to open it in the live prototype.
Tap any screen to open it in the prototype ↓
05 · 3D wireframe
Take the flight card apart.
Five layers, from grid to motion. Scroll and the exploded view assembles into the final card. Drag to look around it.
Scroll to assemble · drag to orbit
- L1
Layout grid
A 4-column grid with 20pt margins, an 8pt rhythm, and safe areas for the Dynamic Island and the home indicator.
- L2
Wireframe
The departure-board hierarchy in grey boxes: route, then times, then one status line, then gate. Everything else waits below the fold.
- L3
Content & data
Real data in real lengths. Codes are biggest, times second. The status line answers “why?” in plain words, and nothing reads like a percentage.
- L4
Colour & status
Near-black like a board at night. Colour is only ever status: green on time, amber delayed, red cancelled, always paired with a word.
- L5
Motion & states
Changed values flip like split-flap tiles, so you notice what moved. Old times and gates stay visible, struck through, for one glance.
06 · Prototype
Tap through a delayed travel day.
FL 214, Chicago to San Francisco, running late. Follow the journey on the left, and switch between Sketch, Wireframe and Hi-fi to see how each screen evolved.
Interactive prototype
FL 214 · travel day
Nine tasks, ten screens. Everything you can tap glows when you turn on tap targets.
Final UI, fully tappable.
Your journey 0/9
My Flights
Upcoming
Add a flight
Or let it find you
Forward a confirmation email and the flight shows up on its own, usually before you’ve closed the mail app.
Why it’s late · predicted 08:10
Your plane is 48 min late in Denver
An air-traffic-control ground delay is holding it at DEN. It should leave around 12:03 your time, land here at 14:18 and needs 35 minutes to turn around.
Live timeline
- 08:10
- 09:30ATC ground delay at DenverDepartures held about 45 min
- 12:03Your plane leaves Denver48 min behind schedule
- 13:20Airline posts the delay5h 10m after you knew
- 13:58
- 14:18Plane lands at ORDPredicted
- 14:28BoardingGate C4
- 14:53Departs for SFOLands 17:26
The old gate stays on screen, struck through, for 10 minutes, so you know this isn’t a typo.
Airbus A320 · tail N214XX
Your plane is in Denver
Held by an ATC ground delay. It leaves at 12:03 your time and flies straight to you.
Its next 25 hours
- SEA → DENLanded 09:47 · 16 min late
- DEN → ORDLeaves 12:03 · ATC hold
- ORD → SFO · your flightDeparts 14:53
- SFO → LAX18:40 · next
- LAX → SFOTomorrow 07:15
13:31
Wednesday 8 October
Friends
AUS → ORD · in the airOn timeLands15:12Leave home by14:35
He sees FL 214’s ETA only
Sharing is private: only people you add, only the flights you choose.
Sample data. The share version drops dates and seat numbers by default.
…
07 · Making of · Lock screen & island
Design for the screen nobody opens.
Most of a travel day happens on the lock screen and in the Dynamic Island. We designed those surfaces on a bench: switch the flight state and watch the Live Activity and all three island sizes update together, then try the one-second glance test.
13:31
Wednesday 8 October
Boarding · Gate C4
Doors close 14:38
Dynamic Island
Signage rule for this state
Gate first, time second.
At the airport, the two things a board prints biggest are where to go and when. The compact island keeps only those two.
Apple describes Flighty’s Live Activities and Dynamic Island asdesigned to recall airport signage conventions that have been in place for decades.Apple, Behind the Design
Our bench rules
- One line per flight. If it doesn’t fit a board row, it doesn’t go in the island.
- Fixed positions. The gate is always bottom right; times never swap sides.
- Colour plus a word. Amber always says “Delayed”, for colour-blind eyes and bright sun.
- Tabular numbers. Times update in place without jiggling.
08 · Making of · Usability test
Watch a tester get lost. Then watch them not.
We test before we polish. This replay shows the method: taps build a heatmap, the dashed line is the path, the ticks on the scrubber are taps (red = misclick). Switch tasks, then flip to After · v2 to see the redesigned screen take the same test.
Tester P3 · scripted think-aloudPress play, or drag the scrubber.
Task
- Task success
- 3 of 5
- Median time
- 24 s
- Misclicks
- 4
Illustrative numbers. They show how we’d run and read a 5-person moderated test. The session is scripted for this concept, not recorded from real users.
- Finding 01
Testers tapped the amber status chip, expecting the reason. It did nothing, so they went hunting through tabs.
Design changeThe status line became the button: “Delayed 48 min · Why? ›” opens the explanation in one tap.
- Finding 02
The gate had changed, but the new gate looked identical to the old one. Two testers walked (on paper) to B12.
Design changeGate changes now take the top slot, old gate struck through, new gate in signage amber, with walk time.
- Finding 03
Nobody connected “late inbound aircraft” to “Where’s my plane”. It lived three levels deep behind a ••• menu.
Design changeThe inbound plane now appears inside the delay card, with its position and a link to its 25-hour day.
09 · Passport
A year of flying, drawn as great circles.
Passport is where Flighty turns a year of travel into something you want to share. We prototyped a richer version as a 3D globe. Drag it, or pick a route.
Drag to spin · pick a route to fly to it
Passport · sample year
- Flights
- 14
- Miles
- 22,691
- Airports
- 14
- Hours delayed
- 6h 35m
Longest: SFO → NRT, 5,112 mi
Routes
An invented traveller, for illustration. Flighty Passport launched in December 2023; this is our take on making the year-end poster richer and safer to share: routes and totals, never dates or seat numbers.
10 · Design system
A departure board at night: colour only ever means status.
Colour tokens · click to copy
Type scale
- Airport codesORD → SFOSystem sans (SF-style) Heavy · 44/44
- Times14:05 → 14:53System sans Bold · tabular numerals · 28
- StatusDELAYED 48 MINInter 800 · 13 · +0.08em
- BodyYour plane is late out of Denver.System sans 400 · 15/21
Hex values and type are our working approximation of a night-mode, signage-style UI. Flighty publishes no official palette or typeface.
11 · Ship & measure
How we’d know it worked.
Head start
We expect: Users hear about delays meaningfully earlier than the airline’s own update, on most delayed flights.
How we’d measure: First alert timestamp vs. the airline’s first status change, per delayed flight.
One-second read
We expect: At least 9 in 10 testers read gate and time from the Live Activity in a one-second glance.
How we’d measure: The glance test from chapter 07, run per state in moderated sessions.
Calm cancellations
We expect: After a cancellation, people reach rebooking options faster and contact support less.
How we’d measure: Time from cancel alert to rebook tap; rebook completion; a short stress rating.
Shared, not bought
We expect: Passport posters and Friends invites bring new installs without paid media.
How we’d measure: Share-sheet completions and installs attributed to share links.
These are the success measures we would agree with the client before launch. As a concept project, no results are claimed.
