logo IAFACTORY
booster de site
expertise UX
design UX

Amélioration de site ecommerce exemple

étude de cas ux design

Exemple de conception de site web grande distribution : carrefour.fr.
Cette étude de cas UX design porte sur l'architecture de l'information et le design d'expérience utilisateur de tous les univers e-commerce du groupe Carrefour, déployés en Europe et en Asie.

La problématique digitale

cas ux carrefour
Révisé en Mars 2024

Spécificités de la mission Carrefour

Nous avons souhaité vous présenter l’étude de cas carrefour pour illustrer la complexité d’une stratégie digitale marchande à l’échelle internationale et ses impacts en terme d’interface et d’expérience utilisateur.

La mission a été réalisée en 2009 - 2010.
Visualisez le projet UX Carrefour...

A propos de Carrefour

Carrefour est le leader de la grande distribution en europe et se positionne au 2ème rang en matière de chiffre d’affaires à l’échelle mondiale, juste après l’américain wallmart.

Le groupe est implanté dans près de 30 pays et a revisité sa communication en 2009, en faisant évoluer sa charte graphique (lifting du logo, baseline, nouvelle charte graphique, évolution des packaging) et en modifiant le ton de sa prise de parole : la nouvelle identité de marque doit progressivement aboutir à la convergence vers une marque unique.

Parallèlement, le groupe carrefour mène la bataille des commerces de proximité en rationnalisant sa stratégie sur le terrain et en rebaptisant ses supermarché de ville : un groupe, mais plusieurs enseignes/marques (carrefour, champion, shopi, dia) qui doivent progressivement converger vers une identité commune (carrefour market, carrefour contact…).

Ces problématiques de rationalisation (internationalisation, nouvelle communication, évolution de la charte graphique, enseignes de proximité…) se prolongent dans la sphère digitale et exigent de la part du groupe la mobilisation d’importants moyens afin de solutionner tous les chantiers impliqués par une nouvelle stratégie digitale…

C’est dans ce contexte que nous sommes intervenus dans le cadre d’une mission de conseil en architecture de l’information, visant à aider carrefour à rationaliser son dispositif interactif, et ce, afin de faire converger de nombreux supports au sein d’une plateforme homogène et partagée à l’échelle européenne.

l’expérience de marque carrefour est fragmentée pour l’utilisateur l’expérience de marque est fragmentée pour l’utilisateur

Problématique digitale de Carrefour

Si carrefour peut revendiquer son leadership à l’échelle européenne par la force de son réseau de magasins physiques, les performances du groupe en matière digitale, en rapport, restent profondément marginales
Carrefour propose de nombreux services marchands et transactionnels en ligne, mais ne se hissent pas dans le classement des leaders de la vente en ligne, malgré le caractère revendiqué de généraliste multi-produits multiservices :

  • carrefour.fr : hub de redirection, portail de la marque
  • carrefour-online (ex boostore) : e-commerce (produits non alimentaire)
  • ooshop : site de courses en ligne (alimentaire)
  • carrefour.mobile : site dédié aux offres de téléphonie
  • carrefour voyage : site de l’offre voyage de l’enseigne
  • carrefour spectacles : site dédié à la vente de place de spectacles and co
  • téléchargement : mp3, vidéo, jeux-vidéos…
  • développement photo : tirage photo en ligne

En parallèle de cette offre de produits et services, carrefour propose d’autres prestations, dont notamment les services financiers et assurances au travers des services pass ; plusieurs services complémentaires restent à déployer progressivement sur le dispositif digital, dont le service drive (livraison des courses alimentaires dans le coffre de voiture), le service énergie, location de voiture, essence

Pour le groupe carrefour, pilotant l’ensemble des dispositifs interactifs à l’échelle européenne, la multiplication des services en ligne à l’échelle internationale pose clairement la question de la rationalisation des systèmes d’information et des plateformes marchandes

Les problèmes posés par la convergence des plateformes résident d’une part, dans les difficultés d’agrégation et de traitement des offres multi-univers, multi-produits, multi-services au sein d’un seul et même dispositif et d’autre part, dans le fait que le niveau de maturité digital de tous les pays, à l’échelle européenne est relativement hétérogène, et cela aggravé par les spécificités des modèles locaux en matière de logistique, d’offres, d’enseignes…

Il suffit de consulter les sites locaux de l’enseigne dans chaque pays pour s’en rendre compte : par exemple, les dispositifs français, italiens, espagnols, belges, ou russes présentent des modèles en ligne radicalement hétérogènes, et bien entendu aucune cohérence en matière graphique et ergonomique…

Pour apporter des solutions à l’ensemble de ces problématiques, le groupe est entré dans une stratégie digitale à long terme visant à opérer une migration et une convergence de toutes les offres au sein d’un dispositif commun, à l’échelle européenne : ce projet de master international a été motivé par la croissance progressive de l’activité e-commerce au sein du groupe et par la volonté de réaliser des économies d’échelle à moyen-terme.

