screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile flight information exploration flow examples

Search the library

Flight Tracker +: Exploring Flight Details and Features

Open recorded flow

  1. Step 1 · 2:04

    Flight Tracker +: Full-screen map with floating UI elements in the top right, right edge, and bottom center.See the flow
    Flight Tracker +

    Full-screen map with floating UI elements in the top right, right edge, and bottom center.

  2. Step 2 · 2:33

    Flight Tracker +: Top map area, middle flight details card with modal overlay, bottom navigation bar.See the flow
    Flight Tracker +

    Top map area, middle flight details card with modal overlay, bottom navigation bar.

  3. Step 3 · 2:51

    Flight Tracker +: Header with title and flight codes, followed by a countdown card, and a vertical list of itinerary steps.See the flow
    Flight Tracker +

    Header with title and flight codes, followed by a countdown card, and a vertical list of itinerary steps.

  4. Step 4 · 3:09

    Flight Tracker +: Header with title and flight codes, followed by a countdown card, and a vertical list of collapsible itinerary steps.See the flow
    Flight Tracker +

    Header with title and flight codes, followed by a countdown card, and a vertical list of collapsible itinerary steps.

  5. Step 5 · 3:11

    Flight Tracker +: Header with flight codes, countdown timer, collapsible sections, and a vertical timeline of travel steps.See the flow
    Flight Tracker +

    Header with flight codes, countdown timer, collapsible sections, and a vertical timeline of travel steps.

  6. Step 6 · 3:26

    Flight Tracker +: Header with flight info, followed by a forecast card, a plane status card, a notification toggle, and a bottom navigation bar.See the flow
    Flight Tracker +

    Header with flight info, followed by a forecast card, a plane status card, a notification toggle, and a bottom navigation bar.

  7. Step 7 · 3:36

    Flight Tracker +: Header with title, followed by horizontal scrollable code share section, vertical list of airports, grid of trip cards, and a weather card at the bottom.See the flow
    Flight Tracker +

    Header with title, followed by horizontal scrollable code share section, vertical list of airports, grid of trip cards, and a weather card at the bottom.

  8. Step 8 · 3:44

    Flight Tracker +: Top navigation bar with back button and title, followed by a segmented control, a search bar, and a scrollable list of flight departures. Bottom navigation bar at the base.See the flow
    Flight Tracker +

    Top navigation bar with back button and title, followed by a segmented control, a search bar, and a scrollable list of flight departures. Bottom navigation bar at the base.

  9. Step 9 · 4:02

    Flight Tracker +: Top navigation bar, flight summary card, 'See all Flights' button, horizontal scrolling terminal map cards, 'About' section with image and text, and bottom navigation bar.See the flow
    Flight Tracker +

    Top navigation bar, flight summary card, 'See all Flights' button, horizontal scrolling terminal map cards, 'About' section with image and text, and bottom navigation bar.

Plane Finder ⁃ Flight Tracker: Exploring Airport Information

Open recorded flow

  1. Step 1 · 2:13

    Plane Finder ⁃ Flight Tracker: Map view occupies the entire screen with a bottom sheet overlaying the lower portion.See the flow
    Plane Finder ⁃ Flight Tracker

    Map view occupies the entire screen with a bottom sheet overlaying the lower portion.

  2. Step 2 · 2:16

    Plane Finder ⁃ Flight Tracker: Top header with airport name, followed by a list of navigation links, and a bottom section containing a weather forecast chart.See the flow
    Plane Finder ⁃ Flight Tracker

    Top header with airport name, followed by a list of navigation links, and a bottom section containing a weather forecast chart.

  3. Step 3 · 2:25

    Plane Finder ⁃ Flight Tracker: Header with back button and title, search bar, filter row, date header, scrollable list of flight cards, and a bottom status footer.See the flow
    Plane Finder ⁃ Flight Tracker

    Header with back button and title, search bar, filter row, date header, scrollable list of flight cards, and a bottom status footer.

  4. Step 4 · 2:28

    Plane Finder ⁃ Flight Tracker: Header with title and search, filter row, followed by a scrollable list of flight cards grouped by date.See the flow
    Plane Finder ⁃ Flight Tracker

    Header with title and search, filter row, followed by a scrollable list of flight cards grouped by date.

  5. Step 5 · 2:31

    Plane Finder ⁃ Flight Tracker: Header with back button and title, search bar, filter row, and a vertical list of flight cards with a dropdown menu overlay.See the flow
    Plane Finder ⁃ Flight Tracker

    Header with back button and title, search bar, filter row, and a vertical list of flight cards with a dropdown menu overlay.

  6. Step 6 · 2:36

    Plane Finder ⁃ Flight Tracker: Header with back button and title, followed by a filter bar, a summary card with a bar chart, and a list of airlines.See the flow
    Plane Finder ⁃ Flight Tracker

    Header with back button and title, followed by a filter bar, a summary card with a bar chart, and a list of airlines.

  7. Step 7 · 2:41

    Plane Finder ⁃ Flight Tracker: Header with back button and title, followed by a filter bar, a summary statistics section, a bar chart, and a scrollable list of airlines.See the flow
    Plane Finder ⁃ Flight Tracker

    Header with back button and title, followed by a filter bar, a summary statistics section, a bar chart, and a scrollable list of airlines.

  8. Step 8 · 2:45

    Plane Finder ⁃ Flight Tracker: Top navigation bar followed by a header section and a long vertical list of airline performance data.See the flow
    Plane Finder ⁃ Flight Tracker

    Top navigation bar followed by a header section and a long vertical list of airline performance data.

  9. Step 9 · 2:47

    Plane Finder ⁃ Flight Tracker: Top navigation bar followed by a header section and a scrollable list of airline performance data.See the flow
    Plane Finder ⁃ Flight Tracker

    Top navigation bar followed by a header section and a scrollable list of airline performance data.

Flight Tracker +: Exploring Airport and Airline Information

Open recorded flow

  1. Step 1 · 5:31

    Flight Tracker +: Header with title and close button, search input field, Recents list, Favorites list, and system keyboard.See the flow
    Flight Tracker +

    Header with title and close button, search input field, Recents list, Favorites list, and system keyboard.

  2. Step 2 · 5:34

    Flight Tracker +: Header with airport info, followed by a list of departures, a central button, and a list of arrivals, with a bottom navigation bar.See the flow
    Flight Tracker +

    Header with airport info, followed by a list of departures, a central button, and a list of arrivals, with a bottom navigation bar.

  3. Step 3 · 5:39

    Flight Tracker +: Header with airport info, followed by a CTA button, a horizontal scrollable list of terminal maps, an informational section with an image and text, and a bottom navigation bar.See the flow
    Flight Tracker +

    Header with airport info, followed by a CTA button, a horizontal scrollable list of terminal maps, an informational section with an image and text, and a bottom navigation bar.

  4. Step 4 · 5:51

    Flight Tracker +: Header with close button, search input field, and a vertical list of airline results.See the flow
    Flight Tracker +

    Header with close button, search input field, and a vertical list of airline results.

  5. Step 5 · 5:55

    Flight Tracker +: Header with airline info, followed by a flight board list, a call-to-action button, and an airline facts section, with a bottom navigation bar.See the flow
    Flight Tracker +

    Header with airline info, followed by a flight board list, a call-to-action button, and an airline facts section, with a bottom navigation bar.

  6. Step 6 · 5:59

    Flight Tracker +: Header with back button and title, followed by a list of flight rows, and a bottom navigation bar.See the flow
    Flight Tracker +

    Header with back button and title, followed by a list of flight rows, and a bottom navigation bar.

Found an example you like?See the whole story.

See the full library See plans