04 / Decathlon · Ecommerce · 2022Shipped product · End-to-end design

Build e-commerce around sport.

A mobile experience designed hands-on from discovery and product storytelling to checkout and post-purchase.

Decathlon home screen with interaction and component specifications

Discovery · Product detail · Checkout · Orders

Explore ↓

01 / Shipped craft

Let products behave like the sports they serve.

Motion, content and interaction worked together to make equipment easier to discover and understand on a small screen.

02 / Context

A catalog was not enough.

Decathlon serves beginners and experienced athletes across very different sports. The mobile experience needed to support direct product search without reducing discovery to a generic retail grid.

I worked hands-on across the complete product, from information architecture and interaction design to high-fidelity execution, component specifications and delivery. The app was released.

ProblemDeep catalog · Diverse levels of expertise
My roleSenior Designer · Hands-on end to end
CollaborationTry × Decathlon delivery model
OutcomeMobile product released

03 / Discovery

Start with what people want to do.

Sport, activity and context became the path into the assortment.

Home and search balanced fast access to known products with guided discovery across categories, content and personalized recommendations.

Long Decathlon exploration screen organized by sport and product category — Exploration across categories and products

Personalized Decathlon search experience — Search with personalized entry points

04 / Component craft

Specify the system at product resolution.

Reusable behavior covered information hierarchy, imagery, pricing, actions, pictograms and responsive variation.

Decathlon product card system with variants and specifications — Product-card variants

Decathlon sport pictogram specifications — Sport pictogram system

Decathlon button states and specifications — Action hierarchy and states

05 / Product detail

Make technical products understandable.

The page moved from product story to selection, proof and purchase without losing context.

Use media to explain the product in use.
Keep model and variation selection inside the buying context.
Stage technical information progressively instead of front-loading it.

Complete Decathlon product detail page — Full product story

Decathlon product selection sheet — Selection in context

06 / Checkout

Reduce friction at the commitment point.

Saved and new payment methods shared the same hierarchy, keeping totals and next actions stable as the form changed.

Decathlon checkout with a saved card — Saved card

Decathlon checkout with a new card — New card

07 / Post-purchase

Design the difficult moments too.

Return, exchange and cancellation were treated as core product flows, not secondary service pages.

Decathlon cancellation flow — Cancellation

Next case

Fiserv · B2B Conciliation View ↘