This case study is protected

This project is under NDA. Enter the password to view.

Incorrect password. Please try again.

Back to portfolio
Back to Home

Fixing the Funnel — +9.4% Conversion Uplift for ZooRoyal

Role Senior Product Designer
Team UX Researcher + Product Manager
Timeline February 2022 – June 2022
Platform Web — desktop & mobile
E-Commerce UX Research Checkout Optimization Mobile-First B2C

Turning a leaky funnel into a cleaner buying experience

ZooRoyal (REWE Digital) had over a million visits monthly and a well-stocked pet product catalogue. But the data told a messier story — overall conversion at 4.98%, guest checkout abandonment at 45%, and 53.6% of orders coming from mobile without a mobile-first experience. The business case: a 4–10% uplift would mean €1.2M–€3M in additional annual revenue.

"How might we improve the buying experience of ZooRoyal?"

Two failure points dragging conversion down

The checkout funnel and the category pages were both losing users — but for different reasons.

  • Discovery friction: opaque sorting, broken search, and overwhelming filters caused users to abandon before they even reached the cart
  • Guest checkout abandonment: only 55% of guests progressed vs 71% logged-in. Error messages were missed in 20% of visits, and payment methods were unchangeable mid-flow
  • Mobile was carrying the business — 65% of checkout visits came from mobile — without a mobile-first design
Checkout funnel analysis showing drop-off points
Checkout funnel analysis revealing the gap between guest and logged-in user completion rates

Existing research that shaped every decision

Filters were causing users to give up, not narrow down

A 2019 mobile usability lab test revealed the core discovery problem. Users reached for filters instinctively — but the overwhelming number of options caused them to abandon rather than refine. Product sorting felt arbitrary, giving users no confidence they were seeing the most relevant results.

Guest checkout had a structural confidence problem

An August 2020 analytics deep-dive exposed the checkout gap. The biggest drop occurred between Cart and Confirm for non-logged-in users. Error messages appeared in 20% of visits but were easy to miss. Payment methods were unchangeable once selected — affecting 53% of visits — and the Payback loyalty card integration created confusion rather than value.

Mobile was carrying the business — but the experience hadn't caught up

Mobile underperformed desktop by approximately 10 percentage points at the cart-to-confirm step, despite 65% of checkout visits coming from mobile devices. The experience had never been designed mobile-first.

Usability testing validated direction before shipping

Five participants completed moderated sessions testing the filter interaction and the cart/sign-in flow. Simplified filters reduced hesitation. A reworked cart flow increased confidence. Edge cases were caught before development, saving engineering time and preventing issues from reaching production.

Usability testing session with post-it notes
Research wall from moderated usability testing sessions

Deliberate structure over disconnected redesigns

Setting direction

The engagement started with structured problem definition alongside the PM. We reviewed existing research and Mouseflow/GA metrics together. There was a real risk of producing two disconnected redesigns — one for the category page, one for checkout — without shared foundations. No Design System existed. The existing design had been built from marketing and print assets, not product thinking.

Two instruments to provide shared structure

To prevent fragmentation, we created two instruments. First, a style guide covering typography, colour, spacing, and component states. Second, three design principles to guide every decision:

  • Emphasis — Make the most important action unmissable at every step
  • White space — Reduce visual noise so users can focus
  • Repetition — Use consistent patterns to build familiarity and trust

"Users weren't failing because the shop lacked features — they were failing because too much was competing for their attention at once."

Rethinking discovery on the category page

The category page had an information hierarchy problem. Dense product grids, filters that dominated the mobile viewport, and invisible sorting controls all competed for attention. The redesign introduced fewer and clearer filter options, a prominent active filter state, and a restructured product grid. A taxonomy overhaul was blocked by active marketing campaigns — so a partial fix was made deliberately, addressing what could be changed without disrupting revenue-generating promotions.

Fixing checkout friction point by point

The cart transition was addressed with a micro-interaction bridging the product page to the cart, making the price summary legible and surfacing Payback points at the moment of decision. The payment step was redesigned so the selected method was clear and changeable inline, with auto pre-fill of address from PayPal or saved card data. Error states were rebuilt for mobile visibility — larger, colour-coded, and positioned where thumbs naturally rest. The guest path was simplified into a genuine friction-free option. A key platform constraint shaped the work: ZooRoyal ran on a website builder, not custom code. Multiple redesign rounds were needed to work within those limits.

Style guide and design system documentation
Style guide drafted to reduce ambiguity and provide shared structure across surfaces

Cleaner surfaces, confident decisions

Category page

A cleaner product grid with simplified, consolidated filter logic and improved sorting. The layout was designed mobile-first, with white space and emphasis principles applied consistently. Users could scan products faster and filter without feeling overwhelmed.

Checkout cart

The cart was redesigned confidence-first: affirming copy, a clear price breakdown, Payback points surfaced at the decision moment, and visible payment methods. The mobile form was optimised for single-thumb use, reducing the physical effort of completing a purchase on a phone.

Checkout confirm & flow

Error states were reworked to be unmissable on mobile — larger, better positioned, and colour-coded. Payment methods became editable inline with auto address pre-fill from PayPal or saved cards. The sign-in overlay was simplified, removing unnecessary steps that had been adding friction without adding security.

Redesigned category page — desktop and mobile
Category page — simplified filters, cleaner product grid, mobile-first layout
Redesigned product page — desktop and mobile
Product page — clear hierarchy, prominent CTA, responsive across devices
Widget page redesign
A collection of reusable patterns, components, and screens developed across the redesign

All targets met or exceeded

+9.4%
Conversion rate uplift
-11.7%
Guest checkout abandonment reduction
-32.6%
Payment step drop-off reduction

The conversion improvement landed at the top end of the €1.2M–€3M business case. The guest checkout gap narrowed from 16 to under 5 percentage points. Payment step drop-off fell by nearly a third.

"Following delivery, the engagement was extended for a further year to tackle expanded scope — Homepage, Header, Search overlay, Sign-up, Sign-in, and Wishlist. That kind of extension doesn't happen unless the work produced visible results."

Acting on what's already known

Scope was drawn deliberately — and the extended engagement was proof it was the right call. The deeper learning: when research already exists, the challenge is having the discipline to act on it. The 2019 lab test had named the filter problem. The 2020 analytics had flagged the guest checkout gap. The work was synthesising those signals into a coherent redesign — and choosing what not to fix so what shipped could be done well.