Designing checkout for a bookshop losing buyers halfway through
One order model, costs shown before they're charged, and failures that keep what you typed.
Seven in ten carts are abandoned. Almost none of it is about how the page looks.
I had six people lined up to interview, and I chose not to. On an earlier project I ran ten interviews, and they were great for understanding how people think. They weren't enough to show how often a problem happens. Checkout abandonment is a question about thousands of shoppers, and six conversations can't answer it. So I used large published studies of real shoppers instead. Their findings came down to four fears, and those became my brief.
I asked three questions about each fear. The answers pointed to the fix.
It started with a mistake: my first draft charged the wrong total
It was a prototyping problem. In Figma I linked screen to screen, but I never connected the book format and quantity options to the price container. Each screen showed its own numbers, so they drifted apart. Fixing it showed me how much depends on components being connected: a properly built prototype catches this kind of error and saves work later.
One money model, and every screen only reads from it
Ask for seven things, and let some people answer nothing
2
Each line answers something the shopper is already asking
What's in the basket decides which steps you see
Build the failure states, don't just describe them
When something fails, nothing you typed is lost, and you're told exactly what happened.
Now I write the data model before I draw the second screen
Never take a flow for granted. There's always a gap.
A happy path that works proves very little. The gaps only showed up once I built what happens when things go wrong, and clicked through it the way a shopper would.
Once the screens were wired to real data, I could see how each component depended on the others. When you know what you're doing, a prototype gets you there faster than static screens.
Telling the shopper something once isn't enough. They may need the same fact again further down the flow, so it has to appear on the pages where it matters.
Checkouts, forms, settings. Anywhere money is involved and one wrong word makes someone stop trusting you.
A Uxcel challenge brief. The shop is invented, the research is real, and I'm not claiming a result.
