Mobile goal setting flow examples

Goal setting flow examples

Search the library

Calorie Counter by Numify: Goals & Activity Quiz

Open recorded flow

Step 1 · 0:53
See the flow
Calorie Counter by Numify
Top progress bar, central icon and data display, explanatory text block, and bottom navigation bar with back and next buttons.
Step 2 · 0:56
See the flow
Calorie Counter by Numify
Top image, middle text block, bottom navigation row.
Step 3 · 1:01
See the flow
Calorie Counter by Numify
Progress bar at top, question text, numeric input field, unit toggle, goal suggestion card, navigation buttons, and numeric keypad at the bottom.
Step 4 · 1:04
See the flow
Calorie Counter by Numify
Top image area, central text block, bottom navigation bar with two buttons.
Step 5 · 1:06
See the flow
Calorie Counter by Numify
The screen is vertically organized with a top graphic area, a central text block, and a bottom navigation bar with buttons.
Step 6 · 1:10
See the flow
Calorie Counter by Numify
Progress bar at top, followed by header and subtext, a vertical list of three selection cards, and a bottom navigation row with back and next buttons.
Step 7 · 1:12
See the flow
Calorie Counter by Numify
Top image, middle text content, bottom navigation bar with back and next buttons.
Step 8 · 1:15
See the flow
Calorie Counter by Numify
Progress bar at top, title and description in the upper middle, numerical input field in the center, navigation buttons below, and a numeric keypad at the bottom.
Step 9 · 1:20
See the flow
Calorie Counter by Numify
Progress bar at top, header text, subtext, vertical list of four selection cards, and a bottom navigation bar with back and next buttons.
Step 10 · 1:25
See the flow
Calorie Counter by Numify
Progress bar at top, centered title and subtitle, vertical list of selection buttons in the center, and navigation buttons at the bottom.
Step 11 · 1:30
See the flow
Calorie Counter by Numify
Progress bar at top, centered question text, two selection cards in the middle, and a bottom navigation bar with back and next buttons.

Budget app - spending tracker: Creating a Savings Goal

Open recorded flow

Step 1 · 3:37
See the flow
Budget app - spending tracker
A top-aligned purple summary card followed by a centered empty state illustration and instructional text.
Step 2 · 3:39
See the flow
Budget app - spending tracker
A modal window with a header containing a close button and title, followed by two selectable list items.
Step 3 · 4:22
See the flow
Budget app - spending tracker
A modal window containing a header with a close button and title, followed by a vertical list of labeled input fields, ending with a large primary action button at the bottom.

Zumba - Dance Fitness Workout: Primary Goal Selection

Open recorded flow

Step 1 · 0:46
See the flow
Zumba - Dance Fitness Workout
Top progress bar, skip button, header text, list of four selectable goal cards, and a bottom fixed action button.
Step 2 · 0:48
See the flow
Zumba - Dance Fitness Workout
Top progress bar and skip button, central question header, selectable goal card, bottom informational card with illustration, and a large bottom CTA button.

Calorie Counter by Numify: Welcome & Initial Goal Setting

Open recorded flow

Step 1 · 0:05
See the flow
Calorie Counter by Numify
Top illustration, middle headline, primary CTA button, bottom sign-in link and legal text.
Step 2 · 0:10
See the flow
Calorie Counter by Numify
Top progress bar, centered heading, vertical list of three selection cards, bottom navigation row with back and next buttons.
Step 3 · 0:15
See the flow
Calorie Counter by Numify
Progress bar at top, followed by title and subtitle, a vertical list of selection cards, and a bottom navigation row with back and next buttons.
Step 4 · 0:21
See the flow
Calorie Counter by Numify
Progress bar at top, header text, list of selectable goal cards, bottom navigation with back and next buttons.