Case StudyE-commerceWeb · Tablet · Mobile

Marathon/CRO

A conversion-led redesign of a large sportswear & active-lifestyle retailer — paying down years of UX and technical debt to make catalogue, product and checkout faster, clearer and measurably better for business.

Type

E-commerce · sportswear retail

Role

UX / UI Designer& CRO Specialist

Focus

Conversion rate optimisation

Scope

Audit → research → IA → UI → checkout

Marathon e-commerce site shown on a tablet

01 — Overview

Modernising a retailer where every metric is a business outcome.

Marathon is a large sportswear and active-lifestyle retailer with a wide network of physical stores and an established e-commerce platform serving a broad customer base across multiple categories and brands.

This wasn't a reskin. The brief was explicit: improve business performance, not just visual appearance. That meant closing the gap between where users dropped off and where the business needed them to go — through research, architectural changes and conversion-led design.

10k+

Catalogue items

Workstreams led

Core metrics moved

Unified design system

02 — Responsibilities

Eight workstreams, one conversion goal.

UX audit

Full heuristic review identifying the friction costing conversions.

Conversion rate optimisation

Data-informed changes to catalogue, product and checkout flows.

User research

Sessions and analysis that surfaced the wishlist insight driving change.

Information architecture

Restructured navigation and category hierarchy for a 10k+ catalogue.

E-commerce UX strategy

End-to-end strategy from discovery to post-purchase for retail.

UX / UI redesign

Full redesign of home, catalogue, product, search and account.

Checkout optimisation

Streamlined the funnel to reduce drop-off at every payment step.

Search & filtering

Rebuilt filtering for a wide catalogue — faster, cleaner, smarter.

03 — The key challenge

Years of UX & technical debt standing between users and checkout.

The platform had accumulated significant debt — an outdated interface, poor information architecture, complex navigation and a slow, friction-heavy checkout. Each issue, individually manageable. Together, they quietly suppressed every conversion metric the business cared about.

Goal

Measurable lift in conversion & AOV

Reality

Outdated UI, tangled IA, slow checkout

04 — Approach

Remove friction at every step from browse to buy.

One principle across every surface: shorten the path to a decision. Cleaner navigation, a product page that answers objections, and a checkout that doesn't get in the way — all rebuilt on a responsive system.

/ 01 — Catalogue & navigation

Find it faster

An information architecture you can actually navigate.

The old hierarchy hid products behind ambiguous categories. The redesign opens with a clear catalogue — breadcrumbs, tidy subcategory tiles and a persistent filter rail — so a shopper goes from “Men” to the exact jacket without guessing.

Restructured categories — jackets, windbreakers and more, mapped logically.
Always-on filters — brand, size, gender and price never more than a tap away.
Clear breadcrumbs — shoppers always know where they are and how to go back.

/ 02 — The product page

Answer the objection

A product page that closes the sale.

Everything a buyer needs to commit sits above the fold — gallery, sizes, price and discount, and a prominent add-to-cart — with delivery, fitting and payment reassurance alongside.

Decisive buy box — size, price, discount and add-to-cart in one glance.
Trust built in — delivery, free fitting and payment options reduce hesitation.
Reviews & alternates — social proof and colour swaps keep the visit going.

/ 03 — Search & filtering

Narrow with intent

Filtering that does the heavy lifting.

With 10,000+ items, discovery is the conversion lever. A faceted rail — category, brand, gender, size and price — plus clear sort and per-page controls let shoppers carve a huge catalogue down to a short, buyable shortlist on any screen size.

Faceted filters — stack brand, size, gender and price without a reload maze.
Sort & density — “latest”, price and per-page controls put users in charge.
Promo signposting — discount and bestseller flags surface the right items.

/ 04 — One experience, every screen

Responsive by default

The same store, sized to the device.

Most traffic is mobile, so the redesign is responsive from the ground up. Catalogue, product and the sticky buy bar reflow cleanly from desktop to phone — add-to-cart and favourite stay within thumb reach on the smallest screen.

Sticky mobile buy bar — add-to-cart pinned where the thumb expects it.
Reflowed grids — two-up product cards keep imagery large and tappable.
Consistent components — one card, one buy box, every breakpoint.

05 — The notable insight

People were using the cart as a wishlist— because there wasn't one.

Research surfaced a quiet behaviour with loud consequences: many shoppers loaded the shopping cart as a save-for-later list — or to plan an in-store visit — simply because the platform had no way to bookmark a product. The cart looked busy; intent to buy was being misread. Adding a dedicated ‘Add to Favourite’ gave that intent its own home and let the cart mean what it should.

Mobile Add to Favourite, born from research

06 — Design system

One retail system, every breakpoint.

Shared tokens, components and patterns that scale from mobile product cards to wide desktop catalogue grids — keeping the brand consistent while conversion takes priority.