Mobile product detail exploration flow examples

Product detail exploration flow examples

Step 1 · 0:52
See the flow
SHEIN - Shopping Online
Top search bar, category tabs, horizontal product scroll, promotional banners, gamified tiles, secondary tabs, sign-in banner, and bottom navigation.
Step 2 · 0:56
See the flow
SHEIN - Shopping Online
Top navigation bar, category icon carousel, filter/sort bar, and a two-column product grid.
Step 3 · 0:58
See the flow
SHEIN - Shopping Online
Top navigation bar, large hero product image, product title and pricing, color and size selection, bottom persistent action bar.
Step 4 · 1:01
See the flow
SHEIN - Shopping Online
Top navigation bar, followed by tabbed content, product selection options (color/size), promotional banners, shipping info, policy/security links, and a fixed bottom action bar.
Step 5 · 1:04
See the flow
SHEIN - Shopping Online
Top search bar, tabbed navigation, brand profile header, product grid, matching styles section, horizontal category scroll, and persistent bottom action bar.
Step 6 · 1:06
See the flow
SHEIN - Shopping Online
Top navigation bar, tabbed sub-navigation, vertical scrollable list of review cards, and a fixed bottom action bar.

Step 1 · 0:45
See the flow
FLYP - Fashion Design Studio
Top navigation bar, 2x2 image grid, product details section, and bottom navigation bar.
Step 2 · 0:54
See the flow
FLYP - Fashion Design Studio
A modal window containing a text description block followed by two stacked data tables for sizing.
Step 3 · 1:15
See the flow
FLYP - Fashion Design Studio
Top header with back button and title, followed by a 2x2 image grid, then a product info section with price and CTA, and a bottom navigation bar.
Step 4 · 1:21
See the flow
FLYP - Fashion Design Studio
A modal window containing a text description block followed by two stacked data tables for sizing.

Step 1 · 1:14
See the flow
Vivino: Drink The Right Wine
Header text at top, followed by a large central product card, with wine details listed below the card.
Step 2 · 1:23
See the flow
Vivino: Drink The Right Wine
Top navigation bar, hero image of wine bottle with overlay stats, middle section with product details and action buttons, bottom section with pricing and purchase CTA.
Step 3 · 1:26
See the flow
Vivino: Drink The Right Wine
A centered modal card containing a title, a vertical rating scale graphic, descriptive text, and a pagination indicator.
Step 4 · 1:27
See the flow
Vivino: Drink The Right Wine
A centered modal overlay containing a title, a list of five rating rows with progress bars, and a pagination indicator at the bottom.

Step 1 · 2:10
See the flow
Too Good To Go: Save Good Food
Header image with overlay, followed by product details, store location, description, ingredients link, reviews, highlights, and a bottom sticky action button.
Step 2 · 2:16
See the flow
Too Good To Go: Save Good Food
Top header with store info, followed by a list of available surprise bags, an about section with stats, and a map at the bottom.
Step 3 · 2:27
See the flow
Too Good To Go: Save Good Food
The screen consists of a store profile page with a centered modal overlaying the content.

Step 1 · 4:09
See the flow
Zalando – Online fashion
Top navigation bar, central product image, product title and brand info, bottom confirmation banner, and bottom navigation bar.
Step 2 · 4:15
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.
Step 3 · 4:22
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.