screensdesign

Mobile community and challenge participation flow examples

Map My Run GPS Running Tracker: Exploring & Joining Challenges

Open recorded flow
  1. Step 1 · 7:00

    Map My Run GPS Running Tracker: Header with title and description, followed by a featured challenge card, pagination dots, and an explore section header.See the flow
    Map My Run GPS Running Tracker

    Header with title and description, followed by a featured challenge card, pagination dots, and an explore section header.

  2. Step 2 · 7:06

    Map My Run GPS Running Tracker: Header image and branding at the top, followed by challenge description, milestones section, legal text with checkbox, and a full-width bottom CTA button.See the flow
    Map My Run GPS Running Tracker

    Header image and branding at the top, followed by challenge description, milestones section, legal text with checkbox, and a full-width bottom CTA button.

  3. Step 3 · 7:17

    Map My Run GPS Running Tracker: Top header image, followed by challenge title, requirements, progress circular chart, and bottom metrics.See the flow
    Map My Run GPS Running Tracker

    Top header image, followed by challenge title, requirements, progress circular chart, and bottom metrics.

  4. Step 4 · 7:19

    Map My Run GPS Running Tracker: Top navigation bar, followed by a Milestones section, a Leaderboard list, and a Challenge Overview text block at the bottom.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar, followed by a Milestones section, a Leaderboard list, and a Challenge Overview text block at the bottom.

  5. Step 5 · 7:25

    Map My Run GPS Running Tracker: Top navigation bar followed by a list of ranked users, with a floating action button at the bottom right.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar followed by a list of ranked users, with a floating action button at the bottom right.

  6. Step 6 · 7:31

    Map My Run GPS Running Tracker: Top navigation bar followed by a vertical stack of text sections (Overview, Rules, Prizes) and bottom action buttons.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar followed by a vertical stack of text sections (Overview, Rules, Prizes) and bottom action buttons.

  7. Step 7 · 7:47

    Map My Run GPS Running Tracker: Header with notification icon, 'MY CHALLENGES' section with one large card, 'EXPLORE' section with a horizontal scrollable list of cards, and a bottom navigation bar.See the flow
    Map My Run GPS Running Tracker

    Header with notification icon, 'MY CHALLENGES' section with one large card, 'EXPLORE' section with a horizontal scrollable list of cards, and a bottom navigation bar.

  8. Step 8 · 7:49

    Map My Run GPS Running Tracker: Top milestone progress card, followed by an 'EXPLORE' section with a horizontal carousel, and a vertical list of navigation links at the bottom, anchored by a bottom navigation bar.See the flow
    Map My Run GPS Running Tracker

    Top milestone progress card, followed by an 'EXPLORE' section with a horizontal carousel, and a vertical list of navigation links at the bottom, anchored by a bottom navigation bar.

  9. Step 9 · 7:58

    Map My Run GPS Running Tracker: Header image, challenge title, requirements, milestones section, legal text, and a bottom action button.See the flow
    Map My Run GPS Running Tracker

    Header image, challenge title, requirements, milestones section, legal text, and a bottom action button.

  10. Step 10 · 8:03

    Map My Run GPS Running Tracker: Top navigation bar, hero image, challenge description, circular progress indicator, and bottom metrics summary.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar, hero image, challenge description, circular progress indicator, and bottom metrics summary.

Map My Run GPS Running Tracker: Creating a Custom Challenge

Open recorded flow
  1. Step 1 · 8:10

    Map My Run GPS Running Tracker: Header with back button and title, followed by centered instructional text and a call-to-action button.See the flow
    Map My Run GPS Running Tracker

    Header with back button and title, followed by centered instructional text and a call-to-action button.

  2. Step 2 · 8:18

    Map My Run GPS Running Tracker: Top navigation bar with back button and title, followed by a vertical list of selectable options.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar with back button and title, followed by a vertical list of selectable options.

  3. Step 3 · 8:24

    Map My Run GPS Running Tracker: Top navigation bar with title followed by a vertical list of selectable options.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar with title followed by a vertical list of selectable options.

  4. Step 4 · 8:29

    Map My Run GPS Running Tracker: Header with back button and title, followed by a hero banner, a list of form fields, a date picker section, and a bottom action button.See the flow
    Map My Run GPS Running Tracker

    Header with back button and title, followed by a hero banner, a list of form fields, a date picker section, and a bottom action button.

  5. Step 5 · 8:40

    Map My Run GPS Running Tracker: Top navigation bar, search input field, list of selectable friends, and a bottom fixed action button.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar, search input field, list of selectable friends, and a bottom fixed action button.

  6. Step 6 · 8:42

    Map My Run GPS Running Tracker: Top navigation bar, followed by a hero banner, a vertical list of form inputs and settings, and a bottom primary action button.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar, followed by a hero banner, a vertical list of form inputs and settings, and a bottom primary action button.

  7. Step 7 · 8:44

    Map My Run GPS Running Tracker: Top navigation bar, followed by a hero banner, challenge details text, an invited user list, and a bottom action button.See the flow
    Map My Run GPS Running Tracker

    Top navigation bar, followed by a hero banner, challenge details text, an invited user list, and a bottom action button.

Found an example you like?See the whole story.