screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile lesson flow examples

Search the library

Zutobi: Permit & Driving Prep: Taking a Lesson

Open recorded flow

  1. Step 1 · 1:22

    Zutobi: Permit & Driving Prep: Header with title and feedback button, followed by tabbed navigation, a hero course card, and a vertical list of lesson units.See the flow
    Zutobi: Permit & Driving Prep

    Header with title and feedback button, followed by tabbed navigation, a hero course card, and a vertical list of lesson units.

  2. Step 2 · 1:27

    Zutobi: Permit & Driving Prep: Top navigation bar with progress indicator, followed by a video player, informational text, and a bottom call-to-action button.See the flow
    Zutobi: Permit & Driving Prep

    Top navigation bar with progress indicator, followed by a video player, informational text, and a bottom call-to-action button.

  3. Step 3 · 1:32

    Zutobi: Permit & Driving Prep: A video player occupies the majority of the screen, with a vertical action bar on the left and a full-screen toggle in the bottom right.See the flow
    Zutobi: Permit & Driving Prep

    A video player occupies the majority of the screen, with a vertical action bar on the left and a full-screen toggle in the bottom right.

  4. Step 4 · 1:38

    Zutobi: Permit & Driving Prep: Top navigation bar, progress bar, collapsible summary section with icons, detailed list of steps, secondary collapsible section, and a bottom fixed action button.See the flow
    Zutobi: Permit & Driving Prep

    Top navigation bar, progress bar, collapsible summary section with icons, detailed list of steps, secondary collapsible section, and a bottom fixed action button.

  5. Step 5 · 1:46

    Zutobi: Permit & Driving Prep: Top navigation bar with title, progress bar, scrollable content area with collapsible sections, and a fixed bottom action button.See the flow
    Zutobi: Permit & Driving Prep

    Top navigation bar with title, progress bar, scrollable content area with collapsible sections, and a fixed bottom action button.

  6. Step 6 · 1:57

    Zutobi: Permit & Driving Prep: Top navigation bar, progress bar, instructional text, vertical list of expandable checklist items, and a bottom primary action button.See the flow
    Zutobi: Permit & Driving Prep

    Top navigation bar, progress bar, instructional text, vertical list of expandable checklist items, and a bottom primary action button.

  7. Step 7 · 2:02

    Zutobi: Permit & Driving Prep: Centered content with a top icon, header text, feedback stars, and a bottom action button.See the flow
    Zutobi: Permit & Driving Prep

    Centered content with a top icon, header text, feedback stars, and a bottom action button.

  8. Step 8 · 2:04

    Zutobi: Permit & Driving Prep: Top-aligned success message, followed by a star rating component, a text input field, and a bottom-aligned submit button.See the flow
    Zutobi: Permit & Driving Prep

    Top-aligned success message, followed by a star rating component, a text input field, and a bottom-aligned submit button.

CraftBook: Crochet Made Easy: Completing a Tutorial Project

Open recorded flow

  1. Step 1 · 2:07

    CraftBook: Crochet Made Easy: Top header, horizontal tutorial cards, promotional banner, search bar with filter, vertical pattern grid, bottom navigation bar.See the flow
    CraftBook: Crochet Made Easy

    Top header, horizontal tutorial cards, promotional banner, search bar with filter, vertical pattern grid, bottom navigation bar.

  2. Step 2 · 2:20

    CraftBook: Crochet Made Easy: Top navigation bar with title, central image, lower section for preparation details, and a bottom modal overlay for tools.See the flow
    CraftBook: Crochet Made Easy

    Top navigation bar with title, central image, lower section for preparation details, and a bottom modal overlay for tools.

  3. Step 3 · 2:32

    CraftBook: Crochet Made Easy: Video player occupies the center, with playback controls overlaid in the middle and utility icons in the bottom right corner. A vertical progress bar is on the left edge.See the flow
    CraftBook: Crochet Made Easy

    Video player occupies the center, with playback controls overlaid in the middle and utility icons in the bottom right corner. A vertical progress bar is on the left edge.

  4. Step 4 · 3:03

    CraftBook: Crochet Made Easy: The screen is vertically stacked with a feedback section at the top, a community sharing section in the middle, and a profile/save section at the bottom.See the flow
    CraftBook: Crochet Made Easy

    The screen is vertically stacked with a feedback section at the top, a community sharing section in the middle, and a profile/save section at the bottom.

Tuner Pro: Guitar Tuner & Tab: Taking a Lesson

