E-Commerce Checkout UX: Where Checkouts Leak Money

Baymard Institute has been running large-scale checkout usability studies for over a decade, and the headline number barely moves: roughly 70% of carts get abandoned. Think about who that is — not window shoppers, not bots. People who picked something out, put it in a cart, and then didn't finish.

Some of that is life. People comparison shop, get interrupted, were never fully serious. But Baymard attributes a meaningful slice of it to checkout usability alone, and estimates the average large e-commerce site could lift conversions around 35% purely through better checkout design. No new traffic, no bigger ad budget — just repairing the path between "add to cart" and "order confirmed."

For most stores, that makes checkout the highest-leverage design surface they own, and it's routinely the least-designed page on the site. Let's walk it step by step.

The cart page

The cart is the first commitment point, and it's where doubt starts to accumulate if you let it.

The common leaks: no shipping estimate anywhere, so shoppers proceed braced for a surprise. Quantity changes that reload the whole page. A checkout button competing for attention with recommended products and a newsletter signup. And weakest of all — no visible confirmation that "add to cart" even worked, leaving people clicking twice or wondering.

The fixes are direct. Put an estimated shipping cost — or a free-shipping progress bar, "add $12 more for free shipping" — right on the cart page. Make quantity and variant changes update instantly. And let the checkout button be the unambiguous star of the page; everything else on that screen is a distraction from the only decision that matters there.

Why do account walls kill checkout conversion?

Here's the highest-impact single decision in the whole flow, and stores get it wrong by default.

Baymard's research finds that roughly a quarter of shoppers have abandoned a purchase specifically because the site demanded an account first. A quarter. That's not a UX nitpick — it's a measurable revenue hole, and among everything in this article it's the cheapest to fix.

Guest checkout, as the default, always. Then offer account creation after the purchase — "save your info for next time?" on the confirmation page — when the shopper already has what they came for and saying yes costs them nothing. Implementing this usually takes a developer less time than the internal argument about it takes.

Shipping and contact info

This is where the friction physically lives, because it's where the form fields live.

Baymard's studies put the average checkout at around 23 form fields; the realistic minimum for a new customer is closer to 12–14. Every one of those extra fields is a fresh chance to hesitate, fat-finger, or quit — and plenty of them collect data the store never uses. A phone number nobody will call. A company name on a personal order. A "how did you hear about us" dropdown, wedged into the middle of someone trying to give you money (mid-checkout market research: a bold strategy).

Cut everything not required to fulfill the order. Auto-fill city and state from the ZIP code. Hide the billing address behind a pre-checked "same as shipping" box. And for any field you're unsure about, run the simple experiment: remove it and watch the completion rate. Stores are consistently surprised by how little they actually needed.

When should shipping costs be shown?

Ask shoppers directly why they abandoned and the most common answer is this one: costs that showed up late. Baymard attributes roughly half of checkout abandonment to unexpected costs appearing after the customer had already invested effort in the form.

What stings isn't usually the dollar amount — it's the sequence. A price that grows after commitment feels like a bait-and-switch even when it's just lazy information design.

So: surface shipping costs at the product page or cart, never as a final-step reveal. If exact costs depend on destination, show a calculator or an honest estimate rather than nothing. And consider a free-shipping threshold — it deletes the objection outright for a big share of orders and tends to nudge average order value up while it's at it (people will happily add a $14 item to dodge $6 shipping; economists have theories, shoppers have carts).

What payment options should a checkout offer?

Financial anxiety peaks here, which makes it exactly where trust signals belong and exactly where they're most often missing.

The leaks: forcing everyone through manual card entry when a chunk of them would finish in two taps with Apple Pay or Google Pay. A card form with no security signals in sight at the moment someone's about to type a card number. Fields that don't format or validate as you type, leaving people unsure their input took.

The fixes: put express payment options — Apple Pay, Google Pay, Shop Pay, PayPal — up top, not buried under the manual form; for a returning shopper, that's the difference between two taps and sixteen digits on a phone keyboard (plus expiry, plus CVV, plus the billing ZIP they'll mistype once). Put the security messaging directly beside the card input, where the anxiety actually is, not in the footer. Validate in real time so a typo surfaces immediately instead of after a failed submit.

Errors

An unglamorous step with outsized abandonment attached.

The classic failure: submit, get bounced back with "there was a problem," and hunt for which of twenty fields caused it — or worse, find half your input wiped. Mobile shoppers, typing on small keyboards with higher error rates, get punished hardest by exactly this pattern.

Inline validation is the repair: flag the specific field the moment the problem is detectable, in plain language ("Enter a valid email address," not an error code). Luke Wroblewski's research on form usability showed inline validation measurably cuts completion errors versus validating only at submit. It's not exotic to build. It's just often skipped.

The home stretch

Two smaller leaks near the end. A checkout with no progress indicator leaves shoppers wondering whether they're one field or five screens from done — and uncertainty is its own friction. A simple Cart → Shipping → Payment → Confirmation marker fixes it. And the confirmation page itself: if it just says "thank you," it's underemployed. Show the order summary, the expected delivery window, and what happens next. This is also the natural moment for the account-creation or newsletter ask — after the purchase, when there's nothing left to lose by asking.

Then do it all again on a phone

More than 70% of e-commerce traffic is mobile in 2026, and mobile checkout still converts at roughly half the desktop rate industry-wide. Everything above gets worse on a small screen: every field costs more, express payments matter more because typing is slower, and cramped tap targets turn annoyance into actual mis-taps.

If you haven't recently completed a purchase on your own store using your own phone — not the desktop site squinted at, a real phone in your hand — do that before anything else in this article. Most of our mobile-first design piece applies straight to checkout.

Auditing your own funnel

You don't need a redesign to find the biggest leak. Walk your checkout on a phone, start to finish, counting every field, every tap, every hesitation. Time it (actually time it: stopwatch, one thumb). If it takes you — someone with full trust in the brand — more than 90 seconds, a first-time visitor is having a worse run than you just did.

Then check the story against analytics: where do people actually drop — cart, shipping, payment? Each stage implicates a different fix from the list above. Some of those fixes are content changes anyone can make; others — express payment integrations, real-time validation, a checkout that isn't fighting the platform's defaults — are engineering, and belong with whoever builds your custom web applications. And if you're on Shopify, a surprising number of these problems trace to default settings and app bloat rather than the platform; we covered the usual suspects in Shopify store setup mistakes.

Why this page deserves the attention

Nobody puts "streamlined the shipping form" in a portfolio. Checkout is unglamorous work. But dollar for dollar it's some of the best design investment available to a store, for one reason: everyone in that funnel already decided to buy. You're not winning a new customer. You're getting out of the way of one you already have.

Losing customers at checkout and not sure exactly where? We build and audit e-commerce experiences for a living. Get in touch and we'll walk your funnel with you — the fix is often smaller than people expect.