De façon très concrète, la question qui nous a été posée est la suivante : « quel modèle de dispositif digital pouvez-nous vous proposer pour intégrer notre offre multi-univers et multi-produits au sein d’une seule et même interface, à l’échelle européenne, compte-tenu du fait que tous nos pays n’ont pas les mêmes modèles ? »

Pour rapporter ces problématiques à une échelle fonctionnelle et ergonomique, il convient tout simplement d’imaginer le cas suivant : « un utilisateur, quel que soit son pays, saisit la requête carrefour dans google, que lui propose-t-on ? »

Les réponses actuelles sont :

  • un site corporate
  • un site marchand pour les produits non alimentaires
  • un site marchand pour les produits alimentaires
  • un site marchand pour…

A chaque offre, un site : ergonomie différente, design différent, logique CRM et relation cliente différente… si bien qu’acheter sur plusieurs sites de l’enseigne revient à créer des comptes spécifiques pour chacun d’eux… ce manque d’unité global, défragmente considérablement le discours de la marque, et in fine, confronte l’utilisateur à un dispositif peu transparent sur lequel la proposition de valeur carrefour n’est pas toujours bien perceptible…

Bien que l’on comprenne que l’agrégation des offres ait été menée de façon progressive, par création ou par rachat (cf. ooshop), il reste à considérer que le modèle est multimarques… les sites ooshop ou l’ancien boostore (ancien nom du site marchand non alimentaire…) démontrent notamment la fragmentation du bloc marque carrefour.

à chaque problématique, un site : une expérience utilisateur désunie carrefour à chaque problématique, un site : une expérience utilisateur désunie

à chaque problématique, un site : des parcours cloisonnés à chaque problématique, un site : des parcours cloisonnés

perception diffuse du dispositif carrefour par les utilisateurs perception diffuse du dispositif carrefour

Notre approche

Vision cible

La complexité des problématiques à adresser nous a poussé à faire la proposition de travailler sur une vision cible, sorte d’idéal vers lequel tendre, agrégeant tous les cas les plus complexes, afin de disposer d’un modèle puissant et modulaire, offrant des possibilité de « dégradation » pour chaque pays ; en accord avec le groupe, un panel de plusieurs dispositifs en europe ont été défini afin de réaliser la mission sur des bases tangibles, partant des modèles les moins matures aux modèles les plus aboutis.

La vision cible consistait à construire un dispositif marchand mono-marque (type wallmart, amazon), agrégeant tous les univers de vente au sein d’un seul et même support, et surtout permettant d’embarquer tous les modèles de vente à chacune des offres (achat en ligne, retrait en magasin…).
Il s’agissait donc de réaliser un master qui serait ensuite implémentés par les pays, chacun devant prendre en compte :

  • les ambitions du groupe
  • la situation à date de chaque pays
  • les projets en cours ou à venir pour chaque pays
  • les objectifs à court terme

l’expérience de marque carrefour est fragmentée pour l’utilisateur
enjeu e-commerce du dispositif : convergence des marques

Solutions de conception

Audit des dispositifs interactifs européens

la Première partie de notre travail a consisté à réaliser un audit des principaux dispositifs interactifs en europe :

  • carrefour france
  • carrefour italie
  • carrefour espagne
  • carrefour belgique
  • carrefour russie

Dans chacun de ces pays la configuration était différente : en termes d’outils, d’approche fonctionnelle et graphique, d’organisation, d’offres ; de plus tous les pays étaient déjà engagés dans des projets différents.

ces Dispositifs pilotes, ont permis de définir les différents niveaux de maturité qui composaient la galaxie européenne des sites carrefour.
Les différences de modèles variaient du tout au tout :

  • le dispositif russe exclusivement corporate
  • le dispositif italien était non marchand, centré sur les promotions magasin
  • les dispositifs français et espagnols relativement avancés, proposant des plateformes multimarques agrégeant la quasi-totalité des univers de vente
  • le dispositif belge était conçu autour des marques hyper-super…

Et au final, aucun des modèles analysés n’étaient orientés à 100 % dans une logique e-commerce, tous étant centré sur la valorisation du magasin physique.

enjeu e-commerce du dispositif : le site e-commerce prime sur le magasin le site e-commerce prime sur le magasin

cartographie du dispositif carrefour fr cartographie du dispositif carrefour

principe du multifenêtrage : des sites en cascades, un dispositif désuni principe du multifenêtrage : des sites en cascades, un dispositif désuni

Approche par persona

Les périmètres fonctionnels, marketing et business de chacun des modèles ayant été établis, nous nous sommes attachés à approfondir l’exploration du dispositif le plus complet et le pus riche (le dispositif carrefour.fr) en réalisant notamment l’arborescence globale de la galaxie de sites.

