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

étude de cas UX Cdiscount

Amélioration progressive de l'expérience utilisateur sur cdiscount.com.

Optimisation de l'espace client, rationalisation du processus de commande, conception du site mobile, amorce des principes de design adaptatif.

cas ux cdiscount
écrit en 2014
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 Cdiscount

Nous avons souhaité valoriser les missions Cdiscount, afin d'illustrer la démarche d'amélioration progressive de l'expérience utilisateur d'un dispositif digital de taille critique.

Les travaux ont été réalisés entre 2011 et 2014.
Visualisez le projet UX Cdiscount, le projet UX Cdiscount mobile, le processus de commande Cdiscount responsive.

A propos de Cdiscount

Cdiscount est le leader de l'e-commerce en France avec un chiffre d'affaires annuel supérieur à 1 milliard d'euros. Autant dire que toute intervention sur un tunnel qui voit passé un petit milliard nécessite des pincettes !

Le site marchand créé dès 1998 et devenu filiale du groupe Casino en 2000 est bien connu pour son positionnement atypique...

Outre son posiitonnement prix très agressif, ce site a su se démarquer relativement tôt grâce à une communication décalée et à une "persona" de site truculente voire rabelaisienne...

On peut dire que Cdiscount a été l'un des pionniers de l'e-commerce, bénéficiant de la prime aux premiers entrants, mais surtout l'une des premières marques à jouer la carte du design émotionnel.

Problématique digitale de Cdiscount

Chacun a déjà pu faire l'expérience de Cdiscount : comme dans une foire, on plonge ses mains dans le bac pour essayer de dénicher la bonne affaire.

Tout au long de l'expérience de consultation et d'achat, le consommateur est immergé dans un univers, qui, en perception, donne à croire que le dispositif marchand est le lieu ultime pour réaliser la meilleure affaire.

Toute la persona du site est organisée autour du concept de l'affaire qui tue : signalétique aguicheuse, tonalité éditoriale de marchand de tapis au sens positif du terme, compteur d'économie... Il ne s'agit pas que de perception, puisque sur beaucoup de références, Cdiscount parvient à se positionner de façon agressive et compétitive sur les prix, grâce notamment à une politique d'achat typée méga-volumes.

Bref, cdiscount.com est une machine de guerre e-commerce très efficace, dans laquelle semble-t-il, les utilisateurs aiment à se perdre en déambulant d'un rayon à l'autre, d'une accroche à l'autre, pour dénicher la bonne affaire : on est très loin du cousin éloigné en costume-cravate Amazon.

Cette personnalité de marque constitue un véritable contraste dans l'univers concurrentiel, ce qui est à la fois la plus grande force de Cdiscount, mais révèle également quelques faiblesses : le site est également connu pour son ergonomie parfois contestable voire une certaine roublardise (exemple d'ambiguïté bien connue : "voulez-vous continuer vos achats ou refuser la garantie" ?)...

Néanmoins, avec un chiffres d'affaires quotidien colossal de l'ordre du million d'euros, et pouvant dépasser la dizaine de millions d'euros par jour lors des grandes manoeuvres (soldes, Noël...), chaque aménagement de l'interface est sérieuresement étudié pour éviter d'enrayer une mécanique bien huilée.

Car c'est bien là le paradoxe de ce site marchand : Cdiscount connaît des performances extraordinaires en matière de taux de transformation tout en proposant une ergonomie "out of bounds", hors des sentiers battus et presque en touche...

C'est une preuve que l'expérience utilisateur ne se mesure pas seulement par le biais de la qualité de l'ergonomie : la perception, l'univers symbolique de la bonne affaire, la tonalité portant sur le matraquage des prix et un référentiel produit colossal de plus de 300 000 références sont autant d'arguments à mettre au compte positif de l'expérience utilisateur proposée par Cdiscount.

