La Redoute

La fiche produit est la page la plus visitée du site. C'est aussi celle dont l'expérience avait le plus vieilli : parcours mobile perfectible, composants datés, accessibilité et performance à renforcer.

L'enjeu est international — La Redoute est présente en propre dans 7 pays et commercialise ses produits dans 26. Chaque modification se répercute sur l'ensemble des marchés.

Et la refonte s'est doublée d'un changement de stack technique. Il ne s'agissait pas seulement de redessiner : chaque zone devait être reconstruite sur de nouvelles fondations, puis remise en production sans que l'utilisateur ne perçoive de rupture.

D'où le parti pris qui a structuré tout le projet : aucun big bang. Un découpage zone par zone, chacune traitée de bout en bout — recherche, conception, test, spécification, développement, recette — puis livrée et mesurée indépendamment. Six quarters, un périmètre à la fois.

Le périmètre ne se limite pas à neuf zones : il couvre le layout, les informations produit, les choix, l’achat et les contenus qui accompagnent la décision. Le glossaire de la PDP et les lots de travail permettent d’en lire l’étendue.

Plus de 30 composants ont été conçus. En comptant leurs variations et tous les cas à gérer, l’ordre de grandeur est de 100 à 150 déclinaisons.

Le premier chantier de la PDP a été la refonte complète du layout et de son comportement à chaque breakpoint. Avant de travailler les composants, il fallait garantir la bonne visibilité des colonnes et une répartition cohérente entre les médias et les informations d’achat.

L’ancien carrousel ne mettait pas suffisamment les produits en valeur. Le nouveau layout permet d’intégrer une galerie média plus généreuse, tout en gardant les informations et les choix produit lisibles. La conception est menée en mobile first, puis déclinée sur les autres largeurs d’écran.

Le layout pose le cadre ; la galerie donne ensuite toute sa place au produit. L’ancien carrousel laisse place à une présentation plus généreuse des médias, avec une navigation entre les images, la vidéo et les vues 360°.

Cette évolution est actuellement en production. La capture ci-dessous montre la navigation dans la galerie réelle ; les autres évolutions de la fiche produit sont encore en preview.

Sur un produit configurable, choisir n'est pas trivial : un canapé se décline en nombre de places, matière, option convertible et orientation de la méridienne.

Plutôt que d'empiler les sélecteurs sur la page, les options ont été regroupées dans un panneau latéral qui guide le choix pas à pas : une option sélectionnée en appelle une autre, jusqu'à la validation.

Le pari : accepter un clic supplémentaire pour supprimer le risque d'oubli.

Trois participantes sur desktop ne s'attendaient pas à ce qu'un clic sur une pastille ouvre un panneau latéral. Le format du bouton ne laissait pas deviner le comportement.

Le panel reste la bonne réponse — le taux de réussite le confirme — mais l'affordance du déclencheur a été versée au backlog d'itération.

Découvrabilité. Rien n'indique qu'il existe d'autres coloris. Les participantes qui arrivent directement sur la fiche produit passent à côté de teintes disponibles — sans jamais savoir qu'elles ont manqué quelque chose.

Lisibilité. Trois participantes sur cinq ont essayé de taper sur les vignettes pour les agrandir. Sur un écran de téléphone, et selon la luminosité ambiante, une pastille de quelques millimètres ne suffit pas à distinguer un beige d'un blanc.

L'absence de libellé textuel à côté de la couleur n'est pas un confort. C'est un critère RGAA : une information ne doit pas être portée par la couleur seule. Le libellé existait, mais il fallait ouvrir le panneau des tailles pour y accéder en mobile.

Un même correctif résout les deux problèmes — l'un d'usage, l'autre de conformité.

Deux évolutions ont été conçues à la suite de ces tests :

1. Un signal visuel explicite indiquant que d'autres coloris sont disponibles, plutôt que de compter sur la découverte du swipe.
2. Un accès direct au panneau de choix des couleurs, où les teintes sont affichées en grand et nommées.

Arbitrées avec le produit et le développement au regard de l'impact conversion et de la faisabilité technique, puis intégrées à la zone avant mise en production.

La wishlist prolonge le parcours sans imposer un achat immédiat. Le panneau d’ajout a été repensé pour mieux identifier le produit et la liste dans laquelle l’enregistrer.

Dans l’existant, le produit occupe une grande partie du panneau et les listes sont présentées sous forme de lignes de texte. La nouvelle proposition compacte le récapitulatif produit et distingue chaque liste par une vignette, son nom et son nombre d’articles. La liste sélectionnée est signalée par un contour, et la création d’une nouvelle liste reste accessible.

Concevoir ne suffit pas : encore faut-il que ce qui est conçu arrive intact en production — et survive au changement de stack.

Pour chaque zone, le delivery devait détailler tous les use cases (cas d’usage), les edge cases (cas limites), le functional design (règles et comportements) et les spécifications techniques. Les états, variantes, breakpoints, déclinaisons internationales et critères d’accessibilité faisaient partie de cette documentation, challengée avec les équipes Design System et développement.

Le design system de La Redoute repose sur une architecture de design tokens synchronisée entre Figma, Supernova et GitLab. Concevoir dedans suppose de penser en variables plutôt qu'en valeurs — et de n'introduire aucune décision qui ne puisse se propager à l'ensemble des supports.

Un process de QA design a accompagné chaque livraison, de la review technique jusqu'à la validation avant mise en production. Travail en Scrum, avec un quarter d'avance sur les équipes de développement.

La refonte s'est accompagnée d'un changement de stack sur la page la plus visitée du site. Dans ce contexte, le premier résultat attendu était l'absence de rupture : aucune régression constatée sur les indicateurs de la page après mise en production.

Confronter les idées aux utilisateurs encore plus tôt. Les tests faisaient déjà partie de la démarche. Je chercherais à raccourcir davantage le délai entre une idée et sa confrontation aux usages réels, pour disposer plus vite de données convaincantes.

Ces données permettent de trancher les discussions sur des faits plutôt que sur des préférences. L’objectif : réduire les débats inutiles, accélérer les décisions et les cycles de mise en production.