screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile product search flow examples

Search the library

Zalando – Online fashion: Browsing & Filtering Products

Open recorded flow

  1. Step 1 · 3:23

    Zalando – Online fashion: Top navigation bar, followed by a video hero section, a horizontal category filter bar, a text section with a title and description, and a product image carousel, with a persistent bottom navigation bar.See the flow
    Zalando – Online fashion

    Top navigation bar, followed by a video hero section, a horizontal category filter bar, a text section with a title and description, and a product image carousel, with a persistent bottom navigation bar.

  2. Step 2 · 3:56

    Zalando – Online fashion: Top navigation bar, sub-category horizontal list, filter chips, product grid, and bottom navigation bar with a promotional banner above it.See the flow
    Zalando – Online fashion

    Top navigation bar, sub-category horizontal list, filter chips, product grid, and bottom navigation bar with a promotional banner above it.

  3. Step 3 · 4:09

    Zalando – Online fashion: Top navigation bar, central product image, product title and brand info, bottom confirmation banner, and bottom navigation bar.See the flow
    Zalando – Online fashion

    Top navigation bar, central product image, product title and brand info, bottom confirmation banner, and bottom navigation bar.

  4. Step 4 · 4:15

    Zalando – Online fashion: Header with back/share, product title/size, primary CTA, shipping info card, collapsible detail rows, brand follow section, and bottom navigation.See the flow
    Zalando – Online fashion

    Header with back/share, product title/size, primary CTA, shipping info card, collapsible detail rows, brand follow section, and bottom navigation.

  5. Step 5 · 4:22

    Zalando – Online fashion: Top navigation bar, followed by expandable sections for product details, brand follow status, a green notification banner, and a bottom navigation bar.See the flow
    Zalando – Online fashion

    Top navigation bar, followed by expandable sections for product details, brand follow status, a green notification banner, and a bottom navigation bar.

  6. Step 6 · 4:42

    Zalando – Online fashion: Top navigation bar followed by vertical sections for price, toggles, and material tags, ending with a sticky bottom action button.See the flow
    Zalando – Online fashion

    Top navigation bar followed by vertical sections for price, toggles, and material tags, ending with a sticky bottom action button.

  7. Step 7 · 4:51

    Zalando – Online fashion: Header with close/reset, followed by horizontal filter chips, then vertical sections for product standards, length, and shipping toggles, ending with a full-width bottom action button.See the flow
    Zalando – Online fashion

    Header with close/reset, followed by horizontal filter chips, then vertical sections for product standards, length, and shipping toggles, ending with a full-width bottom action button.

  8. Step 8 · 4:59

    Zalando – Online fashion: Header with back button and filter, category tabs, filter chips, product grid, and bottom navigation.See the flow
    Zalando – Online fashion

    Header with back button and filter, category tabs, filter chips, product grid, and bottom navigation.

ZARA: Browsing and Filtering Products

Open recorded flow

  1. Step 1 · 2:59

    ZARA: Top navigation bar, filter bar, product grid, and a bottom modal overlay for sorting.See the flow
    ZARA

    Top navigation bar, filter bar, product grid, and a bottom modal overlay for sorting.

  2. Step 2 · 3:15

    ZARA: Top navigation bar, product grid preview, bottom filter selection grid, and bottom action bar.See the flow
    ZARA

    Top navigation bar, product grid preview, bottom filter selection grid, and bottom action bar.

  3. Step 3 · 3:21

    ZARA: Top navigation bar, followed by a horizontal filter menu, a two-column product grid, and a bottom modal overlay for price filtering.See the flow
    ZARA

    Top navigation bar, followed by a horizontal filter menu, a two-column product grid, and a bottom modal overlay for price filtering.

  4. Step 4 · 3:53

    ZARA: Top navigation bar, product image carousel, product title and price, size selection grid, and bottom action links.See the flow
    ZARA

    Top navigation bar, product image carousel, product title and price, size selection grid, and bottom action links.

  5. Step 5 · 4:14

    ZARA: Top navigation bar, followed by a horizontal filter row, a 2-column product grid, and a bottom modal overlay for sorting.See the flow
    ZARA

    Top navigation bar, followed by a horizontal filter row, a 2-column product grid, and a bottom modal overlay for sorting.

  6. Step 6 · 4:24

    ZARA: Top navigation bar, followed by a product grid, and a bottom filter overlay menu.See the flow
    ZARA

    Top navigation bar, followed by a product grid, and a bottom filter overlay menu.

HBX | Globally Curated Fashion: Searching and Filtering Products

Open recorded flow

  1. Step 1 · 6:48

    HBX | Globally Curated Fashion: Top navigation tabs, search bar, trending brands list, recently viewed section, and bottom navigation bar.See the flow
    HBX | Globally Curated Fashion

    Top navigation tabs, search bar, trending brands list, recently viewed section, and bottom navigation bar.

  2. Step 2 · 7:04

    HBX | Globally Curated Fashion: Header with search bar and gender tabs, followed by a results count, a sorting dropdown overlay, a grid of product cards, and a bottom navigation bar.See the flow
    HBX | Globally Curated Fashion

    Header with search bar and gender tabs, followed by a results count, a sorting dropdown overlay, a grid of product cards, and a bottom navigation bar.

  3. Step 3 · 7:25

    HBX | Globally Curated Fashion: Header with product info, followed by a list of expandable product detail sections, with a centered modal overlay for size selection.See the flow
    HBX | Globally Curated Fashion

    Header with product info, followed by a list of expandable product detail sections, with a centered modal overlay for size selection.

  4. Step 4 · 7:51

    HBX | Globally Curated Fashion: Top header, error message, two action buttons, followed by a horizontal product carousel and a bottom navigation bar.See the flow
    HBX | Globally Curated Fashion

    Top header, error message, two action buttons, followed by a horizontal product carousel and a bottom navigation bar.

  5. Step 5 · 8:14

    HBX | Globally Curated Fashion: Top navigation bar with search input, followed by results count and sorting, with a modal overlay covering the lower two-thirds of the screen.See the flow
    HBX | Globally Curated Fashion

    Top navigation bar with search input, followed by results count and sorting, with a modal overlay covering the lower two-thirds of the screen.

  6. Step 6 · 8:23

    HBX | Globally Curated Fashion: Top search bar, filter chips, two-column product grid, bottom navigation bar.See the flow
    HBX | Globally Curated Fashion

    Top search bar, filter chips, two-column product grid, bottom navigation bar.

  7. Step 7 · 8:40

    HBX | Globally Curated Fashion: The screen consists of a background search results page overlaid with a bottom-sheet style modal for filtering.See the flow
    HBX | Globally Curated Fashion

    The screen consists of a background search results page overlaid with a bottom-sheet style modal for filtering.

  8. Step 8 · 8:58

    HBX | Globally Curated Fashion: Top search bar followed by filter chips, then a modal-style price filter section with a range slider and a bottom action button.See the flow
    HBX | Globally Curated Fashion

    Top search bar followed by filter chips, then a modal-style price filter section with a range slider and a bottom action button.

  9. Step 9 · 9:20

    HBX | Globally Curated Fashion: Top search bar, results count and filter chips, grid of product cards, floating filter buttons, bottom navigation.See the flow
    HBX | Globally Curated Fashion

    Top search bar, results count and filter chips, grid of product cards, floating filter buttons, bottom navigation.

Found an example you like?See the whole story.

See the full library See plans