La problématique est donc la suivante : comment aménager l'interface, améliorer l'ergonomie, tout en maintenant les qualités intrinsèques du dispositif et ses capacités extraordinaires à transformer un simple visiteur en client. Autrement dit, comment rationaliser l'interface sans faire vasciller le modèle, en effet chaque pixel compte et chaque changement peut avoir un impact direct sur la rentabilité de l'e-commerçant, là ou une variation d'1% peut correspondre à 100 000 €...

IAFACTORY intervient depuis 2011 au côté de Cdiscount dans le cadre de l'amélioration progressive de l'architecture de l'information et de l'expérience utilisateur du dispositif, avec à la clé, des résultats parfois spectaculaires en matière d'amélioration des performances...

Amélioration progressive de l'UX

Optimisation de l'espace client

S'il est un espace crucial pour un site marchand de grande envergure, c'est bien l'espace client, dans lequel se cristallise une bonne partie des enjeux de la relation client.

C'est dans ce contexte que nous sommes intervenus pour la première fois, dans le cadre d'une mission visant à repenser les principes d'un espace client Cdiscount à bout de souffle...

Il s'agissait de repenser les principes d'interface, de proposer de nouvelles fonctionnalités et de réorganiser l'architecture de l'information de l'espace.

Les travaux se sont articulés autour de plusieurs étapes :

  • Une analyse de l'ergonomie existante de l'espace client
  • L'identification des chantiers d'optimisations : notamment, l'amélioration du SAV en ligne, la personnalisation de l'expérience du client et des offres commerciales en fonction de son profil, le développement de la dimension sociale...
  • La mise à plat de tous les services de l'espace client
  • La projection d'une nouvelle segmentation des rubriques de l'espace client
  • La confrontation des nouveaux principes d'arborescence par un tri par cartes utilisateur quantitatif
  • La construction de l'interface (wireframing) et la scénarisation de tous les écrans du périmètre de l'espace client, en veillant à injecter toutes les interactions des nouvelles fonctionnalités au sein des autres espaces du dispositif (descente catalogue, processus de commande...).

Certaines recommandations comme la création d'un assistant SAV dynamique en ligne ont permis de réaliser de très importants gains de productivité tout en améliorant la satisfaction des clients, lesquels bénéficiaient de nouveaux outils pour piloter leur commande, poser des questions, et entrer en relation avec Cdiscount.

Ci-après, quelques extraits de ces différents travaux réalisés en 2011. L'implémentation des principes préconisés est toujours en cours et l'on parle bien ici d'amélioration progressive sur le long terme.

analyses de l'existant - espace client CDISCOUNT
analyses de l'existant espace client Cdiscount - extract IAFACTORY

analyses es fonctionnalités existantes - espace client CDISCOUNT
analyses des fonctionnalités existantes espace client Cdiscount - extract IAFACTORY

évolutions de l'espace client Cdiscount - espace client CDISCOUNT
évolutions de l'espace client Cdiscount - extract IAFACTORY

listing des services - espace client CDISCOUNT listing des services, préparation tri de cartes, analyses espace client Cdiscount - extract IAFACTORY

architecture de l'information espace client Cdiscount
architecture de l'information espace client Cdiscount - extract IAFACTORY

conception, wireframe page d'accueil - espace client CDISCOUNT conception, wireframe page d'accueil espace client Cdiscount - extract IAFACTORY

conception, suivi de commande espace client Cdiscount - espace client CDISCOUNT conception, suivi de commande espace client Cdiscount - extract IAFACTORY

conception, wireframe SAV espace client en ligne Cdiscount - espace client CDISCOUNT conception, wireframe SAV espace client en ligne Cdiscount - extract IAFACTORY

UX du processus de commande tablette

Dans un deuxième temps, IAFACTORY est intervenue pour rationaliser le processus de commande et l'adapter à l'expérience tactile sur tablette.

Une application IPAD permettant de manipuler efficacement le catalogue venait d'être créée et il s'agissait de coupler cette application à un tunnel de commande efficace.

