exclu mondiale :)
formation UX design !
53h de vidéo
60 études de cas
150 livrables - 160 wireframes
places limitées

étude de cas UX La Redoute

Optimisation de laredoute.fr.

Rationalisation de l'architecture de l'information et de la segmentation du catalogue. Optimisations ergonomiques et fonctionnelles du processus de commande.

étude de cas UX laredoute
note : ce projet a été piloté par DIGITAS (groupe Publicis), cadre dans lequel J.Muckensturm a assuré la conduite des missions en architecture de l'information.
écrit en 2010
et révisé en 2016 par
Julien Muckensturm
Architecte de l'information
icone linkedin
icone viadeo

La problématique digitale

Spécificités de la mission La Redoute

Nous avons souhaité présenter l’étude de cas La Redoute pour illustrer une démarche d’intervention dans le cadre de l’optimisation d’un chantier spécifique, sans déséquilibre du fonctionnement général du support.

Les travaux ont été réalisés en 2007.
Visualisez le processus de commande La Redoute et l'architecture de l'information La Redoute.


scenario animé

A propos de La Redoute

La redoute appartient au groupe redcats (filiale du groupe ppr) implanté à l’échelle internationale au travers d’une soixantaine de sites marchands dans les secteurs de la mode et de la décoration.

Acteur historique de la vente par correspondance, La Redoute a du réorienter son modèle pour être en phase avec les mutations de l’industrie, en investissant massivement le canal digital ; le dispositif marchand de La Redoute s’élargit aujourd’hui à l’échelle internationale (en europe, en russie, au canada, corée du sud…) et propose un catalogue multi généraliste riche de milliers de références dans les univers de la mode, mobilier, décoration, électroménager…

Cette problématique d’internationalisation oblige l’enseigne à travailler sur un dispositif interactif modèle, de type master, locaslisé dans chacun des pays, afin de réaliser des économies d’échelle et minimiser les coûts de conception et de maintenance de ses supports interactifs.

Les principales contraintes impliquées par un tel modèle résident dans le fait que le dispositif global partagé par l’ensemble des pays doit être viable, en tenant compte des spécificités locales en matière de technologie, d’usages, de législation.
En matière d’interface, cela implique notamment le fait que le dispositif proposé soit adapté aux configurations de consultations minimales (résolution de l’écran, performance).

C’est dans ce contexte que nous sommes intervenus en 2007 dans le cadre de deux missions complémentaires en architecture de l’information, visant à apporter des axes d’optimisation au master:

  • optimisation de la segmentation du catalogue et du header de La Redoute
  • optimisation du processus de commande

Problématique digitale de La Redoute

Deux problématiques à traiter :

La première, revenait à optimiser le header de La Redoute et les modalités de navigation proposées aux utilisateurs, qui par ajouts de nouvelles gammes de produits et services au fil des années, ne permettait plus de restituer efficacement le positionnement de l’enseigne

La seconde, consistait à refondre le processus de commande qui ne permettait plus d’agréger efficacement toutes les modalités et combinaisons logistiques offertes à l’utilisateur.

Dans les deux cas, il s’agissait d’optimiser le dispositif interactif pour le faire monter en gamme, en profitant notamment pour le header d’un élargissement de l’interface à une résolution de 1024 pixels de largeur (jusqu’alors le parc international comptait encore un large panel d’utilisateurs équipés d’écrans en résolution 800x600…).

Approche et solution - header

Analyse de l'existant

Refondre le header de La Redoute impliquait des incidences fortes en matière de navigation au sein du dispositif général ; il convenait donc d’apporter des solutions fonctionnelles équilibrées et viables pour ne pas déstabiliser l’ensemble du support interactif.

La première étape de notre travail a naturellement consisté à réaliser un audit ergonomique du header existant : obsolète et vieillissant, il avait mal survécu aux ajouts de nouveaux services et gammes de produits successives.

header d’origine de La Redoute, optimisé pour une résolution 800 x 600
header d’origine de La Redoute, optimisé pour une résolution 800 x 600

header La Redoute mal optimisé
header d’origine de La Redoute : point sur l'existant...

une richesse fonctionnelle et commerciale retranscrite efficacement
une richesse fonctionnelle et commerciale retranscrite efficacement

