E-commerce website design mistakes that cost sales

Key takeaways

E-commerce design mistakes cost sales at every step: poor product photos, delivery costs revealed only at checkout, filters that do not help, small add-to-basket buttons on mobile and long checkouts with forced account creation. Baymard Institute puts average online cart abandonment at about 70%, and extra costs and complicated checkouts are among the most common reasons.

• Average cart abandonment is about 70% (Baymard Institute).
• Show delivery costs and times on product pages, not only at checkout.
• Offer guest checkout; do not force account creation.
• Use several sharp product images, including scale and detail.

Why do e-commerce design mistakes cost so much?

Online shoppers cannot touch the product or ask a sales assistant, so the design has to answer every question and remove every doubt. A small fault, such as an unclear size guide or a surprise delivery charge, applied to every visitor adds up to a large share of lost orders.

• The most common business website design mistakes
• What a UK e-commerce website needs

Mistake 1: weak product images

One small photo on a white background does not show scale, texture or detail. Show several sharp images, including the product in use, close-ups and something that shows size. Let shoppers zoom on mobile.

• Blurry images on your website: causes and fixes
• Product pages that turn browsers into buyers

Mistake 2: hidden delivery costs

Delivery charges that appear only at checkout are a leading cause of abandonment in Baymard's research. Show delivery costs, free delivery thresholds and delivery times on product pages and in the basket. Under UK law, unavoidable charges should not be hidden until late in the purchase.

• Checkout abandonment: fix the last step of the sale

Mistake 3: filters and search that do not help

Filters that use internal terms, cannot be combined or reset the page each time make large catalogues hard to browse. Offer filters shoppers care about (size, price, colour, availability), show counts and keep their place when they return from a product.

• Infinite scroll vs pagination for business websites
• Does your website need a search bar?

Mistake 4: forced account creation

Requiring an account before purchase is another common abandonment reason in Baymard's research. Offer guest checkout and invite shoppers to save their details after the order.

Mistake 5: long, fiddly checkouts on mobile

Checkouts with many fields, tiny inputs, no address lookup and no digital wallets are hard work on a phone. Cut fields, use autofill, offer Apple Pay or Google Pay, and show clear error messages.

• Mobile checkout design: fewer taps, more orders
• Form error messages that help visitors finish

Mistake 6: missing reassurance

Returns policy, delivery promises, secure payment and reviews should be visible near the add-to-basket button and in checkout. Consumers buying online have a 14-day cancellation right under the Consumer Contracts Regulations; explaining your returns process clearly reassures shoppers.

What does this look like in practice?

A pattern we see: a shop shows delivery charges only after shoppers enter their address, and requires an account. Showing delivery costs on product pages and adding guest checkout removes two common reasons people leave at the final step.

• See client work
• Website Design & Development for UK businesses
• Website design review: score your own site in 30 minutes

E-commerce design checklist

• Several sharp images per product, with zoom.
• Delivery costs and times on product pages.
• Useful, combinable filters.
• Guest checkout.
• Short mobile checkout with wallets and autofill.
• Returns, security and reviews near the button.

Next step

Buy one of your own products on a phone as a guest and note every moment of doubt or delay.