screensdesign

Mobile location management flow examples

Weather Pro · Radar Alerts: Managing Locations

Open recorded flow
  1. Step 1 · 2:03

    Weather Pro · Radar Alerts: Top navigation bar followed by a search input, a location permission request card, and a list of saved locations.See the flow
    Weather Pro · Radar Alerts

    Top navigation bar followed by a search input, a location permission request card, and a list of saved locations.

  2. Step 2 · 2:10

    Weather Pro · Radar Alerts: Top search bar and location list, with a centered modal error message and a loading spinner below it.See the flow
    Weather Pro · Radar Alerts

    Top search bar and location list, with a centered modal error message and a loading spinner below it.

  3. Step 3 · 2:21

    Weather Pro · Radar Alerts: Top location and temperature header, followed by an hourly forecast card, a 10-day forecast list card, and a bottom loading indicator.See the flow
    Weather Pro · Radar Alerts

    Top location and temperature header, followed by an hourly forecast card, a 10-day forecast list card, and a bottom loading indicator.

  4. Step 4 · 2:27

    Weather Pro · Radar Alerts: Top header with location and temperature, followed by an hourly forecast card, a 10-day forecast list card, and a bottom map preview card.See the flow
    Weather Pro · Radar Alerts

    Top header with location and temperature, followed by an hourly forecast card, a 10-day forecast list card, and a bottom map preview card.

Transit • Subway & Bus Times: Setting Favorite Locations

Open recorded flow
  1. Step 1 · 6:30

    Transit • Subway & Bus Times: Green header with search bar followed by a vertical list of action buttons and recent search history items.See the flow
    Transit • Subway & Bus Times

    Green header with search bar followed by a vertical list of action buttons and recent search history items.

  2. Step 2 · 6:32

    Transit • Subway & Bus Times: Top green header with search input, followed by a vertical list of location options, a 'RECENT' section, and a system keyboard at the bottom.See the flow
    Transit • Subway & Bus Times

    Top green header with search input, followed by a vertical list of location options, a 'RECENT' section, and a system keyboard at the bottom.

  3. Step 3 · 6:34

    Transit • Subway & Bus Times: A modal overlay centered on the screen, appearing over a background search interface.See the flow
    Transit • Subway & Bus Times

    A modal overlay centered on the screen, appearing over a background search interface.

  4. Step 4 · 6:40

    Transit • Subway & Bus Times: Green header with search input, followed by a list of location options, a 'RECENT' section, and a system keyboard at the bottom.See the flow
    Transit • Subway & Bus Times

    Green header with search input, followed by a list of location options, a 'RECENT' section, and a system keyboard at the bottom.

  5. Step 5 · 6:44

    Transit • Subway & Bus Times: A modal overlay centered on the screen, appearing over a background list of location search options.See the flow
    Transit • Subway & Bus Times

    A modal overlay centered on the screen, appearing over a background list of location search options.

Gaia GPS: Mobile Trail Maps: Managing a Waypoint

Open recorded flow
  1. Step 1 · 2:57

    Gaia GPS: Mobile Trail Maps: Top dashboard bar, central map view, bottom sheet with location details, action buttons, and a bottom info card.See the flow
    Gaia GPS: Mobile Trail Maps

    Top dashboard bar, central map view, bottom sheet with location details, action buttons, and a bottom info card.

  2. Step 2 · 3:19

    Gaia GPS: Mobile Trail Maps: Top data dashboard, map background with notification card, central modal, bottom waypoint detail card, and bottom navigation bar.See the flow
    Gaia GPS: Mobile Trail Maps

    Top data dashboard, map background with notification card, central modal, bottom waypoint detail card, and bottom navigation bar.

  3. Step 3 · 3:22

    Gaia GPS: Mobile Trail Maps: System permission modal centered over a map-based navigation dashboard with a bottom navigation bar.See the flow
    Gaia GPS: Mobile Trail Maps

    System permission modal centered over a map-based navigation dashboard with a bottom navigation bar.

  4. Step 4 · 3:27

    Gaia GPS: Mobile Trail Maps: Top navigation bar followed by a grid of image thumbnails.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar followed by a grid of image thumbnails.

  5. Step 5 · 3:31

    Gaia GPS: Mobile Trail Maps: A modal bottom sheet containing a header, action buttons, a photo, coordinate/elevation data, and a list of settings, overlaid on a map interface with a bottom navigation bar.See the flow
    Gaia GPS: Mobile Trail Maps

    A modal bottom sheet containing a header, action buttons, a photo, coordinate/elevation data, and a list of settings, overlaid on a map interface with a bottom navigation bar.

  6. Step 6 · 3:37

    Gaia GPS: Mobile Trail Maps: Top header with title and close button, followed by a row of action buttons, a central image, geographical data text, and a vertical list of action buttons.See the flow
    Gaia GPS: Mobile Trail Maps

    Top header with title and close button, followed by a row of action buttons, a central image, geographical data text, and a vertical list of action buttons.

  7. Step 7 · 3:40

    Gaia GPS: Mobile Trail Maps: Top header with waypoint info, action buttons, image preview, data list, and bottom navigation bar. A modal alert is centered on top.See the flow
    Gaia GPS: Mobile Trail Maps

    Top header with waypoint info, action buttons, image preview, data list, and bottom navigation bar. A modal alert is centered on top.

  8. Step 8 · 3:45

    Gaia GPS: Mobile Trail Maps: Top navigation bar with title and actions, followed by a search input field, and a large empty content area.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar with title and actions, followed by a search input field, and a large empty content area.

  9. Step 9 · 3:49

    Gaia GPS: Mobile Trail Maps: Top navigation bar with 'Cancel' and 'New Folder' icon, followed by a search bar, and a centered modal dialog for folder creation over a blurred background.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar with 'Cancel' and 'New Folder' icon, followed by a search bar, and a centered modal dialog for folder creation over a blurred background.

  10. Step 10 · 4:02

    Gaia GPS: Mobile Trail Maps: Top navigation bar with title and action button, followed by a large text input area, and a system keyboard at the bottom.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar with title and action button, followed by a large text input area, and a system keyboard at the bottom.

  11. Step 11 · 4:07

    Gaia GPS: Mobile Trail Maps: Header with title and close button, followed by a row of action buttons, a large image, text data, and a vertical list of action buttons.See the flow
    Gaia GPS: Mobile Trail Maps

    Header with title and close button, followed by a row of action buttons, a large image, text data, and a vertical list of action buttons.

Found an example you like?See the whole story.