What is e-commerce design?
E-commerce design is web design with a till at the end. It covers everything a shopper touches between arriving and paying: the homepage and its merchandising, the category and listing pages, the filters, the product page with its images, copy, sizes and reviews, the cart, the checkout and the account. It also covers what happens around the sale: the search, the recommendations, the email that confirms the order.
It sits between three disciplines. Brand gives the store its look and its voice. User experience decides how the shopper moves, what they can find and how little gets in their way. Conversion design decides what the page is asking for at each moment and how clearly it asks. A store that nails two of the three and misses the third is the normal state of the web.
Why it matters
Why e-commerce design matters
Every decision on a product page is a decision about money. A photograph that does not show the texture, a size guide buried in a tab, a checkout that demands an account before it takes a card: each loses a measurable share of buyers who had already decided to buy. The same is true in reverse. For a fashion or beauty brand the store is also the flagship most customers will ever visit, so it carries the brand as much as it carries the catalog. A store that looks like every other template on the same platform tells the customer the brand is interchangeable too.
In practice
How e-commerce design works in practice
- 01
It starts with the catalog and the customer. How many products, how they are organized, what a shopper needs to know before they are comfortable paying, and which questions they ask the customer service team today. From that we design the product page first, because it is the page that sells, then the paths into it: category pages, search, filters, collections, campaign landing pages. The checkout is designed last and designed hardest, with as few fields and surprises as the payment provider allows.
- 02
Then it is built on a platform (Shopify, WooCommerce, a headless stack) and filled with assets, which is where the quality is really decided. Product photography, film and copy are most of what a shopper sees; a beautiful template with weak images is a weak store. After launch the store is measured, page by page, and the design keeps changing: the product page gets a new image order, the cart gets a shipping threshold, the filter that nobody used is removed.
At RIOT
E-commerce design at RIOT
We do not run stores, but much of what we make is built to sell a product on a screen, which is the job a product page has. The product films we made for Nutrafol with Sephora and two months of social product films for Gantri were designed to do in a few seconds what a product page does in a scroll: show the thing honestly, make it desirable and get out of the way.
Watch out
What people get wrong about e-commerce design
Designing the homepage and letting the template handle the product page. Shoppers arrive from search, social and ads straight onto products; the homepage is the least visited page in most stores. Second, hiding the cost: shipping, tax and delivery time revealed at the last step are the single biggest reason carts are abandoned. Third, treating the store as finished at launch. An online store is a shop floor, and shop floors get rearranged every week.
