Screen study · Reviewed September 23, 2026
Flighty route entry and flight discovery
The screens progress from an empty flight view through airport search, route selection, results and a saved-flight map.
How can flight entry accommodate uncertain details while keeping the route legible?
The interface supports route and flight-number entry, shows airport codes with place names, preserves origin context while searching, and compares flight schedules in repeated rows. This archive does not verify autocomplete response, result accuracy or what the app does after each control is activated.
Evidence and limits
Selected Flighty Aug 2026 exported iOS screens, shown as still references. No recording is attached; ordering, timing, intermediate actions, outcomes and alternate paths are not established.
Read the decisions
01 / Flighty · Aug 2026 · Still image
Flight dashboard with welcome tip
What is visible
A world map fills the background behind a My Flights panel, bottom tabs and a welcome tip about a free upgrade.
Design interpretation
Keep the main destination visible beneath a contextual tip so the first view still communicates app structure.
02 / Flighty · Aug 2026 · Still image
Empty flights prompt
What is visible
The My Flights panel says Let’s Fly Somewhere and invites the person to search for a next flight, above persistent bottom navigation.
Design interpretation
Give an empty view a specific next action and retain navigation to other app areas.
03 / Flighty · Aug 2026 · Still image
Start adding a flight
What is visible
An Add Flight sheet offers a search field, Find by Route, Find by Flight Number and suggested airlines.
Design interpretation
Expose more than one entry method when the needed flight detail may be known in different forms.
04 / Flighty · Aug 2026 · Still image
Search for an airport
What is visible
A typed airport query returns matching airport and metro-area results, each with codes and location context.
Design interpretation
Disambiguate airport matches with both code and place name when a city has multiple airports.
05 / Flighty · Aug 2026 · Still image
Compare flight options
What is visible
A result list shows several airlines, departure and arrival times, duration and on-time status, with codeshare and airline filters.
Design interpretation
Put comparable schedule details in repeated rows and provide filters for narrowing the set.
06 / Flighty · Aug 2026 · Still image
View a saved flight on the map
What is visible
The My Flights panel shows one route with airline, flight number, duration and departure details over a map.
Design interpretation
Combine spatial context with a compact flight summary in the saved-trip destination.
What to question
- Airport autocomplete helps resolve ambiguous place names, but depends on accurate and current airport data.
- A result list exposes schedule differences, while this capture cannot establish live availability or data freshness.
- A map adds route context but may need a list alternative for people who do not benefit from spatial presentation.
Try an original implementation
Explore a three-step web onboarding pattern: choose a goal, set a pace, and optionally request a reminder. Go back to revise answers without losing them.
This React example uses native form controls, keyboard navigation and focus management. It is a separate prototype with original copy and styling, not a reproduction of the source apps.
Download React sourceRequires React and Tailwind CSS. Web only; not React Native. MIT license.
Import the named OnboardingExample component into a page. Replace the final preview with your application logic; this example makes no network requests.
Practice studio · Original web demo
Step 1 of 3
What would you like to practice?
Before you ship
- Support both route-based and flight-number search.
- Disambiguate airports with code and location labels.
- Keep route criteria visible during loading and results.
- Make empty states lead to a clear flight-search action.
Validate these recommendations with your own users. No conversion uplift is claimed.