Diagnostic

Cette grande richesse fonctionnelle à retranscrire se traduisait dans un espace très restreint par 32 éléments cliquables (!) :

  • composé de 5 barres et groupes de navigation
  • avec une densité et une diversité des informations très élevée
  • une hétérogénéité globale qui nuisait à la clarté de l’ensemble
  • un manque criant de structure (typographie, couleur, placement, design)
  • un logo et un bloc marque vampirisé par son environnement
  • un registre composite pour les items de la première barre de navigation
  • un déficit de lisibilité pour la barre de navigation principale
  • catalogue : 13 entrées, retour chariot sur 2 lignes qui ne facilite pas la lecture en balayage

Au final, l’organisation du header mêlait à la fois le catalogue, de la captation, de la fidélisation, de la relation client et des services obligeant l’utilisateur à un important travail de classification…

Des études utilisateurs (test de perception, test d’utilisation) réalisées en parallèle par des cabinets spécialisés pointées les mêmes faiblesses…

Regrouper des services diversifiés et offrir des accès transversaux au sein d’une zone restreinte est un des apports du travail de l’architecte de l’information : pour autant, cette étape est souvent l’objet de luttes internes, chacun souhaitant positionner le service dont il a la responsabilité dans les zones chaudes et visibles de l’interface…

Aussi, nous apparaissait-il important de sensibiliser les équipes de La Redoute aux problématiques de rationalisation : nous avons à cet effet utilisé le panorama des tendances et des bonnes pratiques pour illustrer nos propos et équilibrer les remarques formulées dans l’audit ergonomique…

partis pris pour l’optimisation du header
partis pris pour l’optimisation du header

Solutions d'architecture de l'information

Sur la base du diagnostic établi par le biais de l’audit ergonomique, nous avons pu entamer le travail d’optimisation, en prenant le soin d’expliciter notre démarche d’intervention aux équipes de La Redoute : capitaliser sur les résultats des études utilisateurs, de l’audit ergonomique, et des pratiques efficaces pour cadrer le travail de conception

Une telle démarche peut sembler inutile, mais elle présente au contraire, des vertus pédagogiques en permettant aux interlocuteurs de suivre le fil de la conception (on évite ainsi les réactions de rejets induites par la confrontation directe des interlocuteurs aux solutions définitives).

L’optimisation du header de La Redoute passait par un gain en lisibilité, un travail de classification, et une restitution concise et simplifiée des univers de vente…

Cette approche impliquait une revalorisation du catalogue qui obligeait à un inventaire des rayons en vue d’une proposition de nouvelle segmentation…

L’inventaire du catalogue a été réalisé et ventilé au sein d’un fichier excel, puis, partant de tous les rayons identifiés, nous avons entrepris un travail de projection visant à organiser les univers de vente autour de traits communs afin de faciliter le travail de sélection des utilisateurs…

Le travail du concepteur, qui consistait dans ce cas à construire un système de classification sur des bases rationnelles, devait in fine se solder par une confrontation à la logique de classement de l’utilisateur par le biais d’un tri de carte afin d’ajuster les choix opérés aux usagers cibles.

En tous les cas, le travail de classification est parfois fastidieux/laborieux et passe obligatoirement par des essais, des corrections, des ajustements… les techniques tels que le mind-map sont particulièrement appropriées pour ce type de tâches ; une fois encore, présenter de tels éléments au commanditaire permet de retracer le fil des recherches pour éviter l’effet baguette magique avant-après

Il y a, dans la plupart des cas, toujours plusieurs façons de solutionner une problématique de conception, et c’est bien souvent la façon de les présenter qui les différencient et impactent sur la décision finale : nous attachons donc une grande importance à la pédagogie et à la présentation de nos recherches et investigations, aussi laborieuses soient-elles, pour leur caractère pédagogique.

Visant une logique de regroupement afin de simplifier l’interface et faire entrer l’utilisateur par des entrées généralistes, nous avons préconisé la fusion de certains univers de vente et services.

Ce travail d’organisation s’est conclu par la matérialisation d’une arborescence éditoriale, dans laquelle les spécificités propres aux catégories d’utilisateurs apparaissaient dans les niveaux inférieurs sous forme de filtre (femmes, hommes, enfants)…

