screensdesign

Mobile content download flow examples

bergfex: Hiking & Tracking: Downloading an Offline Map

Open recorded flow
  1. Step 1 · 1:54

    bergfex: Hiking & Tracking: A modal overlay centered on a map background, containing three grouped lists of settings.See the flow
    bergfex: Hiking & Tracking

    A modal overlay centered on a map background, containing three grouped lists of settings.

  2. Step 2 · 1:56

    bergfex: Hiking & Tracking: Top navigation bar with close and add buttons, followed by an informational card, and a centered empty state illustration with instructional text.See the flow
    bergfex: Hiking & Tracking

    Top navigation bar with close and add buttons, followed by an informational card, and a centered empty state illustration with instructional text.

  3. Step 3 · 2:26

    bergfex: Hiking & Tracking: The screen consists of a header title, a large central map area with a resizable selection overlay, and a bottom footer containing two side-by-side action buttons.See the flow
    bergfex: Hiking & Tracking

    The screen consists of a header title, a large central map area with a resizable selection overlay, and a bottom footer containing two side-by-side action buttons.

  4. Step 4 · 2:36

    bergfex: Hiking & Tracking: Top navigation bar, map background with selection overlay, centered modal, bottom navigation bar.See the flow
    bergfex: Hiking & Tracking

    Top navigation bar, map background with selection overlay, centered modal, bottom navigation bar.

Wallcraft – Wallpapers, live: Downloading a Wallpaper

Open recorded flow
  1. Step 1 · 0:27

    Wallcraft – Wallpapers, live: Top navigation bar, followed by an ad-toggle, a tabbed category bar, a filter dropdown, a promotional banner, and a multi-column grid of wallpaper images.See the flow
    Wallcraft – Wallpapers, live

    Top navigation bar, followed by an ad-toggle, a tabbed category bar, a filter dropdown, a promotional banner, and a multi-column grid of wallpaper images.

  2. Step 2 · 0:36

    Wallcraft – Wallpapers, live: A full-screen image background with a bottom-aligned modal sheet containing sign-in information and a primary action button.See the flow
    Wallcraft – Wallpapers, live

    A full-screen image background with a bottom-aligned modal sheet containing sign-in information and a primary action button.

  3. Step 3 · 0:46

    Wallcraft – Wallpapers, live: A centered modal window containing app branding, user details, and privacy selection options, with a primary action button at the bottom.See the flow
    Wallcraft – Wallpapers, live

    A centered modal window containing app branding, user details, and privacy selection options, with a primary action button at the bottom.

  4. Step 4 · 0:49

    Wallcraft – Wallpapers, live: Top navigation bar, central image preview with floating action buttons, and a bottom horizontal image carousel.See the flow
    Wallcraft – Wallpapers, live

    Top navigation bar, central image preview with floating action buttons, and a bottom horizontal image carousel.

  5. Step 5 · 0:52

    Wallcraft – Wallpapers, live: Top navigation bar, central permission modal, bottom action bar, and background wallpaper preview.See the flow
    Wallcraft – Wallpapers, live

    Top navigation bar, central permission modal, bottom action bar, and background wallpaper preview.

  6. Step 6 · 0:57

    Wallcraft – Wallpapers, live: Full-screen image preview with a bottom-aligned modal overlay.See the flow
    Wallcraft – Wallpapers, live

    Full-screen image preview with a bottom-aligned modal overlay.

  7. Step 7 · 1:00

    Wallcraft – Wallpapers, live: Top navigation bar, central modal overlay, middle action buttons, bottom wallpaper carousel.See the flow
    Wallcraft – Wallpapers, live

    Top navigation bar, central modal overlay, middle action buttons, bottom wallpaper carousel.

ZEDGE™ Ringtones & Wallpapers: Browsing & Downloading Content

Open recorded flow
  1. Step 1 · 0:53

    ZEDGE™ Ringtones & Wallpapers: Top header with logo and currency, followed by horizontal featured cards, vertical 'For You' content, and a grid of 'Popular Collections' at the bottom, anchored by a persistent bottom navigation bar.See the flow
    ZEDGE™ Ringtones & Wallpapers

    Top header with logo and currency, followed by horizontal featured cards, vertical 'For You' content, and a grid of 'Popular Collections' at the bottom, anchored by a persistent bottom navigation bar.

  2. Step 2 · 1:17

    ZEDGE™ Ringtones & Wallpapers: Logo at top, headline and subtext in center, primary login buttons below, secondary social login icons at the bottom.See the flow
    ZEDGE™ Ringtones & Wallpapers

    Logo at top, headline and subtext in center, primary login buttons below, secondary social login icons at the bottom.

  3. Step 3 · 2:49

    ZEDGE™ Ringtones & Wallpapers: Header with navigation and balance, central image card, bottom action bar with toast notification.See the flow
    ZEDGE™ Ringtones & Wallpapers

    Header with navigation and balance, central image card, bottom action bar with toast notification.

  4. Step 4 · 3:46

    ZEDGE™ Ringtones & Wallpapers: Top navigation bar, central image preview, and a bottom-anchored modal overlay containing creator info and unlock options.See the flow
    ZEDGE™ Ringtones & Wallpapers

    Top navigation bar, central image preview, and a bottom-anchored modal overlay containing creator info and unlock options.

Gaia GPS: Mobile Trail Maps: Downloading an Offline Map

Open recorded flow
  1. Step 1 · 4:11

    Gaia GPS: Mobile Trail Maps: Top data dashboard, central map view with modal overlay, bottom navigation bar.See the flow
    Gaia GPS: Mobile Trail Maps

    Top data dashboard, central map view with modal overlay, bottom navigation bar.

  2. Step 2 · 4:15

    Gaia GPS: Mobile Trail Maps: Top navigation bar with text and buttons, central map view with a resizable selection overlay, and a background topographic map.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar with text and buttons, central map view with a resizable selection overlay, and a background topographic map.

  3. Step 3 · 4:19

    Gaia GPS: Mobile Trail Maps: Top navigation bar, followed by a global toggle and resolution selector, then a scrollable list of map layers, and a summary footer.See the flow
    Gaia GPS: Mobile Trail Maps

    Top navigation bar, followed by a global toggle and resolution selector, then a scrollable list of map layers, and a summary footer.

  4. Step 4 · 4:23

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

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

  5. Step 5 · 4:56

    Gaia GPS: Mobile Trail Maps: A modal sheet with a header containing a close button and title, followed by a status summary, and a list of download items with progress bars.See the flow
    Gaia GPS: Mobile Trail Maps

    A modal sheet with a header containing a close button and title, followed by a status summary, and a list of download items with progress bars.

Found an example you like?See the whole story.