Mobile article and story reading flow examples

Article and story reading flow examples

Search the library

Particle: Personalized News: Read Article

Open recorded flow

Step 1 · 1:17
See the flow
Particle: Personalized News
Header with greeting and profile, followed by a large hero news card, a section header, and a horizontal carousel of smaller news cards, with a fixed bottom navigation bar.
Step 2 · 1:20
See the flow
Particle: Personalized News
Top hero image with headline, followed by a bulleted summary list, and a bottom section for article count and interaction.
Step 3 · 1:37
See the flow
Particle: Personalized News
Top hero image with headline, followed by a publisher spectrum info card, then a bulleted list of summary points, and a floating action button at the bottom.
Step 4 · 1:42
See the flow
Particle: Personalized News
Top hero image and headline, followed by an overview section, a central political spectrum visualization, and a list of related articles at the bottom.
Step 5 · 1:47
See the flow
Particle: Personalized News
Top header with image and headline, followed by an overview section, and a scrollable list of related articles at the bottom.
Step 6 · 1:54
See the flow
Particle: Personalized News
Top navigation bar, app promotion banner, news site header, article headline, author byline, key points summary, and bottom browser navigation bar.
Step 7 · 2:04
See the flow
Particle: Personalized News
Top hero image with headline, followed by an overview section, a search/filter bar, a main content card, and a list of related stories.
Step 8 · 2:07
See the flow
Particle: Personalized News
Top hero image with headline, followed by an overview section, a specific topic card, and a list of related stories at the bottom.

SmartNews: Now in Spanish: Browsing and Reading News

Open recorded flow

Step 1 · 0:52
See the flow
SmartNews: Now in Spanish
Top navigation tabs, followed by a horizontal scrollable chip bar, then a vertical list of news articles, and a fixed bottom navigation bar.
Step 2 · 0:58
See the flow
SmartNews: Now in Spanish
Top navigation bar, followed by a horizontal tag list, article headline, author/timestamp, hero image, and body text.
Step 3 · 1:06
See the flow
SmartNews: Now in Spanish
Top navigation bar, followed by a horizontal tag list, article headline, author/date metadata, hero image, and multi-paragraph article body text.

The Wall Street Journal. News: Browsing and Reading Articles

Open recorded flow

Step 1 · 2:32
See the flow
The Wall Street Journal. News
Top navigation bar, article headline and body text, line chart, article action icons, bottom navigation bar.
Step 2 · 2:41
See the flow
The Wall Street Journal. News
Top navigation bar, article content with chart, centered subscription modal, bottom snackbar, and bottom navigation bar.
Step 3 · 2:45
See the flow
The Wall Street Journal. News
Header with back button and logo, followed by value proposition list, two subscription plan cards, a restore purchase link, and a primary subscribe button at the bottom.
Step 4 · 3:16
See the flow
The Wall Street Journal. News
Top navigation bar, article headline, sub-headline, hero image, article action toolbar, advertisement placeholder, and bottom navigation bar.

Eppika: Read & Learn Languages: Reading a Story

Open recorded flow

Step 1 · 1:51
See the flow
Eppika: Read & Learn Languages
Top header with profile/language, hero card, followed by two horizontal scrollable lists of book covers, and a bottom navigation bar.
Step 2 · 1:55
See the flow
Eppika: Read & Learn Languages
Top navigation, centered book cover image, title/author metadata, descriptive text block, and two bottom action buttons.
Step 3 · 2:01
See the flow
Eppika: Read & Learn Languages
Top navigation bar, central text reading area, and bottom audio player control panel.
Step 4 · 2:19
See the flow
Eppika: Read & Learn Languages
Top navigation bar, main text reading area, and a bottom interactive drawer for vocabulary and audio controls.
Step 5 · 2:30
See the flow
Eppika: Read & Learn Languages
Top navigation bar, main text content area, centered modal overlay, and a bottom control sheet with audio playback tools.
Step 6 · 2:47
See the flow
Eppika: Read & Learn Languages
Top navigation bar, central text reading area, bottom audio player control panel.
Step 7 · 2:51
See the flow
Eppika: Read & Learn Languages
Top navigation bar, central text reading area, bottom audio player control panel.
Step 8 · 2:57
See the flow
Eppika: Read & Learn Languages
Top navigation bar followed by a text reading area, overlaid with a centered progress modal.