Convaincre un commanditaire de l’efficacité d’une nouvelle segmentation est un exercice difficile qui se heurte quasi-systématiquement à des problématiques de culture d’entreprise (importance de tel département, influence de tel individu en charge de tel service…), aussi, est-il indispensable de démontrer l’efficacité du système proposé par la modélisation des niveaux inférieurs de l’arborescence, preuve de la cohérence globale des choix opérés.

Dans le cas de La Redoute, une des craintes majeures des équipes projets était de voir reléguer certaines gammes d’offres à un niveau inférieur de l’arborescence : il s’agissait donc également de prendre en compte dans la formalisation de l’arborescence les performances commerciales réalisées par tel ou tel rayon, afin de le valoriser d’une façon ou d’une autre (sémantique, niveau 1…).

mind-map visant l’optimisation de la segmentation catalogue La Redoute
mind-map visant l’optimisation de la segmentation catalogue La Redoute...

planche conceptuelle (animée…) visant à illustrer les regroupements
planche conceptuelle (animée…) visant à illustrer les regroupements

proposition de nouvelle arborescence du catalogue La Redoute
proposition de nouvelle arborescence du catalogue La Redoute

Matérialisation...

Pour rassurer les équipes projet de La Redoute, nous avons veillé à illustrer le fait que la nouvelle segmentation du catalogue produit et des services associés pouvait se traduire par différentes ergonomies et modalités d’interaction pour l’utilisateur.

Nous nous sommes donc attachés à modéliser deux systèmes de navigation différents, dans l’optique de les soumettre à un pré-test utilisateur et évaluer lequel pouvait se présenter comme une réponse d’évolution performante.

Cette approche permettait également de répondre aux enjeux de déploiement progressifs du nouveau header en terme organisationnel et d’expérience utilisateur :

  • intérêt organisationnel : la première version proposée était moins complexe et engageante en matière de déploiement
  • intérêt user expérience : la première version proposée marquait une évolution dans le modèle sans rupture ; en cadençant le déploiement du header autour de deux versions successives, nous évitions le risque de rupture frontale avec les habitudes de navigation des usagers.

Le premier système de navigation proposé misait sur des codes classiques alors que le second exploitait toutes les possibilités offertes par les modalités d’interface riche et valorisait davantage la dimension visuelle.

Au final, cette mission de conseil et de prospective a permis de nourrir les réflexions des équipes La Redoute de façon pragmatique et tangible : le choix s’est orienté pour la première version en temps 1, et le déploiement d’une navigation visuelle reste toujours à l’étude, même si pour le moment l’enseigne a souhaité privilégier les systèmes de panneaux de navigation pour leur caractère modulaire.

système de navigation 1 : classique, en prolongement du dispositif d’origine
système de navigation 1 : classique, en prolongement du dispositif d’origine

système de navigation 2 : visuel, en rupture avec le dispositif d’origine
système de navigation 2 : visuel, en rupture avec le dispositif d’origine

Notre approche - processus de commande

Analyse des cas

En 2007, La Redoute profite de l’ajout de nouveaux services de livraison et de nouvelles modalités de paiement pour revisiter son processus de commande : au programme, refonte ergonomique et fonctionnelle, augmentation des performances, diminution du taux d’abandon, simplification des parcours…

Le processus de commande de La Redoute représentait un défi intéressant en matière de conception : la modélisation des parcours et la formalisation de l’interface utilisateur devait tenir compte de nombreux facteurs de variabilité ; le travail d’architecture de l’information consistait donc, dans un cas similaire, à inventorier toutes les possibilités pour les traduire sous la forme d’une interface modulaire et flexible capable de répondre efficacement à toutes les combinaisons.

Concrètement, le cas de La Redoute était complexe à modéliser parce que :

  • les modalités de livraison proposées étaient liées au contenu du panier
  • l’utilisateur devait avoir la possibilité de grouper une commande (recevoir tous les produits en une fois), et la différer en cas d’indisponibilité
  • l’utilisateur devait avoir la possibilité de splitter une commande (recevoir les colis disponibles au fur et à mesure)
  • certaines modalités de livraison ne s’appliquaient qu’à une catégorie de produits (les produits encombrants ne pouvaient pas être retirés en relais colis, etc.).
  • le statut de l’utilisateur donnait droit à des avantages clients et des modalités de livraison et de paiement spécifiques…
  • les modalités de paiement devaient permettre la souscription immédiate d’un crédit en ligne (carte kangourou) ce qui impliquait une inter-opérabilité avec les systèmes partenaires, et offrir le paiement par avoir…