Les principes d'une "web-app" ont été explorés, pour intégrer une séquence web au sein de l'application.

Ce projet s'est révélé tout à fait complexe, car les cas d'utilisation et les règles de gestion du processus de commande furent extrêment riches et dynamiques, entrainant des difficultés dans la simplification des principes d'interface... Toutefois, après beaucoup de recherches, un procesus de commande simplifié a pu être modélisé et adapté à l'expérience tactile sur tablettes.

Les extraits ci-dessous permettent de visualiser quelques-uns des travaux réalisés dans le cadre de la conception de ce processus de commande spécifique, avec notamment quelques wireframes.

mécanique fonctionnelle - processus de commande tablette CDISCOUNT processus de commande tablette, mécanique fonctionnelle - extract IAFACTORY

identification - processus de commande tablette CDISCOUNT processus de commande tablette, wireframe, identification - extract IAFACTORY

adresse de livraison - processus de commande tablette CDISCOUNT processus de commande tablette, wireframe, adresse de livraison - extract IAFACTORY

mode de livraison marketplace - processus de commande tablette CDISCOUNT processus de commande tablette, wireframe, mode de livraison marketplace - extract IAFACTORY

créa - processus de commande tablette CDISCOUNT créa processus de commande tablette - extract IAFACTORY

UX du processus de commande mobile

Cette mission d'adaptation du processus de commande à l'expérience web mobile s'inscrivait dans la continuité des travaux de rationalisation du processus de commande en mode "web-app" à destination des tablettes.

A cette époque (fin 2011) le trend mobile prenait une ampleur considérable, et le déploiement du site mobile Cdiscount nécessitait de nombreux mois de développement. Il s'agissait donc d'assurer la transition en facilitant la prise de commande depuis un terminal mobile en créant la première brique du futur site mobile m.cdiscount.com.

Avant la conception du tunnel de commande mobile, il était difficile de finaliser un achat depuis son téléphone, car le séquençage du procesus et les différents écrans rattachés n'étaient pas du tout adaptés à une manipulation sur petit écran, sans souris...

Ces travaux de conception ont d'abord été initialisés par une étude réalisée par IAFACTORY, laquelle consistait à faire le point sur le parc de terminaux mobiles des utilisateurs du site Cdiscount, et ce afin de déterminer les différents points de ruptures ("breakpoints") les plus pertinents pour bâtir l'interface utilisateur.

Les illustrations ci-dessous reprennent une partie des travaux d'étude portant sur l'identification des breakpoint et quelques écrans de conception en mode scenario correspondant aux écrans structurants du processus de commande mobile : la scénarisation complète, couvrant tous les cas d'utilisation, portait sur une modélisation supérieure à 120 écrans, soit un sacré chantier !

analyse des indicateurs, principaux smartphone - processus de commande mobile CDISCOUNT processus de commande mobile, analyse des indicateurs, principaux smartphone - extract IAFACTORY

analyse des indicateurs, résolutions d'écrans et formats - processus de commande mobile CDISCOUNT processus de commande mobile, analyse des indicateurs, résolutions d'écrans et formats - extract IAFACTORY

analyse des indicateurs, breakpoints - processus de commande mobile CDISCOUNT processus de commande mobile, analyse des indicateurs, breakpoints - extract IAFACTORY

diagnostic des datas existantes - processus de commande mobile CDISCOUNT processus de commande mobile, diagnostic des datas existantes - extract IAFACTORY

wireframe identification - processus de commande mobile CDISCOUNT processus de commande mobile, wireframe identification - extract IAFACTORY

wireframe adresse de livraison - processus de commande mobile CDISCOUNT processus de commande mobile, wireframe adresse de livraison - extract IAFACTORY

wireframe mode de livraison - processus de commande mobile CDISCOUNT processus de commande mobile, wireframe mode de livraison - extract IAFACTORY

wireframe paiement - processus de commande mobile CDISCOUNT processus de commande mobile, wireframe paiement - extract IAFACTORY

