Mobile video viewing flow examples

Video viewing flow examples

Search the library

Zumba - Dance Fitness Workout: Playing a Workout Video

Open recorded flow

Step 1 · 2:41
See the flow
Zumba - Dance Fitness Workout
Top hero image, followed by title and metadata, primary action buttons, and a details list at the bottom.
Step 2 · 2:46
See the flow
Zumba - Dance Fitness Workout
Video player background with a bottom-anchored modal overlay for scheduling.
Step 3 · 2:48
See the flow
Zumba - Dance Fitness Workout
A modal overlay centered over a video player and a details list section.
Step 4 · 2:51
See the flow
Zumba - Dance Fitness Workout
A centered modal overlay on a blurred background. The modal contains an illustration at the top, followed by a heading, body text, and two action buttons.
Step 5 · 2:53
See the flow
Zumba - Dance Fitness Workout
A centered system permission modal sits over a blurred app background. The modal contains an illustration at the top, text in the middle, and two buttons at the bottom.
Step 6 · 3:00
See the flow
Zumba - Dance Fitness Workout
Video player overlay with top navigation, central playback controls, and a bottom progress bar.

DAZN: Stream Live Sports: Watching and Engaging with Video Content

Open recorded flow

Step 1 · 1:18
See the flow
DAZN: Stream Live Sports
Top header with branding and upgrade button, hero video carousel, horizontal category filter bar, and a content feed section with a bottom navigation bar.
Step 2 · 1:24
See the flow
DAZN: Stream Live Sports
Video player at the top, followed by title, description, action buttons, and a related content tab.
Step 3 · 1:27
See the flow
DAZN: Stream Live Sports
Video player overlay with centered playback controls, top-right title text, and bottom navigation bar.
Step 4 · 1:42
See the flow
DAZN: Stream Live Sports
The screen features a background content feed with a video carousel and text, overlaid by a centered system notification permission modal.
Step 5 · 1:53
See the flow
DAZN: Stream Live Sports
Video player header followed by text content and engagement buttons, with a system share sheet modal overlaying the bottom half.

CraftBook: Crochet Made Easy: Completing a Tutorial Project

Open recorded flow

Step 1 · 2:07
See the flow
CraftBook: Crochet Made Easy
Top header, horizontal tutorial cards, promotional banner, search bar with filter, vertical pattern grid, bottom navigation bar.
Step 2 · 2:09
See the flow
CraftBook: Crochet Made Easy
Top navigation bar, hero image of the craft project, bottom card containing preparation steps, and a fixed bottom primary action button.
Step 3 · 2:11
See the flow
CraftBook: Crochet Made Easy
A full-screen image viewer with a single close button in the top right corner.
Step 4 · 2:15
See the flow
CraftBook: Crochet Made Easy
Top navigation bar, hero image of project, preparation section, and a bottom modal overlay.
Step 5 · 2:20
See the flow
CraftBook: Crochet Made Easy
Top navigation bar with title, central image, lower section for preparation details, and a bottom modal overlay for tools.
Step 6 · 2:27
See the flow
CraftBook: Crochet Made Easy
Top navigation bar, large video player area, text instruction block, playback speed controls, progress bar, and bottom playback control buttons.
Step 7 · 2:32
See the flow
CraftBook: Crochet Made Easy
Video player occupies the center, with playback controls overlaid in the middle and utility icons in the bottom right corner. A vertical progress bar is on the left edge.
Step 8 · 2:58
See the flow
CraftBook: Crochet Made Easy
Top celebratory header, central project image, feedback buttons, community sharing prompt, and a bottom primary action button.
Step 9 · 3:03
See the flow
CraftBook: Crochet Made Easy
The screen is vertically stacked with a feedback section at the top, a community sharing section in the middle, and a profile/save section at the bottom.