La variabilité des différents cas nous a semblé exiger la mise en place d’une interface réactive et privilégiant le feedback immédiat avec l’utilisateur ; pour ce faire, nous avons préconisé le recours aux technos AJAX pour la capacité offerte par cette technique à adapter l’interface, les instructions et les confirmations aux actions de l’utilisateur…

Notre premier travail a consisté à réaliser un audit ergonomique du processus de commande existant, en essayant de pointer les faiblesses, blocages et freins à l’utilisation : manque de transparence et de lisibilité des modalités de livraison possibles en amont de la démarche, instructions peu claires…

audit ergonomique du processus de commande d’origine audit ergonomique du processus de commande d’origine

Solutions de conception : panier

Le travail de conception fonctionnelle a débuté par la modélisation du panier: il s’agissait notamment d’offrir la possibilités aux utilisateurs de modifier les caractéristiques des produits directement depuis le panier (couleur, taille, quantité de produits) et ce afin de limiter les allers-retours avec la fiche produit.

Pour traduire visuellement toutes les composantes fonctionnelles et les spécificités ergonomiques d’un tel fonctionnement, nous avons utilisé la technique du wireframe-haute fidélité animé, pour illustrer l’intégralité des implications de surface et de structure à l’écran :

  • modification du prix total du panier
  • modification des offres commerciales spécifiques
  • mise en avant d’alertes contextuelles (exemple : encore x euros pour bénéficier de la livraison gratuite)
  • impact du choix du pays de livraison sur le process depuis le panier
  • etc.

extrait du storyboard checkout La Redoute : panier
extrait du storyboard checkout La Redoute : panier

scénario animé explicitant le fonctionnement du panier
scénario animé explicitant le fonctionnement du panier

scénario animé explicitant le fonctionnement du panier
scénario animé explicitant le fonctionnement du panier

cas d’un panier contenant 4 articles dont 2 encombrants
cas d’un panier contenant 4 articles dont 2 encombrants

Solutions de conception : livraison

Le travail de modélisation de la page de livraison s’est avéré plus complexe… il s’agissait de présenter, par ligne de produit, et selon leur encombrement, la disponibilité des produits et les modalités de livraison offertes pour chacun d’entre eux.

En effet, La Redoute avait retenu un système logistique ouvert permettant à l’utilisateur de sélectionner une modalité de livraison spécifique pour chaque catégorie de produits : cette stratégie complexifiait relativement l’ergonomie du processus de commande puisque l’utilisateur devait opérer des choix pour chaque produit, entrainant des cas très opaques.

  • voici un exemple de cas complexe que nous devions traiter : le panier contient 4 produits, parmi lesquels 2 produits encombrants dont l’un n’est pas disponible, et 2 produits non encombrants dont l’un n’est pas disponible… l’utilisateur doit choisir un mode de livraison pour chaque produit disponible et décider s’il souhaite ou non regrouper la commande des produits non disponibles… mais il doit également avoir le choix de différer sa commande en attendant que tous les produits soient disponibles… encore un casse-tête !

Afin de rendre le processus de commande le plus transparent possible, nous nous sommes attachés à le découper de façon à traiter d’une part la logistique des produits peu encombrants et d’autre part, la logistique des produits encombrants lorsque le panier en contenait…

L’interface proposait de nombreuses modalités de présentation permettant de signifier toutes sortes d’informations contextuelles relatives au choix de l’utilisateur.

En privilégiant le feedback utilisateur, au travers d’instructions de guidage et d’informations contextuelles, nous souhaitions rendre le processus le plus transparent possible et limiter toutes les incompréhensions pointées par les études utilisateurs à disposition.

Le découpage du processus en sous-étapes, précises et balisées, permettait une compréhension plus rapide des modalités offertes tout en simplifiant considérablement l’interface.

