screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile playlist management flow examples

Search the library

Equalizer - Volume Booster EQ: Creating and Populating a Playlist

Open recorded flow

  1. Step 1 · 1:07

    Equalizer - Volume Booster EQ: The screen features a background album view with a centered album cover and a bottom-anchored modal sheet containing song management options.See the flow
    Equalizer - Volume Booster EQ

    The screen features a background album view with a centered album cover and a bottom-anchored modal sheet containing song management options.

  2. Step 2 · 1:08

    Equalizer - Volume Booster EQ: A modal sheet with a header containing a cancel button and title, followed by a vertical list of two selectable playlist options.See the flow
    Equalizer - Volume Booster EQ

    A modal sheet with a header containing a cancel button and title, followed by a vertical list of two selectable playlist options.

  3. Step 3 · 1:12

    Equalizer - Volume Booster EQ: Top navigation bar, central icon and text input field, bottom system keyboard.See the flow
    Equalizer - Volume Booster EQ

    Top navigation bar, central icon and text input field, bottom system keyboard.

  4. Step 4 · 1:15

    Equalizer - Volume Booster EQ: Top navigation bar, followed by album artwork and play button, an 'Add Music' button, and a list of songs at the bottom.See the flow
    Equalizer - Volume Booster EQ

    Top navigation bar, followed by album artwork and play button, an 'Add Music' button, and a list of songs at the bottom.

  5. Step 5 · 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.

Deezer: Music Player, Podcast: Creating a Group Playlist (Shaker)

Open recorded flow

  1. Step 1 · 11:34

    Deezer: Music Player, Podcast: Vertical scrollable feed with a top section for originals, a middle section for feature cards, a horizontal list for stations, and a persistent bottom player and navigation bar.See the flow
    Deezer: Music Player, Podcast

    Vertical scrollable feed with a top section for originals, a middle section for feature cards, a horizontal list for stations, and a persistent bottom player and navigation bar.

  2. Step 2 · 11:37

    Deezer: Music Player, Podcast: Top header, centered empty state illustration and text, primary CTA button, bottom music player bar, and bottom navigation.See the flow
    Deezer: Music Player, Podcast

    Top header, centered empty state illustration and text, primary CTA button, bottom music player bar, and bottom navigation.

  3. Step 3 · 11:43

    Deezer: Music Player, Podcast: Top header with title and close button, followed by a descriptive text block, an input field, and a primary action button.See the flow
    Deezer: Music Player, Podcast

    Top header with title and close button, followed by a descriptive text block, an input field, and a primary action button.

  4. Step 4 · 11:45

    Deezer: Music Player, Podcast: The screen is a centered modal overlay. It features a top header with a title and close icon, a central illustration, a text block, and a bottom call-to-action button.See the flow
    Deezer: Music Player, Podcast

    The screen is a centered modal overlay. It features a top header with a title and close icon, a central illustration, a text block, and a bottom call-to-action button.

  5. Step 5 · 11:47

    Deezer: Music Player, Podcast: The screen is a modal overlay with a header, two invitation options, and a large QR code centered in the lower half.See the flow
    Deezer: Music Player, Podcast

    The screen is a modal overlay with a header, two invitation options, and a large QR code centered in the lower half.

  6. Step 6 · 11:52

    Deezer: Music Player, Podcast: Header with title and member count, followed by an invite button, tabbed navigation, a central illustration, and an iOS system share sheet overlay at the bottom.See the flow
    Deezer: Music Player, Podcast

    Header with title and member count, followed by an invite button, tabbed navigation, a central illustration, and an iOS system share sheet overlay at the bottom.

  7. Step 7 · 11:57

    Deezer: Music Player, Podcast: Header with group info, tab bar, empty state illustration and text, primary CTA, persistent player bar, and bottom navigation.See the flow
    Deezer: Music Player, Podcast

    Header with group info, tab bar, empty state illustration and text, primary CTA, persistent player bar, and bottom navigation.

  8. Step 8 · 12:08

    Deezer: Music Player, Podcast: Top search bar, followed by horizontal filter tabs, and a long vertical list of music tracks.See the flow
    Deezer: Music Player, Podcast

    Top search bar, followed by horizontal filter tabs, and a long vertical list of music tracks.

  9. Step 9 · 12:20

    Deezer: Music Player, Podcast: Header with playlist info, followed by invite and tab controls, a song list, and a persistent mini-player at the bottom.See the flow
    Deezer: Music Player, Podcast

    Header with playlist info, followed by invite and tab controls, a song list, and a persistent mini-player at the bottom.

  10. Step 10 · 12:23

    Deezer: Music Player, Podcast: Header with group info, followed by invite button, tab navigation, action buttons, and a scrollable list of songs, with a bottom sheet overlay.See the flow
    Deezer: Music Player, Podcast

    Header with group info, followed by invite button, tab navigation, action buttons, and a scrollable list of songs, with a bottom sheet overlay.

AI Song Generator: Mozart: Manage Songs and Playlists

Open recorded flow

  1. Step 1 · 9:01

    AI Song Generator: Mozart: Top header with tabs, filter chips, scrollable list of song cards, and a bottom navigation bar with a floating action button.See the flow
    AI Song Generator: Mozart

    Top header with tabs, filter chips, scrollable list of song cards, and a bottom navigation bar with a floating action button.

  2. Step 2 · 10:47

    AI Song Generator: Mozart: Header with title and search, tabbed filters, scrollable list of song cards, floating action button, mini-player, and bottom navigation.See the flow
    AI Song Generator: Mozart

    Header with title and search, tabbed filters, scrollable list of song cards, floating action button, mini-player, and bottom navigation.

  3. Step 3 · 10:54

    AI Song Generator: Mozart: A modal overlay centered on the screen containing a header with song details, two side-by-side action buttons, and a vertical list of secondary actions.See the flow
    AI Song Generator: Mozart

    A modal overlay centered on the screen containing a header with song details, two side-by-side action buttons, and a vertical list of secondary actions.

  4. Step 4 · 11:05

    AI Song Generator: Mozart: A modal dialog box is centered over a background library screen containing tabs, filter chips, and an empty state message.See the flow
    AI Song Generator: Mozart

    A modal dialog box is centered over a background library screen containing tabs, filter chips, and an empty state message.

  5. Step 5 · 11:40

    AI Song Generator: Mozart: A modal dialog centered over a library list view with a bottom navigation bar.See the flow
    AI Song Generator: Mozart

    A modal dialog centered over a library list view with a bottom navigation bar.

Found an example you like?See the whole story.

See the full library See plans