Real.de Grocery Checkout
How a structural rethink of the checkout flow — not a redesign — reduced drop-off at one of Germany's largest online grocery platforms.
Situation
A wall of decisions. Every single day.
Every day, thousands of people in Germany order groceries online through Real.de. Unlike non-food e-commerce, grocery shopping is uniquely complex: a single cart can hold 40–60 items, and choosing a delivery timeslot isn't a minor detail — it's often the deciding factor in whether someone completes the order or abandons it entirely.
The existing checkout was a single-page experience. On paper, this sounds efficient — no page loads, everything in one place. In practice, it created a wall of decisions that left users disoriented, unsure of where they were in the process, and — critically — unsure of what they were about to pay.
The drop-off rate told the same story the users couldn't articulate themselves. My task: figure out why people were leaving, and find a better way.
Process
Going deep before going wide
Before sketching a single solution, I spent time understanding the problem from multiple angles — qualitative and quantitative, live data and user behaviour.
- Understand Usability testing of the live checkout, Contentsquare heatmaps & rage-click analysis, Google Analytics funnel data, competitor benchmarking, NNg e-commerce report
- Explore Design sprint: HMW framing, Dot voting, Success metrics definition, Crazy 8s, Solution Sketch — cross-functional with product and engineering
- Materialise Prototype usability testing, high-fidelity design handoff, implementation QA and A/B test setup
Competitor analysis and NNg e-commerce guidelines shaped the initial framing.
Ideation workshop: HMW framing, dot voting, Crazy 8s with product and engineering.
Key Insight
The obvious answer would have been wrong
The easy path was to copy the non-food checkout from the same platform — it was already battle-tested and familiar to the team. But grocery ordering is a fundamentally different behaviour.
Why grocery ≠ non-food checkout
More items per cart. More cognitive load. And one critical moment — when will this arrive? — that non-food checkout treats as a footnote. In grocery, the delivery timeslot is a primary decision, not an afterthought. That gap became the key insight.
Usability testing confirmed it. Users would scroll up and down the single-page checkout, lose the timeslot selector, re-read the price summary multiple times, then hesitate — or leave. Contentsquare data showed disproportionately high rage-clicks and drop-off precisely at that step.
"The single-page format wasn't simplifying the process. It was hiding progress."
The sprint surfaced a clear hypothesis: users couldn't tell how close they were to finishing. The price kept changing as they scrolled. The delivery window felt buried. The problem wasn't the content — it was the structure.
Usability testing: scenarios, remote sessions, and structured feedback analysis.
Before: everything collapsed into one scrollable page. After: clear steps, persistent price, prominent timeslot.
Solution
Small change on the surface. Meaningful change underneath.
The idea wasn't radical — it was structural. Break the checkout into clearly named steps. Surface the timeslot selection earlier and more prominently. Keep the total price always visible, no matter which step the user is on.
We prototyped the multi-step flow and ran another round of usability testing. The difference was immediate. Users moved through the checkout without backtracking. They selected their delivery window confidently. When asked "how close are you to finishing?" — they knew the answer.
The final five-step flow: address, delivery timeslot, payment, summary, confirmation.
Full user flow with edge cases: the wireframe that went into usability testing and engineering handoff.
Experiment
Test the segment, not the whole platform
The hypothesis was grocery-specific — so the experiment had to be too. We did not A/B test the entire Real.de checkout. We ran a controlled test on users who had already started grocery web checkout in Germany, comparing the existing single-page flow against the multi-step structure.
How the test was scoped
Primary metric: checkout completion (started checkout → order confirmed).
Secondary signals: drop-off at the delivery timeslot step; rage-clicks on timeslot and price areas (Contentsquare).
Guardrails: time to complete checkout, cart value, payment errors — so a faster-looking flow could not win by hiding cost or breaking payment.
Prototype usability testing came first: users moved through the new flow without backtracking and could answer "how close are you to finishing?" at every step. Only then did we ship to a split test and measure completion on real traffic.
I no longer have access to the exact 2019 lift figure. What I can stand behind: the segment choice, the metric framing, and a meaningful improvement in checkout completion — enough to roll out the grocery web experience, not a cosmetic tweak kept in a slide deck.
Result
Validated by data, confirmed by users
The win was not a visual redesign — it was structural clarity for a high-stakes moment. Users needed to know where they were, when groceries would arrive, and what they would pay. The multi-step flow made that legible; the experiment confirmed it on the audience that actually mattered.
Not because we reinvented the wheel — but because we listened closely enough to understand this specific user, with this specific task. Deep research delivered a more precise solution than pattern-matching to what already existed elsewhere on the platform.
The most impactful design changes are sometimes the ones that look smallest from the outside. The real work is in understanding why something isn't working — not just reaching for the obvious fix.