Decathlon — App Redesign

Overview

A catalogue this wide is a gift on the shelf and a liability on a phone screen. Decathlon sells sixty-plus sports and thousands of product lines; the person opening the app wants one pair of running shoes. This redesign concept treats that mismatch as the entire brief — I designed it end to end (information architecture, flows, UI, design system) so that narrowing, not browsing, carries the experience from "I need shoes" to a confirmed order.

Unofficial concept redesign. "Decathlon" and its logo are trademarks of their owner; this project is not affiliated with or endorsed by Decathlon.

Context

Decathlon is a sports retailer with an unusually broad catalogue — 60–70+ sports and thousands of product lines, sold largely under its own portfolio of in-house "passion" brands like Quechua, Domyos, B'Twin, Kipsta, and Kalenji. It runs roughly 1,900 stores across 80+ countries, so the app isn't a niche store — it's a front door to a vast, sport-segmented range, with a real need to find product, check stock, and locate a store nearby.

That scale is the whole design problem. A catalogue this wide is a gift on the shelf and a liability on a phone screen, where one person is trying to find one pair of shoes. This concept reimagines the app around that tension.

Problem

A sports retailer's catalogue spans dozens of sports and thousands of products. For the user, all that breadth turns into friction: too many paths, slow narrowing, and product lists that don't reliably get you to the right item. Reviews of the live app echo this — people praise the range but report navigation and filtering complaints and product-listing errors, with filter suggestions flagged often enough to reach the product team. For the business, every extra tap between intent and checkout is a place to lose the sale.

So this redesign focuses on three things: fast discovery (categories, search, filters), product pages that make the buying decision easy, and a short, confident checkout. The constraint underneath all three is the catalogue's size — which is why discovery and narrowing carry the design rather than the home page alone.

Goals & signals

Each goal names the published research signal I'd test it against.

1. A broad query like 'running shoes' narrows to the right pair in a tap or two.

   Success signal

   Filter chips plus a full filter sheet, with option counts so no facet leads to a dead end.

   Baymard-aligned · untested

2. No one hits a zero-result dead end.

   Success signal

   Match counts shown on every filter option — the pattern Baymard finds only ~16% of sites get right.

   Verified in the design

3. Checkout stays short and unambiguous at the moment most carts are abandoned.

   Success signal

   Three steps, one primary action each, and the full cost shown before commit.

   Baymard-aligned · untested

What the published research says

This concept leans on published e-commerce research and a teardown of the live app; nobody was tested. Where a claim has a Baymard number behind it, I cite it — and where it doesn't, it's labelled design intent. Four things drove the direction.

1. The catalogue's scale is the core constraint, so narrowing has to lead.

   With 60–70+ sports and thousands of products across 80+ in-house brands, the design can't lean on a home page to do the work. That's why the flow runs categories → search → filter chips → full filter sheet, and why I treated filtering as a headline rather than an afterthought — which the live app's own filter complaints reinforce.

2. Faceted filtering has a documented "good" pattern, and most retailers miss it.

   Baymard's filter research and mobile faceted-search write-ups point the same way: show match counts on each option so users don't hit zero-result dead ends (the way Booking.com does), surface applied filters as removable chips above the grid rather than buried in a panel (ASOS's inline-chip model), and use an explicit "apply" step on mobile instead of disorienting live refresh. Baymard notes only ~16% of sites get faceted search right — so doing it well is a real differentiator.

3. Checkout is where e-commerce leaks, and the leaks are nameable.

   Baymard's cart-abandonment research puts the documented average around 70%, with unexpected extra costs the top non-browsing reason (48% of abandoners in their survey) and "checkout too long/complicated" a named driver. The average checkout runs ~5 steps and far more form fields than the ideal. That makes a short, low-field three-step checkout — and showing the full price breakdown up front — defensible design decisions, not stylistic ones.

4. Image-first browsing fits a visual catalogue.

   Mobile retail guidance favors photo-led grids with a consistent aspect ratio so products sit in predictable positions, and Decathlon's range is already organized around visually distinct passion brands per sport. That's the browse model sports apps like Nike's lean on, and it's the one this concept adopts.

Strategy

A few decisions shaped the product.

1. Image-first browsing.

   Home and category screens are dense, photo-led grids — sport and product imagery does the navigating, which suits a visual, multi-sport catalogue far better than text lists.

2. Fast narrowing.

   Search pairs prominent filter chips with a full filter sheet — price range, category counts, size, brand — so a broad query like "running shoes" (48 results) narrows to the right pair in a tap or two. The chips live above the grid so applied filters stay visible, and option counts keep the user off dead-end zero-result pages.

3. A short, legible checkout.

   A three-step flow (address, payment, confirm) with a clear bag summary, promo code, and one primary action per screen keeps a high-stakes moment simple. The full price breakdown — subtotal, discount, GST, delivery — surfaces in the bag before checkout, so cost is never a late surprise.

4. One brand colour, used with restraint.

   Decathlon's blue anchors actions and brand moments against a clean white interface, so the products and photography stay the focus. I tuned the live brand blue to a lighter shade for AA contrast on dark surfaces — an accessibility-driven adjustment I'd confirm against brand guidelines.

5. A consistent five-tab shell.

   Home, Categories, Travel store, Bag, Account — covering browse, buy, and manage — with a clear active state throughout.

Design

Get started

A branded blue splash — "your sports, your world" — into get-started and sign-in, then a photo-led home: a sale hero, a photo grid of sport categories, with location-aware delivery and search up top.

Browse & find

Categories present the full catalogue as a scannable image grid spanning every sport. A search query returns a two-column product grid with ratings and discounted prices; filter chips and a full filter sheet — price range, category counts, size, brand — narrow it fast. Product detail leads with a large product image, price with the original struck through, a rating, colour and size selectors, a description, and Add to bag — everything the buying decision needs, in one screen.

Bag & checkout

The bag shows line items with quantity steppers and savings, a promo-code field, and a price breakdown — subtotal, discount, GST, delivery — into checkout. From there, a three-step address → payment → confirm flow with multiple payment methods ends in a clean order-confirmed screen with continue-shopping and order tracking.

Account

A profile with club membership, orders, wishlist, saved addresses, and support. The orders screen carries status tabs — all, active, delivered, returns — plus reorder and review. Wishlist saves products as cards with quick add-to-cart, and a store locator maps store coverage with nearby stores and photos.

What revision caught

The checkout was the study's own research claim turned against it: the copy argued "three steps, one primary action each" while the first-pass screen merged address selection, payment choice, and Pay Now into a single view — with the stepper highlighting Confirm. The shipped screen is the confirm step the stepper promised: read-only address, the chosen payment method, a compact summary, one action.

V1 — caught in revision

Shipped

Craft

A clean, light interface anchored by Decathlon's blue; photo-led category and product cards; a consistent header and a five-tab bottom nav with a clear active state; a rating-plus-strikethrough-price pattern for products; and a bold sans for headings paired with a clean UI sans.