E-commerce UX — 2024
Mercato Checkout
A speciality grocer whose checkout worked fine on desktop and quietly lost half its mobile customers at the address step.
Mobile guest checkout completion rose 22% without a single new discount.
- Client
- Mercato Provisions
- Discipline
- Conversion-focused interface design
- Engagement
- 6 weeks, Jun to Jul 2024
- Team
- One front-end engineer, the head of e-commerce
Overview
Mercato sells imported pantry goods to about forty thousand repeat customers. Their desktop checkout converted respectably. Mobile, which was already two thirds of their traffic, converted at less than half that rate, and the assumption in the business was that mobile shoppers simply browse more and buy less.
I spent six weeks proving that assumption wrong and rebuilding the checkout around it.
Role
UX/UI designer, contract
6 weeks, Jun to Jul 2024 · One front-end engineer, the head of e-commerce
- Session-recording analysis across 400 abandoned mobile carts
- Checkout redesign covering cart, address, delivery and payment
- Error, empty and pending states for every step
- Accessibility pass on the full flow, including screen reader walkthroughs
- Interface copy and the post-purchase confirmation sequence
Problem
Watching four hundred abandoned mobile sessions gave a much sharper answer than the funnel did. Two thirds of them died on the same screen, and in the same way: the customer tapped into the address field, the software keyboard covered the autocomplete suggestions, and they scrolled the page instead of the list, losing the field focus and their partial entry.
The second failure was slower and sadder. Delivery windows were shown only after payment details were entered. Customers in rural delivery zones would fill in a card, discover the earliest slot was eleven days out, and leave. The information they needed to decide arrived after the work they resented doing.
Process
Watching, not surveying
I catalogued 400 abandoned mobile sessions and tagged each one by the last successful interaction. Two failure modes accounted for 71% of them. That turned an open-ended redesign into two specific problems with a measurable ceiling.
Moving the decision before the effort
Delivery window selection moved ahead of payment entry. Customers now see what is actually available to them before they are asked to do the tedious part. Conversion is partly a matter of not wasting people's time.
Rebuilding address entry for one thumb
Autocomplete became a full-height sheet that owns the viewport while it is open, so the keyboard cannot cover it and page scroll cannot steal focus. Partial entries persist if the customer backs out. Manual entry stayed one clear tap away for the addresses no lookup service knows about.
Designing the failures properly
I specified every declined-card, expired-basket, out-of-stock and address-not-found state, with a written recovery path for each. Most checkout redesigns look excellent right up until something goes wrong, which is exactly the moment a customer decides whether to trust you.
Testing on real hardware
The final prototype was validated on nine devices including two four-year-old Android handsets, because that is what a meaningful share of the customer base actually holds.
Outcomes
- +22%
- Mobile guest checkout completion
- −41%
- Address step abandonment
- +16%
- Average order value on mobile
- 0
- New discounts or incentives introduced
Order value rose because customers reaching the delivery step earlier tended to add items to reach the free-delivery threshold, a behaviour the old sequence hid until it was too late to act on.
Gallery
Tools
- Figma
- Hotjar
- Shopify
- BrowserStack
- Axe DevTools