créa - processus de commande mobile CDISCOUNT créa processus de commande site mobile Cdiscount

UX du site mobile m.cdiscount.com

IAFACTORY est intervenue en 2012 pour modéliser le fonctionnement complet du site e-commerce Cdiscount sur support mobile.

Il s'agissait d'une mission de grande envergure dans la mesure où le périmètre fonctionnel, ergonomique et éditorial du dispositif était très, très, très dense...

Près de 150 gabarits nécessaires pour faire tourner l'engin et des défis de taille en matière d'architecture de l'information et de navigation pour présenter et donner accès aux quelques 300 000 références du catalogue.

La conception du site mobile représentait une réelle opportunité pour faire évoluer l'écosystème Cdiscount en installant de nouveaux codes d'interface tout en essayant d'insuffler des principes de charte ergonomique plus standards.

Nous avons modélisé l'intégralité du site mobile avec une exigence de simplification, et les résultats ont été tout à fait spectaculaire : un saut quantique du taux de transformation progressant de 42 % dès les premières semaines de mise en ligne !

Ci-après, quelques extraits des wireframes réalisés et des spécifications fonctionnelles du projet de site mobile Cdiscount.

concepts - UX site mobile cdiscount UX site mobile cdiscount, concepts - extract IAFACTORY

parcours - UX site mobile cdiscount UX site mobile cdiscount, parcours - extract IAFACTORY

exemple de wireframe, accueil - UX site mobile cdiscount UX site mobile cdiscount, exemple de wireframe, accueil - extract IAFACTORY

exemple de wireframe, structure de navigation - UX site mobile cdiscount UX site mobile cdiscount, exemple de wireframe, structure de navigation - extract IAFACTORY

exemple de wireframe, panneau de navigation - UX site mobile cdiscount UX site mobile cdiscount, exemple de wireframe, panneau de navigation - extract IAFACTORY

exemple de wireframe, liste de résultats - UX site mobile cdiscount UX site mobile cdiscount, exemple de wireframe, liste de résultats - extract IAFACTORY

exemple de wireframe, fiche produit - UX site mobile cdiscount UX site mobile cdiscount, exemple de wireframe, fiche produit - extract IAFACTORY

exemple de wireframe, espace client - UX site mobile cdiscount UX site mobile cdiscount, exemple de wireframe, espace client - extract IAFACTORY

exemple de wireframe, suivi de commande - UX site mobile cdiscount UX site mobile cdiscount, exemple de wireframe, suivi de commande - extract IAFACTORY

créa accueil site mobile cdiscount - extract IAFACTORY créa accueil site mobile cdiscount - extract IAFACTORY

Les projets responsive...

En route vers l'adaptatif

Comme évoqué supra dans le contexte du projet et la culture spécifique de Cdiscount, très ancrée dans les codes du commerce, tout aménagement de l'interface du vaisseau amiral génère les craintes d'une perte de performance là où le dispositif est justement déjà très performant...

L'amélioration progressive et la recherche de petites victoires ("quick wins") nous a donc amené à considérer le trend responsive comme une nouvelle opportunité d'optimisation de l'expérience...

Mais le design adaptatif implique des changements en profondeur qui se heurtent à cette logique d'amélioration progressive, tant les fondations nécessitent d'être totalement repensées dans le cadre d'un projet responsive : dans le cas de Cdiscount, il n'est jamais question de refonte lourde impliquant le passage d'une version à une autre, mais de changements subtiles et progressifs déployés sur le long terme.

UX processus de commande responsive

Le premier projet visant la dimension adaptative consistait à créer un processus de commande adaptatif, pouvant être "câblé" à tous les supports e-commerce de la marque : le site desktop, le site tablette, le site mobile, les applications...

Comme évoqué supra, tout aménagement du processus de commande est extrêment complexe dans la mesure où les règles de gestion de l'enseigne sont de nature presque fractales... Autant dire qu'il s'agissait d'un réel défi à la représentation.

