screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile map exploration flow examples

Search the library

Weather Pro · Radar Alerts: Exploring Interactive Maps

Open recorded flow

  1. Step 1 · 0:54

    Weather Pro · Radar Alerts: Full-screen map background with a floating control card at the bottom.See the flow
    Weather Pro · Radar Alerts

    Full-screen map background with a floating control card at the bottom.

  2. Step 2 · 0:58

    Weather Pro · Radar Alerts: Full-screen map background with a floating control panel at the bottom and navigation buttons at the top corners.See the flow
    Weather Pro · Radar Alerts

    Full-screen map background with a floating control panel at the bottom and navigation buttons at the top corners.

  3. Step 3 · 1:00

    Weather Pro · Radar Alerts: Map background with a floating layer selection menu in the top right and a time-scrubber card at the bottom.See the flow
    Weather Pro · Radar Alerts

    Map background with a floating layer selection menu in the top right and a time-scrubber card at the bottom.

  4. Step 4 · 1:02

    Weather Pro · Radar Alerts: Map background with a centered floating menu and a bottom control card.See the flow
    Weather Pro · Radar Alerts

    Map background with a centered floating menu and a bottom control card.

  5. Step 5 · 1:27

    Weather Pro · Radar Alerts: A map view occupies the background with a centered modal menu for layer selection and a bottom panel for time-based playback controls.See the flow
    Weather Pro · Radar Alerts

    A map view occupies the background with a centered modal menu for layer selection and a bottom panel for time-based playback controls.

Fishbrain - Fishing App: Explore Fishing Map

Open recorded flow

  1. Step 1 · 2:11

    Fishbrain - Fishing App: A centered loading spinner with text below it on a plain background.See the flow
    Fishbrain - Fishing App

    A centered loading spinner with text below it on a plain background.

  2. Step 2 · 2:37

    Fishbrain - Fishing App: Top half is a satellite map with floating action buttons; bottom half is a scrollable information card with location details, action buttons, and a photo grid.See the flow
    Fishbrain - Fishing App

    Top half is a satellite map with floating action buttons; bottom half is a scrollable information card with location details, action buttons, and a photo grid.

  3. Step 3 · 3:11

    Fishbrain - Fishing App: The screen is a modal with a header containing a close button and title, a segmented control for view switching, a descriptive text block, a time slider, and a scrollable list of fish species with associated bar charts.See the flow
    Fishbrain - Fishing App

    The screen is a modal with a header containing a close button and title, a segmented control for view switching, a descriptive text block, a time slider, and a scrollable list of fish species with associated bar charts.

Redfin: Buy, Sell & Rent Homes: Using Map Tools & Saving Searches

Open recorded flow

  1. Step 1 · 1:55

    Redfin: Buy, Sell & Rent Homes: Top search bar and filters, large central map area with floating tools, bottom list toggle, and bottom navigation bar.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top search bar and filters, large central map area with floating tools, bottom list toggle, and bottom navigation bar.

  2. Step 2 · 2:00

    Redfin: Buy, Sell & Rent Homes: Top search and filter bar, central map with floating action buttons and a modal overlay, bottom navigation bar.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top search and filter bar, central map with floating action buttons and a modal overlay, bottom navigation bar.

  3. Step 3 · 2:10

    Redfin: Buy, Sell & Rent Homes: Top search bar and filters, large central map area with floating controls, and a bottom navigation bar.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top search bar and filters, large central map area with floating controls, and a bottom navigation bar.

  4. Step 4 · 2:14

    Redfin: Buy, Sell & Rent Homes: Search bar and filters at the top, interactive map in the center with floating action buttons, and a bottom navigation bar.See the flow
    Redfin: Buy, Sell & Rent Homes

    Search bar and filters at the top, interactive map in the center with floating action buttons, and a bottom navigation bar.

  5. Step 5 · 2:23

    Redfin: Buy, Sell & Rent Homes: Top search bar, large central map area with drawing overlay, floating action buttons on the left, bottom list toggle, and bottom navigation bar.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top search bar, large central map area with drawing overlay, floating action buttons on the left, bottom list toggle, and bottom navigation bar.

  6. Step 6 · 2:26

    Redfin: Buy, Sell & Rent Homes: Top search bar, large central map area with floating action buttons, bottom list toggle, and bottom navigation bar.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top search bar, large central map area with floating action buttons, bottom list toggle, and bottom navigation bar.

  7. Step 7 · 2:34

    Redfin: Buy, Sell & Rent Homes: A map view background with a bottom-anchored modal sheet containing a form for saving search preferences.See the flow
    Redfin: Buy, Sell & Rent Homes

    A map view background with a bottom-anchored modal sheet containing a form for saving search preferences.

  8. Step 8 · 2:38

    Redfin: Buy, Sell & Rent Homes: Search bar and filters at the top, interactive map in the center, floating action buttons on the left, and bottom navigation bar.See the flow
    Redfin: Buy, Sell & Rent Homes

    Search bar and filters at the top, interactive map in the center, floating action buttons on the left, and bottom navigation bar.

Gaia GPS: Mobile Trail Maps: Managing Map Layers

Open recorded flow

  1. Step 1 · 6:51

    Gaia GPS: Mobile Trail Maps: Top dashboard bar, central map view, bottom sheet overlay with list of map layers.See the flow
    Gaia GPS: Mobile Trail Maps

    Top dashboard bar, central map view, bottom sheet overlay with list of map layers.

  2. Step 2 · 6:58

    Gaia GPS: Mobile Trail Maps: Top header with back button and title, followed by a search bar, a row of category icons, and two distinct list sections (Recommended and All Map Layers).See the flow
    Gaia GPS: Mobile Trail Maps

    Top header with back button and title, followed by a search bar, a row of category icons, and two distinct list sections (Recommended and All Map Layers).

  3. Step 3 · 7:00

    Gaia GPS: Mobile Trail Maps: Modal sheet with a header containing a back button and title, a search bar, and a scrollable list of map layer options.See the flow
    Gaia GPS: Mobile Trail Maps

    Modal sheet with a header containing a back button and title, a search bar, and a scrollable list of map layer options.

  4. Step 4 · 7:08

    Gaia GPS: Mobile Trail Maps: A modal dialog is centered over a background page containing a legend for map layers.See the flow
    Gaia GPS: Mobile Trail Maps

    A modal dialog is centered over a background page containing a legend for map layers.

  5. Step 5 · 7:20

    Gaia GPS: Mobile Trail Maps: Top navigation bar with action buttons, followed by a central map area with a resizable selection rectangle.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar with action buttons, followed by a central map area with a resizable selection rectangle.

  6. Step 6 · 7:28

    Gaia GPS: Mobile Trail Maps: Top navigation bar followed by a vertical list of form fields and map download options.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar followed by a vertical list of form fields and map download options.

  7. Step 7 · 7:33

    Gaia GPS: Mobile Trail Maps: Top navigation bar followed by a status summary and a vertical list of download progress items.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar followed by a status summary and a vertical list of download progress items.

  8. Step 8 · 7:41

    Gaia GPS: Mobile Trail Maps: Top header with two buttons, followed by an 'ACTIVE' section, an 'INACTIVE' section with a list of map layers, and a bottom 'Add map layers' button.See the flow
    Gaia GPS: Mobile Trail Maps

    Top header with two buttons, followed by an 'ACTIVE' section, an 'INACTIVE' section with a list of map layers, and a bottom 'Add map layers' button.

Found an example you like?See the whole story.

See the full library See plans