Le travail de cartographie du dispositif français a été complété par un audit fonctionnel et ergonomique mettant notamment en lumière :

  • la richesse de l’offre impliquait une multiplication des points d’entrée
  • le hub de redirection carrefour, et sa matérialisation sous forme de page d’accueil était complexe et proposait plus de 100 liens dans un espace limité
  • les parcours proposés étaient cloisonnés
  • l’unité du dispositif n’était pas du tout perceptible
  • le principe du multifenêtrage complexifiait la compréhension générale
  • etc.

La phase d’étude et de diagnostic ayant permis de mettre en lumière les points de faiblesses des différents dispositifs, ainsi que les forces sur lesquelles nous pouvions capitaliser pour la refonte, nous avons pu travailler sur les différents profils d’utilisateurs amenés à consulter et utiliser les sites du groupe, au travers de la mise en place d’une approche par persona.

Pour ce faire, nous sommes partis des indicateurs et baromètres à disposition, ainsi que des statistiques de fréquentation et d’utilisation fournis par les outils de tracking ; en collaboration avec les équipes carrefour, nous avons définis un panel d’une dizaine d’utilisateurs types, représentatifs des principaux scénarios d’utilisation.

La modélisation des persona a permis de définir clairement les problématiques à adresser en matière de parcours destinés aux prospects, aux clients, aux logiques de fidélisation, à la relation avec la marque et la consultation des informations relatives au magasin de proximité, aux logiques de courses en ligne et de modes de livraison…
Grâce à l’approche par persona, nous avons réussi à fédérer les équipes projets autour des principaux parcours utilisateurs, et à entamer un travail de priorisation des réponses à fournir en matière d’interface.

Les méta-sections du dispositifs ont ainsi pu être dégagées, autour d’une logique de regroupement visant à proposer aux utilisateurs une approche unifiée du dispositif et surtout plus intuitive en matière de parcours ; les sections retenues :

  • un espace client agrégeant toutes les problématiques de gestion de la relation à la marque (achat, carte de fidélité…)
  • un espace de vente multi univers
  • un espace support (sav, faq, hotline…)
  • un espace corporate (marques, recrutement…)
  • un espace magasin (infos de proximités…)

scenarios de visite
scenarios de visite

approche par persona
approche par persona

esquisse des objectifs de visite
esquisse des objectifs de visite

Segmentation du dispositif

Afin de valoriser la dimension commerciale et e-commerce du dispositif, et dans le prolongement de la stratégie interactive du groupe, la logique de hub a été abandonnée au profit d’une entrée directe au sein des univers de vente.

L’optimisation de la segmentation du catalogue, réalisée en phase d’audit (audit des dispositifs européens et français), a permis de dégager les principales catégories significatives pour les utilisateurs : suite à nos entretiens avec les usagers, les logiques de classement par ordre alphabétique et surtout de différenciation entre les produits et les services ont pu être retenues.

Les problématiques de modularité et de flexibilités du catalogue, et de l’interface de façon plus générale, faisaient parties des enjeux forts à adresser : pour répondre aux besoins d’élasticité impliqués par les spécificités locales de chaque pays et l’évolution constantes des offres, nous avons mis en place un principe d’interface souple, permettant d’agréger jusqu’à 40 univers de vente dans un cas critique.

Naturellement, la construction de l’interface a fortement été influencée par le concept de flexibilité, ce qui nous a poussé à démarrer la conception fonctionnelle par la mise en place d’une grille modulaire.

Afin de répondre aux enjeux de modularité et aux exigences impliqués par l’adaptation aux spécificités locales, nous avons choisi d’orienter la construction de l’interface autour d’amples modules, occupant toute la largeur de l’espace, présentant les avantages d’être substituables aisément côté administrateurs, et permettant à l’utilisateur d’interagir avec une interface lisible et propre, en rupture avec les principes du multicolonnage fragmentant l’information et les interactions

Construit sur des bases de type tetris horizontal, l’interface du nouveau dispositif carrefour a été particulièrement bien accueillie par les utilisateurs, valorisant notamment les aspects de clarté et de simplicité.

Pour appuyer le côté épuré de l’interface, nous avons capitalisé sur les bénéfices des principes d’interface riche, pour contextualiser un maximum d’informations au sein de zone d’incitation pouvant être déployé (ou pas) par les utilisateurs.

organisation de l’interface autour des méta-sections et univers de vente
organisation de l’interface autour des méta-sections et univers de vente

le catalogue multi-univers carrefour optimisé
le catalogue multi-univers carrefour optimisé

grille modulaire : exploiter toute la largeur au travers de module flexible
grille modulaire : exploiter toute la largeur au travers de module flexible

