Ecommerce Website Design for Clearer Shopping Journeys

Most stores do not lose sales because they look dated. They lose them at specific points where a shopper cannot find, compare, trust or finish.

• Category menus mirror the warehouse, not the way customers describe products.
• Search returns nothing for common misspellings, sizes or synonyms.
• Filters exist but leave out the attributes people actually choose by.
• Product cards hide price, variants or stock until the shopper clicks.
• Delivery, returns and stock information sit below long product descriptions.
• Variant choices are unclear, so people order the wrong size or colour.
• The cart adds costs nobody expected.
• Checkout insists on an account, or asks for the same details twice.
• Phone layouts are desktop pages squeezed onto a small screen.
• Error messages say a field is wrong without saying how to fix it.

Design work on a store starts by finding which of these are costing you orders, then fixing them in the order that matters most.

People arrive at a store in different states of mind, and each needs a different route through it.

• Someone who knows exactly what they want searches or goes straight to a product.
• Someone comparing options browses categories and leans on filters, product cards and reviews.
• A returning customer wants their account, past orders and a quick reorder.
• A gift buyer needs delivery dates and returns information before anything else.

We map these journeys for your catalogue and your customers before designing layouts, because the right structure for a store with forty products is very different from one with forty thousand. Business-to-business ordering adds its own needs: bulk quantities, account pricing and repeat orders.

Catalogue structure comes first

The catalogue structure decides how the whole store behaves: which categories exist, how deep they go, which product attributes become filters, and how one product can appear in several places without creating duplicate pages. When this is right, navigation, search and filtering become simpler to design, and the store is easier for search engines to understand; Google’s ecommerce guidance covers the same structural questions from the search side.

Shoppers find products by browsing, searching and filtering, and most use more than one of these in a single visit.

We design the main navigation around the words customers use for your products, category and collection pages that show enough on each card to compare without opening every product, and search that copes with misspellings and synonyms and still offers a useful next step when nothing matches.

Filters and sorting

Filters should match the attributes people actually choose by — size, fit, material, compatibility, price — and show how many products each choice leaves. Applied filters stay visible and easy to remove, and sorting options follow how the catalogue is really browsed.

Merchandising hierarchy

Category pages are also where the business decides what to promote: new arrivals, bestsellers, offers and collections. We design merchandising slots, badges and product-card hierarchy so promotion helps shoppers instead of pushing the products they came for out of view.

A product page has to answer every question that stops someone buying, usually within a few seconds and often on a phone.

We design the page around a clear order of information:

• Name, price and the main reason to choose this product
• Images and video that show scale, detail and use
• Variant selection that makes size, colour and stock clear
• Delivery estimate, returns and payment options beside the button
• Reviews and ratings, where the store genuinely collects them
• Specifications, care and compatibility details for those who need them

Price presentation covers sale and original prices, unit prices, taxes and any bundle or quantity pricing, so nothing changes unexpectedly in the cart. Out-of-stock and pre-order states are designed as well, with a clear next step instead of a dead end.

Checkout is where interest becomes an order, and where unexpected costs, forced account creation and long forms lose people who had already decided to buy.

We design this stage in detail rather than leaving it to a platform default, using independent research such as Baymard Institute’s cart and checkout usability research alongside your own analytics. The design covers:

• A cart that shows delivery costs and taxes before checkout
• Guest checkout, with an account offered after the order
• Address and payment forms with only the fields the business needs
• Errors explained beside the field, with what to change
• Delivery and payment choices, with the total updating as they change
• An order review and confirmation that set clear expectations

Payment methods, tax rules and shipping logic are built in development. The design decides how they are presented, and what the shopper sees when something fails.

For many stores, most visits come from phones, so the phone layout is designed as a version of the store in its own right, not a compressed desktop.

• Navigation moves into a menu, with search kept in view
• Filters open in a full-screen sheet with a result count
• Product galleries swipe, with variants close to the button
• The add-to-cart button stays within reach as the page scrolls
• Checkout fields bring up the right keyboard and support autofill
• Touch targets are large enough to tap accurately

Every key template — home, category, search results, product, cart and checkout — is reviewed at phone, tablet and desktop widths before handoff.

A store is built from repeating parts, and each part has states that shoppers will meet.

We define product cards, price formats, badges, variant selectors, quantity steppers, filter controls, buttons, form fields and alerts as one component set, together with their states: in stock, low stock, sold out, on sale, loading, no search results, empty cart, errors and confirmation. New pages then stay consistent, and developers build each part once.

Accessibility

We design for keyboard use, visible focus, sufficient contrast, labelled form fields and stock or sale information that does not rely on colour alone, following WCAG 2.2. Accessibility also depends on how the store is built and tested, so design is one part of meeting it.

1. 01

   Discovery

   Your products, customers, channels and what is not working now.

2. 02

   Store review

   Where shoppers drop off, from your data and a walkthrough of the current store.

3. 03

   Catalogue structure

   Categories, attributes, filters and navigation.

4. 04

   Key journeys

   From landing to order, for each main type of shopper.

5. 05

   Wireframes

   Category, product, cart and checkout layouts where structure needs agreeing first.

6. 06

   Visual design

   The store’s look, applied to the key templates.

7. 07

   Components and states

   Product cards, variants, forms and every state they can be in.

8. 08

   Responsive layouts

   Phone, tablet and desktop for each template.

9. 09

   Prototype and review

   A click-through of the buying journey with your team.

10. 10

    Handoff and design QA

    Specifications for developers, and the build checked against the design.

Not every project needs every step.

Where we also build the store, the designs move straight into development with the same components. Where another team or platform partner builds it, the handoff is prepared so nothing has to be guessed.

What you receive

Depending on scope:

• Catalogue structure and navigation map
• Key shopping journeys
• Wireframes where needed
• Designed templates for home, category, search, product, cart and checkout
• Responsive layouts for each template
• A component set with its states
• Interaction notes
• Exported assets and specifications
• Design QA against the build

For an existing store, a design audit with prioritised recommendations can come first. A complete rebuild of the look and structure is scoped as a website redesign.

The two are planned together, but they answer different questions.

Stores on Shopify follow the same split: we design the store, and theme and app work is carried out by our Shopify developers.

Related services