Notre intervention a été exécutée en 2 temps.

D'abord, nous avons réalisé une étude en analysant tous les indicateurs de performance du processus de commande de sorte à pouvoir identifier les parcours les plus fréquents (typologie des produits les plus fréquemment achetés, nombre moyen de produits dans le panier au moment de la commande, etc.). L'objectif était de parvenir à dresser une liste des 10 parcours les plus courants dans la prise de commande, de sorte à pouvoir créer une interface conçue sur la base des cas les plus fréquents (c'est un écueil courant pour le concepteur que de réaliser une conception complexe pour justement couvrir les cas marginaux... Pour IAFACTORY, les cas marginaux sont toujours considérer comme des exceptions et l'attention est portée sur la conception de séquences ultra-efficaces pour les cas les plus courants).

La réalisation de l'étude a permis de déboucher sur des statistiques particulièrement instructives, avec l'identification de 3 parcours représentant 70 % des prises de commandes (toujours cette loi de Pareto).

Le deuxième temps de l'intervention portait sur la définition de l'interface, ses règles adaptatives, et naturellement le séquençage de toutes les étapes de la prise de commande.

La conception du tunnel de commande responsive du dispositif Cdiscount représente l'une des missions les plus complexes jamais réalisée par IAFACTORY, tant il était délicat d'identifier des solutions de conception permettant d'atteindre un équilibre juste et propre entre design d'interaction (séquençage des étapes, des écrans et des tâches) et design d'information (mise en forme des écrans).

Une structure adaptative a été modélisée sur la base d'un prototype, avec projection du repositionnement des différentes zones en fonction du terminal de consultation, sur 5 points de rupture.

Ce travail de conception a été titanesque, avec plusieurs centaines d'écrans modélisés pour vérifier la faisabilité et le caractère opérationnel des solutions préconisées : tous les cas d'utilisation (plus de 10 cas d'utilisation comme par exemple : commande avec un produit, commande avec deux produits, commande avec un produit d'occasion dans le panier, etc.) ont été projetés pour chacun des 5 breakpoint ciblés (desktop, tablette paysage, tablette portrait, mobile paysage, mobile portrait), avec à la clé la modélisation du processus d'achat dans toutes ses combinaisons possibles sous forme de scenario...

Les extraits des travaux, ci-dessous, illustrent les différentes étapes de l'intervention : étude des indicateurs statistiques et identification des cas d'utilisation, construction de la structure modulaire, modélisation de la séquence de la prise de commande.

parcours prioritaires - processus de commande responsive processus de commande responsive, parcours prioritaires - extract IAFACTORY

grille modulaire - processus de commande responsive processus de commande responsive, grille modulaire - extract IAFACTORY

zoning, projection desktop - processus de commande responsive processus de commande responsive, zoning, projection desktop - extract IAFACTORY

zoning, projection tablette paysage - processus de commande responsive processus de commande responsive, zoning, projection tablette paysage - extract IAFACTORY

zoning, projection tablette portrait - processus de commande responsive processus de commande responsive, zoning, projection tablette portrait - extract IAFACTORY

zoning, projection mobile paysage - processus de commande responsive processus de commande responsive, zoning, projection mobile paysage - extract IAFACTORY

zoning, projection mobile portrait - processus de commande responsive processus de commande responsive, zoning, projection mobile portrait - extract IAFACTORY

exemple wireframe mode de livraison, projection desktop - processus de commande responsive processus de commande responsive, exemple wireframe mode de livraison, projection desktop - extract IAFACTORY

exemple wireframe mode de livraison, projection tablette payasage - processus de commande responsive processus de commande responsive, exemple wireframe mode de livraison, projection tablette paysage - extract IAFACTORY

exemple wireframe mode de livraison, projection tablette portrait - processus de commande responsive processus de commande responsive, exemple wireframe mode de livraison, projection tablette portrait - extract IAFACTORY

