Mobile settings flow examples

Settings flow examples

Step 1 · 4:05
See the flow
v0
Search bar at top, list of recent items below, modal overlay at bottom, settings and credits at bottom corners.
Step 2 · 4:07
See the flow
v0
Top search bar, content list in the middle, modal overlay in the center, and bottom account/credit bar.
Step 3 · 4:13
See the flow
v0
A modal window with a header containing an avatar and username, followed by grouped list sections for Account, Usage, Billing, Notification Settings, and Preview Screen.
Step 4 · 4:20
See the flow
v0
A centered modal dialog box appears over a blurred background containing account information, with a keyboard occupying the bottom half of the screen.
Step 5 · 4:23
See the flow
v0
A vertical list of settings grouped by headers, with a close button at the top and account management actions at the bottom.

Step 1 · 13:35
See the flow
Everlook- Face & Body Editor
A header with a title and close button, followed by a large promotional card, then a vertical list of settings grouped by headers.
Step 2 · 13:42
See the flow
Everlook- Face & Body Editor
Top navigation bar with back button, followed by a tabbed segment control, and a vertical list of version history cards.

Step 1 · 4:24
See the flow
Yard AI: Backyard Design
A modal window with a header containing a close button and title, followed by a vertical list of settings options inside a rounded container.
Step 2 · 4:27
See the flow
Yard AI: Backyard Design
A settings list view is partially visible in the background, with a centered modal dialog box in the foreground.

Step 1 · 11:02
See the flow
Wikiloc - Trails of the World
Modal overlay with a top close button, two grouped lists of settings, a rating prompt, a log out button, and footer links/version info.
Step 2 · 11:04
See the flow
Wikiloc - Trails of the World
Top navigation bar with title followed by a centered white card containing three rows of user data.
Step 3 · 11:07
See the flow
Wikiloc - Trails of the World
Top header with back button and title, followed by a subscription status summary card, and a vertical list of feature cards.
Step 4 · 11:11
See the flow
Wikiloc - Trails of the World
Top navigation bar with back button and title, followed by a search input field, a section header, and a list of map items.
Step 5 · 11:14
See the flow
Wikiloc - Trails of the World
A centered modal card containing a header and a list of four preference rows.
Step 6 · 11:17
See the flow
Wikiloc - Trails of the World
Top navigation bar with back button and title, followed by a 'Manage your notifications' header, a 'Take a break' toggle, and a vertical list of notification preference rows.
Step 7 · 11:19
See the flow
Wikiloc - Trails of the World
A centered modal dialog box with a title, descriptive text, and a list of selectable time durations.
Step 8 · 11:26
See the flow
Wikiloc - Trails of the World
Top navigation bar with back button and title, followed by a text block, and a single list item below.

Step 1 · 22:40
See the flow
Yelp: Food, Services & Reviews
Top navigation bar, followed by a vertical list of settings options, and a footer with legal text and version info, ending with a bottom navigation bar.
Step 2 · 22:42
See the flow
Yelp: Food, Services & Reviews
Header title followed by a long paragraph of text, a link, two primary buttons, a list of four toggleable rows, and a final bottom action button.
Step 3 · 22:47
See the flow
Yelp: Food, Services & Reviews
Top navigation bar followed by a descriptive header, then a list of notification settings grouped by category, and a bottom navigation bar.
Step 4 · 22:53
See the flow
Yelp: Food, Services & Reviews
Top navigation bar followed by three grouped list sections containing notification settings, ending with a bottom navigation bar.
Step 5 · 22:59
See the flow
Yelp: Food, Services & Reviews
Top navigation bar, sub-header text, list item for account linking, and a bottom navigation bar.
Step 6 · 23:05
See the flow
Yelp: Food, Services & Reviews
Top header with back button and title, followed by a vertical list of privacy settings sections, and a bottom navigation bar.
Step 7 · 23:13
See the flow
Yelp: Food, Services & Reviews
Top navigation bar, content area with text, and a bottom navigation bar.
Step 8 · 23:15
See the flow
Yelp: Food, Services & Reviews
Top navigation bar, main content area with instructional text, centered confirmation modal, and bottom navigation bar.