Open recorded flow

  1. Step 1 · 1:25

    Tuner Pro: Guitar Tuner & Tab: Header with title and streak counter, followed by a large featured course card, a 'Start course' button, a 'Next steps' section header, and a second course card, with a bottom navigation bar at the base.See the flow
    Tuner Pro: Guitar Tuner & Tab

    Header with title and streak counter, followed by a large featured course card, a 'Start course' button, a 'Next steps' section header, and a second course card, with a bottom navigation bar at the base.

  2. Step 2 · 1:33

    Tuner Pro: Guitar Tuner & Tab: Top navigation bar, central instructional area with guitar string visualization, and a bottom progress indicator.See the flow
    Tuner Pro: Guitar Tuner & Tab

    Top navigation bar, central instructional area with guitar string visualization, and a bottom progress indicator.

  3. Step 3 · 1:35

    Tuner Pro: Guitar Tuner & Tab: Top navigation bar with title, central area with guitar string visualization and instructional tooltip, and a bottom progress bar.See the flow
    Tuner Pro: Guitar Tuner & Tab

    Top navigation bar with title, central area with guitar string visualization and instructional tooltip, and a bottom progress bar.

  4. Step 4 · 1:42

    Tuner Pro: Guitar Tuner & Tab: Top navigation icon, centered success message and title, central graphic card, and bottom primary action button.See the flow
    Tuner Pro: Guitar Tuner & Tab

    Top navigation icon, centered success message and title, central graphic card, and bottom primary action button.

  5. Step 5 · 1:47

    Tuner Pro: Guitar Tuner & Tab: A centered speech bubble containing text, with a large call-to-action button at the bottom.See the flow
    Tuner Pro: Guitar Tuner & Tab

    A centered speech bubble containing text, with a large call-to-action button at the bottom.

  6. Step 6 · 1:51

    Tuner Pro: Guitar Tuner & Tab: The screen features a centered flame icon, a large number, a text label, a weekly progress card, and a bottom-aligned call-to-action button.See the flow
    Tuner Pro: Guitar Tuner & Tab

    The screen features a centered flame icon, a large number, a text label, a weekly progress card, and a bottom-aligned call-to-action button.

  7. Step 7 · 1:56

    Tuner Pro: Guitar Tuner & Tab: Header at top, list of selectable streak options in the middle, a floating tooltip below the list, and a large button at the bottom.See the flow
    Tuner Pro: Guitar Tuner & Tab

    Header at top, list of selectable streak options in the middle, a floating tooltip below the list, and a large button at the bottom.

  8. Step 8 · 2:35

    Tuner Pro: Guitar Tuner & Tab: Top navigation, header text, central circular score display, three metric cards in a row, and a bottom action button.See the flow
    Tuner Pro: Guitar Tuner & Tab

    Top navigation, header text, central circular score display, three metric cards in a row, and a bottom action button.

Ascend: Bible Game: Completing a Lesson

Open recorded flow

  1. Step 1 · 8:38

    Ascend: Bible Game: Top navigation bar with progress indicator, central illustrative artwork with overlay text, and a primary call-to-action button below the text.See the flow
    Ascend: Bible Game

    Top navigation bar with progress indicator, central illustrative artwork with overlay text, and a primary call-to-action button below the text.

  2. Step 2 · 8:44

    Ascend: Bible Game: Top navigation bar, central content card with verse text, and a large bottom action button.See the flow
    Ascend: Bible Game

    Top navigation bar, central content card with verse text, and a large bottom action button.

  3. Step 3 · 8:48

    Ascend: Bible Game: Top progress bar, followed by a floating tooltip, a central question card, a list of four answer cards, and a bottom action button.See the flow
    Ascend: Bible Game

    Top progress bar, followed by a floating tooltip, a central question card, a list of four answer cards, and a bottom action button.

  4. Step 4 · 8:56

    Ascend: Bible Game: Top progress bar, central question with character, list of answer options, and a bottom modal overlay for feedback.See the flow
    Ascend: Bible Game

    Top progress bar, central question with character, list of answer options, and a bottom modal overlay for feedback.

  5. Step 5 · 9:01

    Ascend: Bible Game: Top progress bar, central character and question card, bottom answer buttons, and a bottom-anchored success modal.See the flow
    Ascend: Bible Game

    Top progress bar, central character and question card, bottom answer buttons, and a bottom-anchored success modal.

  6. Step 6 · 9:24

    Ascend: Bible Game: Top navigation bar with back button, progress bar, and heart icon. Central illustration with overlay text and a primary call-to-action button below the text.See the flow
    Ascend: Bible Game

    Top navigation bar with back button, progress bar, and heart icon. Central illustration with overlay text and a primary call-to-action button below the text.

  7. Step 7 · 9:37

    Ascend: Bible Game: Top progress bar, central character illustration, verse text card, inactive answer buttons, and a large bottom modal for feedback.See the flow
    Ascend: Bible Game

    Top progress bar, central character illustration, verse text card, inactive answer buttons, and a large bottom modal for feedback.

  8. Step 8 · 10:02

    Ascend: Bible Game: Top progress bar, character and speech bubble, central quiz card with word options, and a large green bottom modal for feedback.See the flow
    Ascend: Bible Game

    Top progress bar, character and speech bubble, central quiz card with word options, and a large green bottom modal for feedback.

Found an example you like?See the whole story.

See the full library See plans