screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile search and filter flow examples

Search the library

Scanner App: Genius Scan: Search & Filter Documents

Open recorded flow

  1. Step 1 · 6:19

    Scanner App: Genius Scan: Top navigation bar, followed by a search input field, and a list of search results below.See the flow
    Scanner App: Genius Scan

    Top navigation bar, followed by a search input field, and a list of search results below.

  2. Step 2 · 6:37

    Scanner App: Genius Scan: Top navigation bar, followed by a search input field, a section header, and a list of tag pills.See the flow
    Scanner App: Genius Scan

    Top navigation bar, followed by a search input field, a section header, and a list of tag pills.

  3. Step 3 · 6:39

    Scanner App: Genius Scan: Top navigation bar, search input field, central empty state illustration and text, bottom system keyboard.See the flow
    Scanner App: Genius Scan

    Top navigation bar, search input field, central empty state illustration and text, bottom system keyboard.

Redfin: Buy, Sell & Rent Homes: Set Up Initial Search

Open recorded flow

  1. Step 1 · 0:26

    Redfin: Buy, Sell & Rent Homes: Top navigation bar, header text, central input card, two list-style filter rows, and bottom action buttons.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top navigation bar, header text, central input card, two list-style filter rows, and bottom action buttons.

  2. Step 2 · 0:32

    Redfin: Buy, Sell & Rent Homes: Top navigation bar with search input, followed by a 'Current Location' button, a 'PLACES' header, and a vertical list of location suggestions, with a system keyboard at the bottom.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top navigation bar with search input, followed by a 'Current Location' button, a 'PLACES' header, and a vertical list of location suggestions, with a system keyboard at the bottom.

  3. Step 3 · 0:39

    Redfin: Buy, Sell & Rent Homes: Top navigation bar, followed by a title, then a series of interactive cards for search parameters, ending with a summary count and primary action buttons at the bottom.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top navigation bar, followed by a title, then a series of interactive cards for search parameters, ending with a summary count and primary action buttons at the bottom.

  4. Step 4 · 0:49

    Redfin: Buy, Sell & Rent Homes: Header with progress, summary cards for location/price, central card for bed/bath selection, bottom status text, and primary CTA button.See the flow
    Redfin: Buy, Sell & Rent Homes

    Header with progress, summary cards for location/price, central card for bed/bath selection, bottom status text, and primary CTA button.

  5. Step 5 · 0:52

    Redfin: Buy, Sell & Rent Homes: Top navigation bar, centered illustration, header text, subheader text, list of notification settings, and bottom action buttons.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top navigation bar, centered illustration, header text, subheader text, list of notification settings, and bottom action buttons.

Hotels.com: Book hotels & more: Filter and Sort Search Results

Open recorded flow

  1. Step 1 · 2:02

    Hotels.com: Book hotels & more: A vertical list of filter controls starting with a sort dropdown, a search bar, a checkbox list for popular filters, a price range slider, and a checkbox list for neighborhoods, ending with a full-width action button.See the flow
    Hotels.com: Book hotels & more

    A vertical list of filter controls starting with a sort dropdown, a search bar, a checkbox list for popular filters, a price range slider, and a checkbox list for neighborhoods, ending with a full-width action button.

  2. Step 2 · 2:11

    Hotels.com: Book hotels & more: Top navigation bar, followed by a 'See more' link, an 'Amenities' header, a two-column grid of amenity selection cards, and a bottom fixed 'Done' button.See the flow
    Hotels.com: Book hotels & more

    Top navigation bar, followed by a 'See more' link, an 'Amenities' header, a two-column grid of amenity selection cards, and a bottom fixed 'Done' button.

  3. Step 3 · 2:34

    Hotels.com: Book hotels & more: Header with search summary, horizontal filter bar, vertical list of hotel cards, and a floating map button at the bottom.See the flow
    Hotels.com: Book hotels & more

    Header with search summary, horizontal filter bar, vertical list of hotel cards, and a floating map button at the bottom.

  4. Step 4 · 2:37

    Hotels.com: Book hotels & more: Header with search summary, filter bar, list of property cards, and a floating map button at the bottom.See the flow
    Hotels.com: Book hotels & more

    Header with search summary, filter bar, list of property cards, and a floating map button at the bottom.

Transit • Subway & Bus Times: Searching for a Route

Open recorded flow

  1. Step 1 · 0:49

    Transit • Subway & Bus Times: Top banner, central map view with location marker, bottom search bar.See the flow
    Transit • Subway & Bus Times

    Top banner, central map view with location marker, bottom search bar.

  2. Step 2 · 0:59

    Transit • Subway & Bus Times: Green header with search bar, followed by a dismiss instruction card, then a list of contacts and search results.See the flow
    Transit • Subway & Bus Times

    Green header with search bar, followed by a dismiss instruction card, then a list of contacts and search results.

  3. Step 3 · 1:04

    Transit • Subway & Bus Times: Top map view with overlay search bar, followed by a vertical list of color-coded transit arrival cards.See the flow
    Transit • Subway & Bus Times

    Top map view with overlay search bar, followed by a vertical list of color-coded transit arrival cards.

  4. Step 4 · 1:20

    Transit • Subway & Bus Times: Green header with location inputs, followed by a white card containing a pull-to-dismiss handle, then categorized lists for contacts, stops, and search results.See the flow
    Transit • Subway & Bus Times

    Green header with location inputs, followed by a white card containing a pull-to-dismiss handle, then categorized lists for contacts, stops, and search results.

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.

Found an example you like?See the whole story.

See the full library See plans