Mobile audio listening flow examples

Audio listening flow examples

Step 1 · 4:06
See the flow
Particle: Personalized News
Top header with greeting and audio prompt, followed by a large hero news card, a section header, and a horizontal carousel of news cards.
Step 2 · 4:11
See the flow
Particle: Personalized News
Top section for current track, middle section for queue list, bottom section for playback controls and utility bar.
Step 3 · 4:16
See the flow
Particle: Personalized News
Top 'Now Playing' section, followed by a scrollable 'Playing Next' list, and a fixed bottom playback control bar.
Step 4 · 4:26
See the flow
Particle: Personalized News
Top 'Now Playing' section, followed by a scrollable 'Playing Next' list, with a centered modal overlay for speed selection and a bottom control bar.
Step 5 · 4:30
See the flow
Particle: Personalized News
Top image area, middle text title, playback progress bar, central playback controls, bottom volume slider and secondary utility icons.
Step 6 · 4:35
See the flow
Particle: Personalized News
Top 'Now Playing' section, followed by a scrollable 'Playing Next' list, and a fixed bottom media control bar.
Step 7 · 4:38
See the flow
Particle: Personalized News
Top hero image, followed by article title, bulleted summary list, and a bottom persistent media player bar.

Step 1 · 6:06
See the flow
The Guardian - US & World News
Header, promotional card, category grid, section header, and list of podcast episodes.
Step 2 · 6:12
See the flow
The Guardian - US & World News
Header with back button, section title, subtitle, grid of four podcast cards, footer with legal links, and bottom navigation bar.
Step 3 · 6:15
See the flow
The Guardian - US & World News
Header with logo and description, followed by action buttons, then a scrollable list of podcast episode cards, and a fixed bottom navigation bar.
Step 4 · 6:27
See the flow
The Guardian - US & World News
A dark background with a podcast header, overlaid by a white modal containing the audio player controls.
Step 5 · 6:44
See the flow
The Guardian - US & World News
Header with logo and description, followed by status toggles, then a vertical list of podcast episode cards, and a bottom navigation bar.
Step 6 · 6:48
See the flow
The Guardian - US & World News
Top header, followed by a vertical list of podcast episode cards, ending with a persistent bottom navigation bar.
Step 7 · 6:55
See the flow
The Guardian - US & World News
Top header, followed by a section title, a vertical list of numbered podcast cards, and a fixed bottom navigation bar.
Step 8 · 6:57
See the flow
The Guardian - US & World News
Top navigation bar, followed by podcast header with audio controls, metadata, and a long-form text article body, ending with a bottom navigation bar.

Step 1 · 3:13
See the flow
Deezer: Music Player, Podcast
Hero image at top, followed by action buttons, a list of tracks, and a bottom navigation bar.
Step 2 · 3:24
See the flow
Deezer: Music Player, Podcast
Top header with track info and artist avatars, followed by a vertical list of action buttons.
Step 3 · 3:45
See the flow
Deezer: Music Player, Podcast
Top header with track info and artist image, followed by a vertical list of action buttons.
Step 4 · 3:54
See the flow
Deezer: Music Player, Podcast
Top navigation bar, central lyrics display area, bottom right action button.
Step 5 · 3:57
See the flow
Deezer: Music Player, Podcast
Top navigation bar, central lyrics display, and a bottom sheet for sharing options.
Step 6 · 4:02
See the flow
Deezer: Music Player, Podcast
Top navigation bar with artist/song info, central scrolling lyrics text, and a bottom toast notification.
Step 7 · 4:04
See the flow
Deezer: Music Player, Podcast
A centered modal window appearing over a blurred music player background.