screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile music and audio discovery flow examples

Search the library

Equalizer - Volume Booster EQ: Browsing the Music Library

Open recorded flow

  1. Step 1 · 0:47

    Equalizer - Volume Booster EQ: Top header with search and connect, followed by three distinct sections: Artists (horizontal), Playlists (grid/horizontal), and Songs (vertical list).See the flow
    Equalizer - Volume Booster EQ

    Top header with search and connect, followed by three distinct sections: Artists (horizontal), Playlists (grid/horizontal), and Songs (vertical list).

  2. Step 2 · 1:00

    Equalizer - Volume Booster EQ: Top navigation bar followed by section headers for Albums and Songs with corresponding list items.See the flow
    Equalizer - Volume Booster EQ

    Top navigation bar followed by section headers for Albums and Songs with corresponding list items.

  3. Step 3 · 1:23

    Equalizer - Volume Booster EQ: Top navigation bar with Cancel/Done, followed by a search input field, and a scrollable list of music tracks with thumbnails and action buttons.See the flow
    Equalizer - Volume Booster EQ

    Top navigation bar with Cancel/Done, followed by a search input field, and a scrollable list of music tracks with thumbnails and action buttons.

  4. Step 4 · 2:27

    Equalizer - Volume Booster EQ: Top navigation bar, search field, list of songs, and a bottom-anchored modal overlay.See the flow
    Equalizer - Volume Booster EQ

    Top navigation bar, search field, list of songs, and a bottom-anchored modal overlay.

  5. Step 5 · 2:47

    Equalizer - Volume Booster EQ: Top navigation bar with back button, followed by a large header, and a scrollable vertical list of artist cards.See the flow
    Equalizer - Volume Booster EQ

    Top navigation bar with back button, followed by a large header, and a scrollable vertical list of artist cards.

  6. Step 6 · 2:58

    Equalizer - Volume Booster EQ: Top navigation bar, artist header, horizontal album list, vertical song list, and a bottom modal overlay.See the flow
    Equalizer - Volume Booster EQ

    Top navigation bar, artist header, horizontal album list, vertical song list, and a bottom modal overlay.

IDAGIO Stream Classical Music: Browsing Content

Open recorded flow

  1. Step 1 · 1:24

    IDAGIO Stream Classical Music: Top hero album art, followed by a 2x2 grid of navigation cards, then a horizontal list of featured albums, and a bottom navigation bar.See the flow
    IDAGIO Stream Classical Music

    Top hero album art, followed by a 2x2 grid of navigation cards, then a horizontal list of featured albums, and a bottom navigation bar.

  2. Step 2 · 1:31

    IDAGIO Stream Classical Music: Top header with album art and metadata, followed by action buttons, a descriptive text block, and a scrollable list of tracks, with a fixed bottom navigation bar.See the flow
    IDAGIO Stream Classical Music

    Top header with album art and metadata, followed by action buttons, a descriptive text block, and a scrollable list of tracks, with a fixed bottom navigation bar.

  3. Step 3 · 2:01

    IDAGIO Stream Classical Music: Top header with close/share buttons, followed by a hero album cover image, a two-column section for tracklist and performer credits, and a bottom section with descriptive text.See the flow
    IDAGIO Stream Classical Music

    Top header with close/share buttons, followed by a hero album cover image, a two-column section for tracklist and performer credits, and a bottom section with descriptive text.

  4. Step 4 · 2:20

    IDAGIO Stream Classical Music: Header with artist info, radio button, tab bar, horizontal scrollable list for releases, horizontal scrollable list for recommendations, persistent playback bar, and bottom navigation.See the flow
    IDAGIO Stream Classical Music

    Header with artist info, radio button, tab bar, horizontal scrollable list for releases, horizontal scrollable list for recommendations, persistent playback bar, and bottom navigation.

  5. Step 5 · 2:23

    IDAGIO Stream Classical Music: Header with artist info, tabbed navigation, horizontal scrollable list of albums, recommendation section, and bottom playback bar.See the flow
    IDAGIO Stream Classical Music

    Header with artist info, tabbed navigation, horizontal scrollable list of albums, recommendation section, and bottom playback bar.

  6. Step 6 · 2:30

    IDAGIO Stream Classical Music: Artist header at top, tab navigation below, search/sort/filter controls, list of works, and a bottom modal overlay.See the flow
    IDAGIO Stream Classical Music

    Artist header at top, tab navigation below, search/sort/filter controls, list of works, and a bottom modal overlay.

  7. Step 7 · 2:32

    IDAGIO Stream Classical Music: Artist header at the top, followed by a filter/sort control area, a scrollable list of tracks, a mini-player, and a bottom navigation bar.See the flow
    IDAGIO Stream Classical Music

    Artist header at the top, followed by a filter/sort control area, a scrollable list of tracks, a mini-player, and a bottom navigation bar.

  8. Step 8 · 2:41

    IDAGIO Stream Classical Music: Top navigation bar, search input, list of selectable items, and a bottom full-width action button.See the flow
    IDAGIO Stream Classical Music

    Top navigation bar, search input, list of selectable items, and a bottom full-width action button.

  9. Step 9 · 2:45

    IDAGIO Stream Classical Music: Header with back button and reset, search input field, list of selectable items, and a bottom fixed action button.See the flow
    IDAGIO Stream Classical Music

    Header with back button and reset, search input field, list of selectable items, and a bottom fixed action button.

Quinn - Audio Stories: Browsing Content

Open recorded flow

  1. Step 1 · 0:16

    Quinn - Audio Stories: Full-screen video background with centered playback controls and a bottom progress bar.See the flow
    Quinn - Audio Stories

    Full-screen video background with centered playback controls and a bottom progress bar.

  2. Step 2 · 0:47

    Quinn - Audio Stories: Top navigation bar, large hero image, metadata and playback controls, white content card below, bottom navigation bar.See the flow
    Quinn - Audio Stories

    Top navigation bar, large hero image, metadata and playback controls, white content card below, bottom navigation bar.

  3. Step 3 · 2:06

    Quinn - Audio Stories: Top navigation bar, central media artwork, metadata text, and a large bottom sheet overlay covering the lower half.See the flow
    Quinn - Audio Stories

    Top navigation bar, central media artwork, metadata text, and a large bottom sheet overlay covering the lower half.

  4. Step 4 · 2:57

    Quinn - Audio Stories: Hero image with text overlay at the top, followed by a white content section for episodes, and a fixed bottom navigation bar.See the flow
    Quinn - Audio Stories

    Hero image with text overlay at the top, followed by a white content section for episodes, and a fixed bottom navigation bar.

  5. Step 5 · 3:16

    Quinn - Audio Stories: A list of playlist cards in the background with a modal bottom sheet covering the lower half of the screen.See the flow
    Quinn - Audio Stories

    A list of playlist cards in the background with a modal bottom sheet covering the lower half of the screen.

  6. Step 6 · 3:37

    Quinn - Audio Stories: Top navigation bar, followed by two horizontal scrolling sections of content cards, and a bottom navigation bar.See the flow
    Quinn - Audio Stories

    Top navigation bar, followed by two horizontal scrolling sections of content cards, and a bottom navigation bar.

Found an example you like?See the whole story.

See the full library See plans