extrait du storyboard checkout La Redoute : livraison
extrait du storyboard checkout La Redoute : livraison

découpage de la commande : d’abord la logistique des petits articles…
découpage de la commande : d’abord la logistique des petits articles…

découpage de la commande : puis la logistiques des articles encombrants
découpage de la commande : puis la logistiques des articles encombrants

Solutions de conception : paiement

Concernant les modalités de paiement, les facteurs de complexité résidaient notamment dans le fait que l’utilisateur devait pouvoir payer le montant total de la commande à partir d’un ou plusieurs modes de paiement : par exemple, pour une commande de 300 euros, payer 100 euros avec des chèques cadeaux (carte kadéos ou avoir pouvant être combinés) et les 200 euros restants par carte bancaire (ou virement, ou chèque…).

Là encore, la combinaison multiple des choix proposés exigeaient une interface utilisateur flexible privilégiant le feedback et le guidage.

Aussi, pour matérialiser le fonctionnement de l’interface de paiement, nous avons capitalisé sur les éléments ergonomiques déployés dans les étapes précédentes du process et notamment les éléments riches (info-bulle contextuelle, panneau à déployer, etc.).

Les choix opérés en matière d’interface impliquant des feedbacks utilisateurs en réponse à chaque action, ont nécessité un travail collaboratif fin avec les équipes techniques pour déterminer les flux à dynamiser pour chaque fonction.

Au final, le processus de commande, basé sur un scénario animé présentant de nombreux cas d’utilisation, a permis aux équipes de rédiger les spécifications fonctionnelles et techniques, en vue de la production.

Le processus de commande définitif, en ligne, basé sur nos recommandations, a permis d’augmenter les performances du tunnel de transaction par une meilleure lisibilité des modalités de livraison et une limitation des zones de complexité dans les formulaires et les modes de paiement.

extrait du storyboard checkout La Redoute : paiement
extrait du storyboard checkout La Redoute : paiement

paiement : récapitulatif de la commande
paiement : récapitulatif de la commande

paiement : règlement d’une partie de la commande par avoir
paiement : règlement d’une partie de la commande par avoir

paiement : règlement du reste de la commande par carte bancaire
paiement : règlement du reste de la commande par carte bancaire

Résultats

Résultats

Les deux missions d’optimisation (processus de commande et navigation) ont toutes les deux été menées au travers d’une approche de conception guidée par les mêmes partis pris : simplification, transparence, lisibilité…

En matière de méthodologie projet, le choix de la technique du scénario animé a permis de fluidifier les échanges dans les ateliers de travail en impliquant notamment les experts techniques autour des enjeux ergonomiques.

D’un point de vue usager, les différentes études utilisateurs réalisées ont permis de confirmer les apports des solutions mises en place tant sur le plan de la perception que sur celui de l’utilisation.

Bilan de la mission réalisée pour La Redoute

Les missions réalisées pour La Redoute, impliquant d’importantes contraintes liées au modèle de l’enseigne, témoigne de l’efficacité d’approcher les problématiques d’optimisation par le prisme de l’architecture de l’information : chaque solution préconisée, en connaissance des implications fonctionnelles et techniques (comme l’optimisation de la navigation) peut ainsi se fondre dans le modèle existant sans déséquilibrer le fonctionnement général du dispositif.

Vous appréciez notre approche ?

UX design avec IAFACTORY.

On s'occupe de tout ce qui se rattache à la conception et on vous propose des services UX sur-mesure, en fonction de votre projet.
Si vous souhaitez vous faire accompagner en phase de conception

A partir d'ici, les internautes lisent aussi ces cas

ETUDE DE CAS UX
Conception et architecture de l'information du dispositif digital marchand du distributeur Conforama.
etude cas ux conforama
ETUDE DE CAS UX
Architecture de l'information et design d'expérience utilisateur des plateformes marchandes Auchan....
etude cas ux auchan
ETUDE DE CAS UX
Conception et homogénéisation de l'expérience utilisateur des dispositifs e-commerce du groupe Carrefour.
etude cas ux carrefour

...

Si vous recherchez des modèles à télécharger pour vos cartographies
Si vous souhaitez améliorer vos compétences en conception
Si vous avez besoin d'un peu d'aide pour votre projet digital