Mobile collection organization flow examples

Collection organization flow examples

Step 1 · 4:58
See the flow
Good Food: Recipe Finder
Top navigation header, filter tabs, sorting controls, two-column recipe card grid, and bottom navigation bar.
Step 2 · 5:00
See the flow
Good Food: Recipe Finder
Top navigation tabs, sorting controls, two-column grid of recipe cards, bottom navigation bar.
Step 3 · 5:03
See the flow
Good Food: Recipe Finder
A modal overlay centered on a background page containing a header, tab navigation, and a grid of recipe cards.
Step 4 · 5:14
See the flow
Good Food: Recipe Finder
Header with title and search, tab bar, sorting controls, vertical list of recipe cards, bottom navigation bar.
Step 5 · 5:15
See the flow
Good Food: Recipe Finder
Header with title and search, followed by filter tabs, sort control, and a vertical list of recipe cards, ending with a bottom navigation bar.
Step 6 · 5:20
See the flow
Good Food: Recipe Finder
Header with title and add button, followed by a tab bar, a sorting/view control row, a single collection card, and a bottom navigation bar.
Step 7 · 5:26
See the flow
Good Food: Recipe Finder
Top navigation bar, followed by a two-column grid of recipe cards, and a bottom navigation bar.
Step 8 · 5:27
See the flow
Good Food: Recipe Finder
Top navigation bar, followed by a grid of recipe cards, with a floating menu overlay, and a bottom navigation bar.
Step 9 · 5:29
See the flow
Good Food: Recipe Finder
Top navigation bar, main content area with recipe cards, centered modal dialog, and bottom navigation bar.

Step 1 · 8:59
See the flow
ZEDGE™ Ringtones & Wallpapers
Top navigation bar followed by a large action button, then a vertical list of collection cards.
Step 2 · 9:06
See the flow
ZEDGE™ Ringtones & Wallpapers
Top navigation bar followed by a collection header and a two-column grid of images.
Step 3 · 9:07
See the flow
ZEDGE™ Ringtones & Wallpapers
Top navigation bar, collection header with cover image and title, grid of items, and a bottom action sheet modal.
Step 4 · 9:12
See the flow
ZEDGE™ Ringtones & Wallpapers
Top navigation bar with 'Done' and 'Reorder Items', followed by a collection header, and a two-column grid of content cards.
Step 5 · 9:17
See the flow
ZEDGE™ Ringtones & Wallpapers
Top navigation bar followed by a collection header and a two-column grid of image cards.
Step 6 · 9:19
See the flow
ZEDGE™ Ringtones & Wallpapers
Top navigation bar followed by a collection header and a grid of images, with a centered modal overlay.

Step 1 · 18:10
See the flow
Yelp: Food, Services & Reviews
Top navigation bar followed by three distinct horizontal content sections: Featured, My Collections, and Following.
Step 2 · 18:23
See the flow
Yelp: Food, Services & Reviews
A modal overlay centered on the screen, appearing over an activity feed list.
Step 3 · 18:26
See the flow
Yelp: Food, Services & Reviews
Toast notification at the top, followed by a vertical feed of activity cards, with a fixed bottom navigation bar.
Step 4 · 18:53
See the flow
Yelp: Food, Services & Reviews
A modal window centered over a background list of collection cards.
Step 5 · 18:58
See the flow
Yelp: Food, Services & Reviews
Header with title and actions, followed by collection metadata, a primary action button, an empty state message, and a bottom navigation bar.
Step 6 · 19:19
See the flow
Yelp: Food, Services & Reviews
A background page showing collection details with a centered modal overlay for sharing.
Step 7 · 19:21
See the flow
Yelp: Food, Services & Reviews
Top toast notification, header with collection details, primary action button, empty state message with secondary action button, and bottom navigation.
Step 8 · 19:26
See the flow
Yelp: Food, Services & Reviews
Top navigation bar, header with collection info, empty state message with search button, and bottom navigation bar.