Websites · Design concept
A product-led commerce design study covering speaker discovery, product details and a shopping bag summary, with proposed selection and stock states.
Design concepts, not client projects. Screens are static mockups; names and data are illustrative.
Let product photography carry the visual identity while giving shoppers a clear route from browsing to reviewing a selected item. The example is a fictional audio shop, not a functioning store.
A product grid places speaker photography above concise names and prices, with filters for narrowing the selection.
The detail view gives the selected speaker a larger image and places its options near the add-to-bag action.
The bag summary shows the chosen product alongside the browsing experience so shoppers can check what they selected.
Neutral backgrounds and repeated image proportions make the different products easier to compare visually. Brand expression comes from the products and the restrained red accent.
The bag summary gives selection a visible destination. A production version should state the exact variant and quantity rather than relying on a thumbnail alone.
Proposed design specimens. These are static examples, not working controls or a production specification.
Product backdrop
#F6F5F2
Purchase actions
#C8442E
Text & structure
#242424
Clear information. A considered next step.
Use a clean sans-serif family. Product names lead, prices remain easy to scan, and supporting specifications should be readable without competing with either.
Keep product cards aligned and leave clear margins around the photographs. Group variant controls with the purchase action, while separating the bag summary from product description text.
Empty bag
Your bag is empty. Browse the collection to add a product.
Item added
Added to your bag. Check the selected finish and quantity before continuing.
Unavailable option
This finish is unavailable. Choose a different option.
The bag provides a checkpoint for the selected product and its options while the shopper is still browsing. It does not replace checkout, where delivery details, final charges and payment would need their own review.
