E-Commerce UX
Somebody adds a jacket to a basket at £89, goes to check out, and meets a delivery charge of £6.95 on the final screen.
Learn on the move: press play and turn your commute, walk or drive into time that grows your design career.
Listen to the full E-commerce UX course on DesignPath
They close the tab. Not because £6.95 is unaffordable, but because the number they had agreed to in their head was £89, and the product changed it at the last possible moment.
Baymard puts average cart abandonment at around 70%, and among people who abandoned for a fixable reason, extra costs at checkout is the single biggest at 39%. Nothing about that is a button problem.
What This Domain Changes
Money changes the patterns you already know in three specific ways.
Every step is optional.Nobody has to buy. A form somebody must complete for work gets tolerance that a checkout never will, which is why friction that is survivable elsewhere is fatal here.
Doubt is the real competitor.Not the other shop. Somebody who cannot tell whether the size is right, when it arrives or whether they can send it back does not choose a rival, they postpone, and postponed is lost.
The last screen carries the whole journey.Somebody has spent twenty minutes choosing and arrives at checkout already committed. A surprise there costs more than the same surprise on the product page would have.
Anatomy of a Storefront
Every online store, from a two-product shop to Amazon, is built from the same seven page types and one recurring component. The branding differs and the skeleton does not.
Knowing the skeleton matters because most stores are audited page by page, and the problems live in the joins.
The Seven Page Types
Home.Rarely the entry point. Most traffic arrives from search or an ad directly onto a product, so home is the page for people who already know the brand.
The listing page, or PLP. A grid of products with filters and a sort. Its job is comparison, which means the card has to carry enough to compare on: price, a real image, the one attribute people choose by.
The product page, or PDP. The page that has to answer everything before somebody commits. Its own article follows this one.
The cart.A review and a decision point, not a container. It is where the total first becomes real.
Checkout.The form. Baymard measures the average checkout at 5.1 steps with 11.3 form elements by default, which is roughly twice what most stores need.
The confirmation.The receipt, and the only page guaranteed to be read closely. Almost every store wastes it.
Order tracking and returns.After the sale, and part of the product. A store with an invisible returns policy is asking people to gamble.
The Price Stack
One component appears on five of those pages and changes on each: the price stack.
Its parts are the item price, the discount, the shipping, the tax or VAT, and any duty, service or handling fee. Together they make the total, and the whole commercial problem of this domain is where in the flow each part becomes visible.
Baymard finds that extra costs appearing late in checkout drive around 39% of abandonments, the largest single fixable cause. That is one component, revealed at the wrong page, doing more damage than any layout decision on the list above.
The Joins, Which Is Where It Goes Wrong
Three transitions carry most of the loss.
Listing to product, where the price shown on the card has to match the one on the page, including whether it includes tax. Product to cart, where availability and delivery estimate have to survive the move. Cart to checkout, where the account wall usually sits and where the shipping cost usually appears for the first time.
Baymard puts mandatory account creation at around 19% of abandonments and a checkout that is too long or complicated at 18%. Both are properties of one join.
What Each Page Owes the Next
The pattern behind all three joins is the same. Each page has to carry forward what the previous one promised, and add exactly one new thing without contradicting anything already shown.
A delivery date that appears on the product page and vanishes in the cart is not a missing feature. It is a promise withdrawn at the moment of commitment, and people read it that way.
Pro tip: Buy something from your own store at full price on a phone, and screenshot the total at every step. If the number changes without warning at any point, you have found the 39%.
