Browsing areas
I gave promotions, categories and recommendations separate areas, so each has a clear job on the page.
Commerce | Self-initiated concept
Amazon: Product Discovery & Comparison
I designed a storefront and a search-results listing that take a shopper from browsing categories to comparing products, using visible filters and a consistent product card.
PROJECT AT A GLANCE
The essentials.
- Design focus
- Commerce concept
- Goal
- Listing filters · Product cards
- Screen focus
- Storefront · Search results
- Key flow
- Browse to compare
DESIGN WALKTHROUGH
Browsing, filtering and product cards.
Three decisions shape how the storefront and the listing work together.
Listing filters
Filters stay visible alongside the products they apply to.
Product-card structure
Every product card follows the same layout, so products can be compared side by side.
Design decisions in this concept.
Project
Focus
How does the interface help a shopper move from browsing to comparing products?
- Storefront categories as the main entry points
- Promotional rows kept apart from category browsing
- Listing filters placed next to the results
Interface
scope
- Storefront with category entry points
- Promotional and recommendation rows
- Search results with listing filters
- Product cards with a shared layout
Screen
Coverage
How the concept screens connect.
Storefront categoriesPromotional rowsListing filtersProduct cards
Discovery & Comparison
Storefront
Storefront screen. Values shown are sample data.
01 / 02FROM THE PROJECT FILES
Inside the concept
Screens from this self-initiated concept. Values shown are sample data.
Storefront
Search results and product listings
What the
concept covers
The two screens cover the path from storefront to search results: category entry points, visible filters and a product card built for comparison.