An ecommerce website design study for home goods, connecting editorial discovery, product details, and cart review.
The productEcommerce website
The focusProduct discovery
Our contributionProduct direction & interface design
The contextOriginal studio concept
Illustrative product interfaces and sample data. Original studio design study, without claimed client outcomes.
The brief
A product with a clear purpose.
Forma Goods explores an ecommerce website for a small collection of ceramic home products. The visual system gives product photography room to work, supported by burgundy typography, porcelain backgrounds, and precise purchase controls. Collection, detail, and cart screens share a consistent hierarchy so the product remains recognizable through the buying journey.
Who it is for
Shoppers comparing home goods and a store team responsible for products, inventory, and editorial content.
The challenge
An attractive store can still leave a shopper uncertain about size, material, availability, or delivery. This study brings those details closer to the purchase decision and keeps the cart review explicit. The goal is a coherent storefront direction that can be reviewed with realistic catalog content before implementation.
Support visual product comparison.
Keep variants and availability near the buying action.
Make cart contents and totals easy to review.
Give the store team a consistent content structure.
The experience
Useful choices. A coherent interface.
A closer look at the interface direction.
01
Product-led collections
A restrained collection grid uses consistent imagery, useful names, and readable prices. Filters correspond to actual product attributes. Editorial introductions stay brief enough to support discovery without delaying the shopper’s task.
02
Details at the decision
The product view pairs photography with dimensions, materials, options, and availability. Variant selection produces clear feedback, and unavailable combinations are distinguishable from those ready to purchase.
03
A clear cart review
The cart makes quantities, selected options, and the visible total understandable. Editing an item returns predictable feedback. Delivery and payment conditions would be confirmed against the actual store setup before launch.
The user journey
From context to the next action.
Step 1
Explore the collection
The shopper reviews products using consistent photographs and concise descriptions, then selects an item that matches their needs.
Step 2
Choose with context
The product detail screen brings the relevant variant, material, and size information together. The selected option remains visible when the item enters the cart.
Step 3
Review before checkout
The shopper checks the chosen products and quantities, understands the next step, and receives clear feedback when the cart changes.
Delivery thinking
The decisions behind the screens.
Proposed implementation direction
The proposed storefront could use Shopify or another commerce platform selected around catalog and operating requirements.
Product models, variant behavior, market configuration, and integrations would be agreed before theme or custom application work.
Image delivery, keyboard access, validation, and realistic cart states belong in the release review.
A focused first scope
Collection and product detail templates
Variant and availability states
Cart review
Responsive storefront and content models
What to validate
Questions a working product must answer.
This study establishes a reviewable design direction. A production project would test the selected journey with representative users, realistic data, and agreed acceptance criteria. These questions define the next review without implying results have already been measured.
01Can shoppers distinguish similar products and select the correct variant?
02Are unavailable items and changing totals clear?
03Can staff edit product content without breaking the layout?
Have a similar product in mind?
Share your audience, the task you want to improve, and the constraints that matter. We can discuss a scope built around your own context.