Mobile content personalization flow examples

Content personalization flow examples

Step 1 · 0:58
See the flow
The Guardian - US & World News
Top navigation bar, hero image, article title and body text, author follow section, bottom navigation bar.
Step 2 · 1:01
See the flow
The Guardian - US & World News
Top navigation bar, hero image, article title and body text, author follow section, bottom navigation bar.
Step 3 · 1:06
See the flow
The Guardian - US & World News
Header with author name and follow controls, followed by a vertical list of article cards with images and text.
Step 4 · 1:11
See the flow
The Guardian - US & World News
Top back button, author header, article list, centered system modal, bottom navigation bar.
Step 5 · 1:14
See the flow
The Guardian - US & World News
Header with author name, followed by status indicators, then a vertical list of article cards, and a bottom navigation bar.

Step 1 · 0:22
See the flow
Eppika: Read & Learn Languages
Top progress bar, centered book card with title and author, bottom row of two large action buttons.
Step 2 · 0:24
See the flow
Eppika: Read & Learn Languages
Top progress bar, central book card with title and author, bottom dual-button selection area.
Step 3 · 0:36
See the flow
Eppika: Read & Learn Languages
Top progress bar, centered title and instruction text, central book card with image and metadata, and two side-by-side buttons at the bottom.

Step 1 · 1:29
See the flow
SmartNews: Now in Spanish
A bottom sheet modal containing a header with three action buttons followed by a vertical list of preference settings.
Step 2 · 1:33
See the flow
SmartNews: Now in Spanish
Top header with search, tab bar, publisher chips, vertical list of news articles, and bottom navigation bar.
Step 3 · 1:40
See the flow
SmartNews: Now in Spanish
A bottom sheet modal with a header row of three actions, followed by a vertical list of preference toggles.

Step 1 · 0:27
See the flow
Heyyyy: Stories that text back
Header text at the top, large central image with selection buttons overlaid, and a large primary CTA button at the bottom.
Step 2 · 0:35
See the flow
Heyyyy: Stories that text back
Top header text, large central image, row of selection buttons, and a bottom primary CTA button.

Step 1 · 2:25
See the flow
South China Morning Post: News
Top header with skip button, central carousel of app mockups, bottom selection card with category options, and a bottom-aligned primary action button.
Step 2 · 2:34
See the flow
South China Morning Post: News
Top header with skip button, central product illustration, two selection cards in the middle, and a bottom primary action button.
Step 3 · 2:47
See the flow
South China Morning Post: News
Header text followed by categorized lists of selectable topic pills, ending with a bottom action button.

Step 1 · 4:36
See the flow
Ascend: Bible Game
Header text followed by a 'Pick for me' button, a row of three selection slots, and a grid of book recommendation cards.
Step 2 · 4:39
See the flow
Ascend: Bible Game
Three cards arranged in a grid-like layout (two top, one centered below) followed by a large bottom CTA button.

Step 1 · 1:33
See the flow
Vivino: Drink The Right Wine
A modal-style card overlaying a background, containing a header, a preference prompt, a descriptive text block, an insights list, and a drinking window section.
Step 2 · 1:35
See the flow
Vivino: Drink The Right Wine
Top navigation bar followed by a wine match card, a descriptive text block, and a bottom sheet with selection options.
Step 3 · 1:38
See the flow
Vivino: Drink The Right Wine
Top banner, followed by a preference card, a detailed text description, an insights list, and a partial drinking window section.
Step 4 · 2:13
See the flow
Vivino: Drink The Right Wine
Top navigation bar with tabs, a green header section for preference status, a central content area with an illustration and text, and a bottom primary action button.
Step 5 · 2:16
See the flow
Vivino: Drink The Right Wine
Top search bar followed by an alphabetical list of items.
Step 6 · 2:19
See the flow
Vivino: Drink The Right Wine
Centered content with a top avatar, heading, subtext, two sentiment buttons, and a bottom primary action button.
Step 7 · 2:21
See the flow
Vivino: Drink The Right Wine
Top navigation bar, central content card, bottom feedback buttons.