screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile list creation flow examples

Search the library

Redfin: Buy, Sell & Rent Homes: Saving Listings & Creating a New List

Open recorded flow

  1. Step 1 · 2:44

    Redfin: Buy, Sell & Rent Homes: Top search bar and filter controls, followed by a large map view, and a single property card at the bottom.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top search bar and filter controls, followed by a large map view, and a single property card at the bottom.

  2. Step 2 · 2:48

    Redfin: Buy, Sell & Rent Homes: Top search and filter bar, large map occupying the top two-thirds, property card at the bottom with a toast notification overlay.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top search and filter bar, large map occupying the top two-thirds, property card at the bottom with a toast notification overlay.

  3. Step 3 · 3:05

    Redfin: Buy, Sell & Rent Homes: The screen consists of a background map view with search filters and a foreground modal overlay for list management.See the flow
    Redfin: Buy, Sell & Rent Homes

    The screen consists of a background map view with search filters and a foreground modal overlay for list management.

  4. Step 4 · 3:12

    Redfin: Buy, Sell & Rent Homes: The screen features a background map view with a centered modal overlay containing a form, followed by the system keyboard at the bottom.See the flow
    Redfin: Buy, Sell & Rent Homes

    The screen features a background map view with a centered modal overlay containing a form, followed by the system keyboard at the bottom.

  5. Step 5 · 3:17

    Redfin: Buy, Sell & Rent Homes: Map view background with a bottom-anchored modal sheet.See the flow
    Redfin: Buy, Sell & Rent Homes

    Map view background with a bottom-anchored modal sheet.

  6. Step 6 · 3:21

    Redfin: Buy, Sell & Rent Homes: Top search and filter bar, middle map view with property clusters, bottom property preview card with snackbar overlay.See the flow
    Redfin: Buy, Sell & Rent Homes

    Top search and filter bar, middle map view with property clusters, bottom property preview card with snackbar overlay.

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.

Hypelist: Create & Share Lists: Creating a List

Open recorded flow

  1. Step 1 · 4:23

    Hypelist: Create & Share Lists: Header with back button and title, followed by a 2x3 grid of category selection cards.See the flow
    Hypelist: Create & Share Lists

    Header with back button and title, followed by a 2x3 grid of category selection cards.

  2. Step 2 · 4:28

    Hypelist: Create & Share Lists: Map background with a bottom-anchored modal overlay and a system keyboard.See the flow
    Hypelist: Create & Share Lists

    Map background with a bottom-anchored modal overlay and a system keyboard.

  3. Step 3 · 4:36

    Hypelist: Create & Share Lists: Map background with a centered modal overlay containing a header, input field, two buttons, and a system keyboard at the bottom.See the flow
    Hypelist: Create & Share Lists

    Map background with a centered modal overlay containing a header, input field, two buttons, and a system keyboard at the bottom.

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

Open recorded flow

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

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

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

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

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

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

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

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

Found an example you like?See the whole story.

See the full library See plans