principe d’interface riche : page d'accueil carrefour
principe d’interface riche : page d'accueil carrefour

Storyboard

Sur les bases ergonomiques et fonctionnelles proposées et validées par carrefour, nous avons décliné un parcours d’achat, de la page d’accueil jusqu’à la fiche produit, dans un premier temps au travers de storyboard haute-fidélité statiques, puis dans un second temps, par le biais de scénario animé.

Ce travail a débouché sur la réalisation d’un prototype graphique, manipulable, utilisé dans le cadre d’un pré-test utilisateur : les résultats ont été très positifs, et les ajustements apportés à l’interface ont été minimes, sans remettre en cause les principes globaux proposés.

De fait, nous avons naturellement été amenés à décliner ce travail de vision cible à un premier cas d’école, réel, matérialisé par le dispositif italien : tous les codes ergonomiques et fonctionnels ainsi que les bases du master multi univers et multi pays ont été appliqué dans la conception du site carrefour italie ; le dispositif italien reprend ainsi trait pour trait les principes d’interface du master, mais ne propose pas la vente en ligne : le scénario d’un master cible décliné en fonction des spécificités locales a donc été une réussite.

Dans cette optique, chaque dispositif pays est amené à tendre progressivement vers le niveau de maturité le plus aboutit en agrégeant tous les univers de vente autour d’un support e-commerce mono-marque partageant des codes ergonomiques et fonctionnels à l’échelle européenne.

La stratégie interactive prévoit l’homogénéisation des plateformes et de l’expérience utilisateur autour de fin 2012.

La mission de conception du master cible e-commerce de carrefour a été marquée par le traitement d’autres problématiques complexes dont notamment :

  • les capacités de l’interface a pouvoir gérer, sur la base d’un même socle, des problématiques de courses en ligne (présentant des spécificités très marquées : catalogue ultra-fragmenté, jusqu'à 15 000 références) et d’achats non alimentaires
  • la mise en place d’un processus de commande commun et d’un panier unique, agrégeant tous les univers de vente (acheter une télévision, un voyage, faire ses courses, impliquent des logiques différentes, mais l’interface devait permettre de regrouper toutes ces problématiques au sein d’un panier unique et proposer des finalisations de transaction partagées pour chaque type d’achat)
  • la mise en place d’un compte utilisateur commun à toutes les plateformes de vente, avec toutes les implications ergonomiques, fonctionnelles et techniques exigées par les principes d’identifiants uniques et de gestion personnalisée de la relation client

extrait des storyboards carrefour : accueil univers de vente
extrait des storyboards carrefour : accueil univers de vente

extrait des storyboard : liste de résultats
extrait des storyboards carrefour : liste de résultats

extrait des storyboard : fiche produit
extrait des storyboards carrefour : fiche produit

extrait des storyboard : page magasin
extrait des storyboards carrefour : page magasin

le dispositif italien
le dispositif italien

gestion du panier unique
gestion du panier unique

Résultats

Harmonisation de l'expérience

Compte-tenu de la complexité de la mission, et des problématiques à adresser, la mise en ligne du portail italien carrefour.it décliné sur la base du master en moins de 6 mois a été une réelle performance.

Dans ce prolongement, nous avons également travailler sur la conception fonctionnelle du prochain site de course en ligne - drive brandé carrefour dans le cadre de la refonte du site ooshop.fr : ce support sera déployé courant 2010, et sera progressivement rattaché au master global, courant 2011.

Au final, les travaux d’architecture de l’information (audit des dispositifs, segmentation du catalogue, approche par persona, conception du master, animation des ateliers) ont permis de fixer le projet sur des bases tangibles et opérationnelles, autour desquelles les équipes carrefour ont su rapidement s’accorder.

Bilan de la mission réalisée pour Carrefour

Le master e-commerce est en cours de déploiement dans les pays précités, et tous les dispositifs interactifs vont progressivement converger vers ce modèle, pour atteindre un niveau de maturité homogène courant 2012, temps nécessaire à la convergence des plateformes.

Pour IAFACTORY, cette mission fait véritablement référence, car elle démontre l’efficacité, même dans les projets les plus pointus, d’une conduite de projet plaçant l’expérience utilisateur et l’architecture de l’information au cœur de la méthodologie : des solutions pragmatiques émergent rapidement et sont immédiatement orientés en direction de la mise en œuvre des dispositifs, testés et ajustés dans des délais très courts.

créa Carrefour
créa graphique de la page d'accueil du site Carrefour

Ressources autour du projet Carrefour

Plus de cas UX
ETUDE DE CAS UX
Conception et design d'expérience utilisateur de la plateforme Carrefour drive et Carrefour courses en ligne.
etude cas ux carrefour courses en ligne
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
Amélioration de l'UX : site mobile, responsive, fiche produit, espace client, procesus de commande...
etude cas ux cdiscount