Make a catalogue navigable
Organise products into categories so shoppers can find a relevant starting point.
A clearer path from finding the right speaker to checkout.
An audio catalogue designed for discovery, comparison and purchase.
The overview
Avtar’s Speaker Store, in context.
A product catalogue needs to make browsing, product detail and purchase feel like one connected journey.
An audio catalogue designed for discovery, comparison and purchase.
Why this work matters
What a business can take from this.
Useful for retailers with products that need comparison. These are the opportunities the design is intended to support; results depend on the business and how the experience is used.
Help customers choose
Connect product information, imagery and related items within the buying journey.
Provide a path to purchase
Bring cart and checkout into the same experience as product discovery.
SectorAudio commerce
FocusEcommerce experience & development
Built withNext.js and Supabase
The challenge
A clear problem to solve.
Organise a growing range of speakers so shoppers can move from categories to individual product information and checkout.
The objective
Make the next step understandable whether a visitor is browsing or ready to buy.
The approach
How the pieces connect.
Connect category and product routes with rich product details, related products, cart and checkout flows.
The experience, connected
How Avtar’s Speaker Store comes together.
Explore the parts of the experience and the path they create for the people using it.
Experience map03 connected parts
Each segment represents one part of the experience, not a percentage or performance measure.
Select a part to explore
01Category discovery
Product and category pages organise the range into browsable routes.
02Product detail
Individual product pages bring together galleries, details, related products and context-specific questions.
03Cart and checkout
A cart and checkout provide a path from product selection to an order confirmation.
The path through
From first look to next step.
Make the next step understandable whether a visitor is browsing or ready to buy.
- 01Browse categories
- 02Compare a product
- 03Continue to checkout
A closer look at Avtar’s Speaker Store.
Explore the screens behind the experience.
Inside the experience
Three parts of the solution.
Open each part to see the thinking behind the experience.
01Category discovery
+
Product and category pages organise the range into browsable routes.
02Product detail
+
Individual product pages bring together galleries, details, related products and context-specific questions.
03Cart and checkout
+
A cart and checkout provide a path from product selection to an order confirmation.
The journey
From first look to next step.
A simple way to understand the experience from the visitor's perspective.
- 01
Browse categories
Product and category pages organise the range into browsable routes.
- 02
Compare a product
Individual product pages bring together galleries, details, related products and context-specific questions.
- 03
Continue to checkout
A cart and checkout provide a path from product selection to an order confirmation.
More of the experience.
See how the details come together across the project.
The design principle
Good commerce navigation reduces the distance between discovery and a confident decision.
Continue exploring
Next case studyBizBill