screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile route planning flow examples

Search the library

Windy.app — Wind, Tides, Radar: Creating a Route Forecast

Open recorded flow

  1. Step 1 · 8:45

    Windy.app — Wind, Tides, Radar: A modal window centered on the screen containing a header with a close button and a vertical list of three action items.See the flow
    Windy.app — Wind, Tides, Radar

    A modal window centered on the screen containing a header with a close button and a vertical list of three action items.

  2. Step 2 · 8:49

    Windy.app — Wind, Tides, Radar: Top map area, followed by transport mode tabs, route input fields, and a bottom primary action button.See the flow
    Windy.app — Wind, Tides, Radar

    Top map area, followed by transport mode tabs, route input fields, and a bottom primary action button.

  3. Step 3 · 8:52

    Windy.app — Wind, Tides, Radar: Top search bar followed by a vertical list of two location selection options.See the flow
    Windy.app — Wind, Tides, Radar

    Top search bar followed by a vertical list of two location selection options.

  4. Step 4 · 9:09

    Windy.app — Wind, Tides, Radar: The screen consists of a full-screen map view with a floating modal at the bottom containing instructions and a confirmation button.See the flow
    Windy.app — Wind, Tides, Radar

    The screen consists of a full-screen map view with a floating modal at the bottom containing instructions and a confirmation button.

  5. Step 5 · 9:38

    Windy.app — Wind, Tides, Radar: Top navigation bar, large map view occupying the upper two-thirds, and a white bottom sheet containing route planning controls and a primary action button.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, large map view occupying the upper two-thirds, and a white bottom sheet containing route planning controls and a primary action button.

  6. Step 6 · 9:43

    Windy.app — Wind, Tides, Radar: Map occupies the top half, followed by a white bottom sheet containing mode selection, waypoint inputs, and a primary action button.See the flow
    Windy.app — Wind, Tides, Radar

    Map occupies the top half, followed by a white bottom sheet containing mode selection, waypoint inputs, and a primary action button.

  7. Step 7 · 9:45

    Windy.app — Wind, Tides, Radar: Top navigation bar, map view, mode selection tabs, and a large promotional card at the bottom.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, map view, mode selection tabs, and a large promotional card at the bottom.

  8. Step 8 · 9:51

    Windy.app — Wind, Tides, Radar: Top map view followed by a bottom panel containing route summary metrics and an hourly weather forecast table.See the flow
    Windy.app — Wind, Tides, Radar

    Top map view followed by a bottom panel containing route summary metrics and an hourly weather forecast table.

  9. Step 9 · 10:01

    Windy.app — Wind, Tides, Radar: Top navigation bar, map background, centered modal dialog, and bottom keyboard overlay.See the flow
    Windy.app — Wind, Tides, Radar

    Top navigation bar, map background, centered modal dialog, and bottom keyboard overlay.

Spoke Route Planner: Creating a Route

Open recorded flow

  1. Step 1 · 0:42

    Spoke Route Planner: Modal sheet with a header, three grouped list sections, and a bottom action area.See the flow
    Spoke Route Planner

    Modal sheet with a header, three grouped list sections, and a bottom action area.

  2. Step 2 · 0:53

    Spoke Route Planner: Search bar at the top, followed by a header, a list of address results, and a keyboard at the bottom.See the flow
    Spoke Route Planner

    Search bar at the top, followed by a header, a list of address results, and a keyboard at the bottom.

  3. Step 3 · 1:01

    Spoke Route Planner: A main form screen with a modal bottom sheet overlaying the lower half.See the flow
    Spoke Route Planner

    A main form screen with a modal bottom sheet overlaying the lower half.

  4. Step 4 · 1:07

    Spoke Route Planner: Top search bar followed by a header and a vertical list of address results, with the system keyboard occupying the bottom half.See the flow
    Spoke Route Planner

    Top search bar followed by a header and a vertical list of address results, with the system keyboard occupying the bottom half.

  5. Step 5 · 1:12

    Spoke Route Planner: The screen consists of a background modal for route details and a foreground bottom sheet for time selection.See the flow
    Spoke Route Planner

    The screen consists of a background modal for route details and a foreground bottom sheet for time selection.

  6. Step 6 · 1:15

    Spoke Route Planner: A modal overlay containing a header, a time-picker wheel, and a primary action button at the bottom.See the flow
    Spoke Route Planner

    A modal overlay containing a header, a time-picker wheel, and a primary action button at the bottom.

  7. Step 7 · 1:19

    Spoke Route Planner: The screen features a header with a back button and title, followed by descriptive text, three input fields arranged vertically, and a large primary action button at the bottom.See the flow
    Spoke Route Planner

    The screen features a header with a back button and title, followed by descriptive text, three input fields arranged vertically, and a large primary action button at the bottom.

Gaia GPS: Mobile Trail Maps: Creating a Route

Open recorded flow

  1. Step 1 · 5:09

    Gaia GPS: Mobile Trail Maps: Top navigation bar, central map area with floating instructional card, and bottom panel containing elevation chart and routing controls.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar, central map area with floating instructional card, and bottom panel containing elevation chart and routing controls.

  2. Step 2 · 5:14

    Gaia GPS: Mobile Trail Maps: Top navigation bar, central map view with floating instructional card, bottom control panel with route mode selection and elevation profile.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar, central map view with floating instructional card, bottom control panel with route mode selection and elevation profile.

  3. Step 3 · 5:32

    Gaia GPS: Mobile Trail Maps: Top navigation bar, large map area in the center, elevation profile chart at the bottom, and a summary stats bar at the very bottom.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar, large map area in the center, elevation profile chart at the bottom, and a summary stats bar at the very bottom.

  4. Step 4 · 5:34

    Gaia GPS: Mobile Trail Maps: A modal window with a header containing navigation buttons and a title, followed by a vertical list of labeled input and selection fields.See the flow
    Gaia GPS: Mobile Trail Maps

    A modal window with a header containing navigation buttons and a title, followed by a vertical list of labeled input and selection fields.

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.

Found an example you like?See the whole story.

See the full library See plans