Designing online boutiques that sell

We see e-commerce projects tip one way or the other all the time. Some stores run smoothly and look like every other theme out there. Others are gorgeous brand experiences where finding a size or a price turns into a scavenger hunt. A store that sells manages both at once.

Here's how we frame the project, design each step of the buying path and decide where the brand gets to speak, plus what we'd ask any agency that says it combines UX, UI, motion and brand. For the animation side, our companion piece on motion and UX in online stores goes deeper.

"Redesign the store" can describe a handful of very different projects. Before anyone opens a design file, we write down what is actually changing:

• The brand. A refresh of the visual rules, or new positioning, messaging and photography?
• The journeys. Where do people drop off today: finding products, choosing a variant, understanding delivery, paying?
• The platform. Staying put or migrating? Which markets, currencies and languages? Our guide on how to choose an e-commerce platform helps with that call.
• The editing. What will your marketing team want to change on its own after launch: campaigns, collections, product stories?
• The constraints. Integrations, accessibility, performance, analytics and support.

That single page becomes the heart of your project brief. It also tells you, pretty quickly, whether you need a brand partner, an e-commerce implementer, or a team that can do both.

One brilliant page rarely wins a sale on its own. What wins is a store that clears away small doubts at every step.

Navigation and collections

We organize the catalog around how customers think, which is rarely how the warehouse thinks. Filters should match real decisions (size, use, compatibility, price), and a collection page should give enough to compare without opening every product.

Product pages

This is where most of the persuading happens. A good product page answers the questions people actually ask: what it is, who it's for, how it looks in use, which variant to pick, when it arrives and what happens if it doesn't fit. On a phone, price, availability and the add-to-cart button should be impossible to miss.

Cart and checkout

Keep the cart short and honest. Total cost, delivery options and taxes show up early, so the last step holds no surprises. Most platforms control much of the checkout, so we design the handoff with care and keep the brand consistent right up to it.

Mobile, speed and accessibility

We design mobile first, since that's where many people browse. Images and scripts stay light, and we build to the WCAG guidelines so the store works with a keyboard and assistive technology. Accessibility is good practice, and in many markets a legal requirement.

Trust

Clear policies, real contact options, honest reviews and secure payment cues all quiet that little voice saying "maybe later." If a physical shop or an expert service stands behind the store, say so. Stenger Bike does exactly that, pairing online purchase with the in-store advice its customers expect.

A coat of colour over a theme won't get you there. In a store, the brand lives in decisions:

• Art direction and photography that make products desirable and keep them consistent from campaign pages down to thumbnails.
• Product storytelling: the origin, the craft, the use. For Pangram Pangram Foundry, the store includes an editorial experience that shows the typefaces in the context of the design community, well beyond a list of licences.
• Voice in product copy, empty states, error messages and confirmation emails. Yes, even the error messages.
• A design system that holds all of it together as the catalog grows.

Sometimes the brand already exists and our job is to translate it to screens. The Mate Libre brand was created by another studio, Caserne, and our role was the website. Other times the store and the brand grow up together. If you're weighing that choice, read brand and website: together or separately?

Our rule of thumb: let the brand speak loudest where people are deciding whether they care (home, campaigns, product stories), and keep it quiet where they're getting something done (cart, account, checkout).

Plenty of agencies say they combine UX, UI, motion design and a brand refresh. The proof shows up when those disciplines meet your real catalog. Here are the questions we'd want you to ask any team on your shortlist, us included:

• Which commerce projects in your portfolio are closest to ours, and what was your role in each?
• Who will lead brand, UX, motion, development and QA, and are they in-house?
• How will the brand system work on product pages, beyond the homepage?
• Which parts of the platform and integrations will you deliver, and which will others?
• What will our team be able to edit without a developer?
• What accessibility, performance and analytics checks are part of acceptance?
• What support do you provide after launch?

At Locomotive, design and development happen in-house the vast majority of the time, and we bring in trusted partners for specialized needs. We host, support and evolve the stores we build. For broader criteria, see how to choose a web design agency.

When a specialist implementer is the better fit

We'll say it plainly. If your brand is settled and the main need is a platform migration, theme configuration or back-office integrations, an e-commerce implementation specialist may serve you better. A design-led studio like ours earns its place when the brief depends on a distinct brand expression and a bespoke shopping experience.

What to do next

List your top three buying-path problems, the brand elements that are changing and the platform constraints you already know. Put them on one page, and every agency conversation gets faster and more honest, including one with us.