screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile flight search flow examples

Search the library

Flight Tracker +: Searching for a Flight

Open recorded flow

  1. Step 1 · 1:01

    Flight Tracker +: Header, search tabs, input fields, search button, explore list, bottom navigation.See the flow
    Flight Tracker +

    Header, search tabs, input fields, search button, explore list, bottom navigation.

  2. Step 2 · 1:03

    Flight Tracker +: Modal header with title and close button, followed by a search bar, a 'Recents' list item, a 'Nearby' section with two cards, and a system keyboard at the bottom.See the flow
    Flight Tracker +

    Modal header with title and close button, followed by a search bar, a 'Recents' list item, a 'Nearby' section with two cards, and a system keyboard at the bottom.

  3. Step 3 · 1:09

    Flight Tracker +: Modal window with a header, search bar, section title, and a list of search results.See the flow
    Flight Tracker +

    Modal window with a header, search bar, section title, and a list of search results.

  4. Step 4 · 1:19

    Flight Tracker +: A modal window containing a header title, a search input field, and a vertical list of airport results.See the flow
    Flight Tracker +

    A modal window containing a header title, a search input field, and a vertical list of airport results.

  5. Step 5 · 1:22

    Flight Tracker +: Header, search mode tabs, airport selection card, date selector, search button, explore list, and bottom navigation.See the flow
    Flight Tracker +

    Header, search mode tabs, airport selection card, date selector, search button, explore list, and bottom navigation.

  6. Step 6 · 1:24

    Flight Tracker +: Modal window containing a header, a calendar grid, and a list of date suggestions.See the flow
    Flight Tracker +

    Modal window containing a header, a calendar grid, and a list of date suggestions.

  7. Step 7 · 1:29

    Flight Tracker +: Top navigation bar with back and filter buttons, followed by a centered empty state illustration and text, and a bottom navigation bar.See the flow
    Flight Tracker +

    Top navigation bar with back and filter buttons, followed by a centered empty state illustration and text, and a bottom navigation bar.

Klook: Travel & Activities: Searching for a Flight

Open recorded flow

  1. Step 1 · 5:44

    Klook: Travel & Activities: Top search bar followed by a vertical list of categorized location results.See the flow
    Klook: Travel & Activities

    Top search bar followed by a vertical list of categorized location results.

  2. Step 2 · 5:57

    Klook: Travel & Activities: Search bar at the top followed by a vertical list of location results.See the flow
    Klook: Travel & Activities

    Search bar at the top followed by a vertical list of location results.

  3. Step 3 · 6:00

    Klook: Travel & Activities: Header with back/share, transport mode selector, main search card, value prop list, and popular routes section.See the flow
    Klook: Travel & Activities

    Header with back/share, transport mode selector, main search card, value prop list, and popular routes section.

  4. Step 4 · 6:06

    Klook: Travel & Activities: Top header with close button and title, central scrollable calendar grid, bottom fixed action button.See the flow
    Klook: Travel & Activities

    Top header with close button and title, central scrollable calendar grid, bottom fixed action button.

  5. Step 5 · 6:18

    Klook: Travel & Activities: A modal overlay sits at the bottom half of the screen, containing a header, a warning banner, and three rows of passenger counters.See the flow
    Klook: Travel & Activities

    A modal overlay sits at the bottom half of the screen, containing a header, a warning banner, and three rows of passenger counters.

  6. Step 6 · 6:31

    Klook: Travel & Activities: Top navigation bar, date selection horizontal scroll, vertical list of flight cards, and a sticky bottom action bar.See the flow
    Klook: Travel & Activities

    Top navigation bar, date selection horizontal scroll, vertical list of flight cards, and a sticky bottom action bar.

  7. Step 7 · 6:36

    Klook: Travel & Activities: Top navigation bar, modal header with close button, scrollable calendar grid, and a fixed bottom action button.See the flow
    Klook: Travel & Activities

    Top navigation bar, modal header with close button, scrollable calendar grid, and a fixed bottom action button.

  8. Step 8 · 6:40

    Klook: Travel & Activities: Top navigation bar, date selector, horizontal list of flight cards, bottom floating action bar with filters, sort, and primary CTA.See the flow
    Klook: Travel & Activities

    Top navigation bar, date selector, horizontal list of flight cards, bottom floating action bar with filters, sort, and primary CTA.

  9. Step 9 · 7:05

    Klook: Travel & Activities: Top navigation bar with close button and title, followed by a two-column filter selection area, and a bottom action bar.See the flow
    Klook: Travel & Activities

    Top navigation bar with close button and title, followed by a two-column filter selection area, and a bottom action bar.

  10. Step 10 · 7:10

    Klook: Travel & Activities: Top navigation bar, followed by a horizontal date selector, a list of flight cards, and a bottom modal overlay for sorting.See the flow
    Klook: Travel & Activities

    Top navigation bar, followed by a horizontal date selector, a list of flight cards, and a bottom modal overlay for sorting.

Plane Finder ⁃ Flight Tracker: Searching for a Flight

Open recorded flow

  1. Step 1 · 1:50

    Plane Finder ⁃ Flight Tracker: Top search bar, followed by an informational card, a 'Flights By' list section, and the system keyboard at the bottom.See the flow
    Plane Finder ⁃ Flight Tracker

    Top search bar, followed by an informational card, a 'Flights By' list section, and the system keyboard at the bottom.

  2. Step 2 · 1:57

    Plane Finder ⁃ Flight Tracker: Search bar at the top followed by a single list item result.See the flow
    Plane Finder ⁃ Flight Tracker

    Search bar at the top followed by a single list item result.

  3. Step 3 · 2:01

    Plane Finder ⁃ Flight Tracker: Top navigation bar, followed by a calendar view, a modal overlay, and a vertical list of flight status cards grouped by status.See the flow
    Plane Finder ⁃ Flight Tracker

    Top navigation bar, followed by a calendar view, a modal overlay, and a vertical list of flight status cards grouped by status.

Found an example you like?See the whole story.

See the full library See plans