Optimisation site ecommerce

Spécificités de l'intervention

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

Les travaux ont été réalisés entre 2011 et 2014.
Visualisez le projet UX dédié au catalogue e-commerce Cdiscount.
Vous pouvez aussi jeter un oeil au design UX du site mobile Cdiscount.
Autre projet à part entière : amélioration UX du checkout Cdiscount.
Enfin, l'amélioration de l'espace client constitue une autre intervention significative sur le plan de l'expérience d'usage.

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 numérique

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 aussi 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 est intervenue au cours d'une période de 3 ans entre 2011 et 2014 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, notamment sur le plan mobile...

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 (service après vente) 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 d'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.

Fort de ces premiers retours positifs, autant du côté des clients du site que des équipes en charge de la relation client numérique, la collaboration entre IAFACTORY et Cdiscount s'est poursuivie pour entrer dans le coeur du réacteur : la descente catalogue et surtout le processus de commande... avant de concevoir l'intégralité de la première version du site Cdiscount dédié à l'expérience web mobile, hors application.

UX du processus de commande tablette

Après l'amélioration de l'espace client, 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.

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) la tendance 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.

La scénarisation complète des gabarits rattachés à la prise de commande, via un terminal mobile, couvrant tous les cas d'utilisation, portait sur une modélisation supérieure à 120 écrans, soit un sacré chantier !

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 (hors checkout) 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. Les prémices d'un design system, pour ainsi dire.

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 !

Les interfaces adaptatives

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...

Tout aménagement du processus de commande s'avère véritablement 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, dans l'esprit, cette loi de Pareto qui se vérifie ici ou là, avec des chiffres plus ou moins équivalents).

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 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...

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...

Contrairement à une plateform e-commerce classique où la fiche produit se caractérise autour d'un fonctionnement relativement standardisé, moyennant quelques règles de gestion, le cas des fiches produits de l'e-commerce Cdiscount supposait un nombre conséquent de gabarits spécifiques en capacité d'accueillir tous les cas d'usage (produit, service...).

Amélioration des performances

Les différentes interventions évoquées dans le cadre de cette étude de cas portent sur 3-4 années de travaux et d'accompagnement ; certains chantiers ont nécessité des mois réalisation, pour un déploiement progressif, l'implémentation a donc été étalée sur plusieurs années.
Il peut paraître simple à première vue d'optimiser un dispositif numérique 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 !

Autre étude de cas liée

IAFACTORY vous invite à consulter l'étude de cas CARREFOUR,
celle-ci présente également des travaux de conception et de prototypage,
dans l'industrie de la grande distribution.