exemple wireframe mode de livraison, projection mobile paysage - processus de commande responsive processus de commande responsive, exemple wireframe mode de livraison, projection mobile paysage - extract IAFACTORY

exemple wireframe mode de livraison, projection mobile portrait - processus de commande responsive processus de commande responsive, exemple wireframe mode de livraison, projection mobile portrait - extract IAFACTORY

UX descente catalogue responsive

Pour poursuivre la thématique des défis à la représentation, IAFACTORY a accompagné Cdiscount dans la "dépétrification" de son catalogue produit...

Il s'agissait de créer une structure adaptative capable de soutenir le parcours complet de consultation du catalogue, de la page d'accueil locale jusqu'à la fiche produit, en passant par les incontournables listes.

Les difficultés de représentation les plus fortes ont été reoncontrées au sein de la fiche produit : là encore, le caractère fractale des règles de gestion, permettant de dynamiser quelques 300 000 références du catalogue, a généré son lot de difficultés...

Ci-après, figurent quelques-uns des principes de conception déployés pour la fiche produit responsive du site Cdiscount, lesquels furent naturellement formalisés au sein de wireframes haute-fidélité.

zoning fiche produit, projection desktop - descente catalogue responsive Cdiscount descente catalogue responsive Cdiscount, zoning fiche produit, projection desktop - extract IAFACTORY

zoning fiche produit, projection tablette - descente catalogue responsive Cdiscount descente catalogue responsive Cdiscount, zoning fiche produit, projection tablette - extract IAFACTORY

zoning fiche produit, projection mobile - descente catalogue responsive Cdiscount descente catalogue responsive Cdiscount, zoning fiche produit, projection mobile - extract IAFACTORY

wireframe fiche produit, projection desktop - descente catalogue responsive Cdiscount descente catalogue responsive Cdiscount, wireframe fiche produit, projection desktop - extract IAFACTORY

wireframe fiche produit, projection desktop - descente catalogue responsive Cdiscount descente catalogue responsive Cdiscount, wireframe fiche produit, projection desktop - extract IAFACTORY

wireframe fiche produit, projection tablette paysage - descente catalogue responsive Cdiscount descente catalogue responsive Cdiscount, wireframe fiche produit, projection tablette paysage - extract IAFACTORY

wireframe fiche produit, projection tablette portrait - descente catalogue responsive Cdiscount descente catalogue responsive Cdiscount, wireframe fiche produit, projection tablette portrait - extract IAFACTORY

wireframe fiche produit, projection mobile - descente catalogue responsive Cdiscount descente catalogue responsive Cdiscount, wireframe fiche produit, projection mobile - extract IAFACTORY

Résultats

Amélioration des performances

Les différentes interventions évoquées dans le cadre de cette étude de cas portent sur 4 années de travaux et d'accompagnement et certains chantiers sont d'ailleurs toujours en cours de réalisation et de déploiement (responsive, processus de commande...).

Il peut paraître simple à première vue d'optimiser un dispositif digital présentant des lacunes sur le plan ergonomique, mais la conjonction de tous les faisceaux nécessitant d'apparaître au sein de l'interface pour un méta-ecommerçant, oblige la tenue d'une démarche humble.

L'amélioration progressive de l'expérience utilisateur constitue dans ce cas de figure une stratégie payante, dans la mesure où tous les chantiers d'optimisations ont entrainés une amélioration des indicateurs de performances, parfois de façon spectaculaire !

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
Rationalisation de l'écosystème et conception du nouveau dispositif digital de la sécurité routière.
etude cas ux sécurité routière
ETUDE DE CAS UX
Etude de l'écosystème multi-sites et proposition de rationalisation de l'architecture de l'information.
etude cas ux premier ministre
ETUDE DE CAS UX
Etude de l'environnement concurrentiel et proposition de rationalisation du dispositif digital.
etude cas ux renault

...

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