Briefer
Information
Architecture
Design

Conception e-commerce

Étude de cas de conception UX
Briefez IAFACTORY pour une mission UX e-commerce
Briefez IAFACTORY

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 d'une plateforme e-commerce internationale
.

1. Problématique

Spécificités de l'intervention

Nous avons souhaité vous présenter les interventions menées auprès de Carrefour afin d'illustrer la complexité d’une stratégie numérique marchande à l’échelle internationale et ses impacts en terme d’interface et d’expérience utilisateur.

La mission a été initiée en 2009 - 2010 et poursuivie en 2011.
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 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 numérique 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 numérique…

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.
C'est ce qu'on appelle aujourd'hui, "un design system", notion conceptuelle qui n'avait pas encore vraiment émergée en 2009...

Problématique numérique

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 numérique, en rapport, demeuraient 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 numérique, 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

Convergence de plateforme

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é numérique 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 hétérogènes, et aucune cohérence, pas plus en matière graphique qu'en matière ergonomique…

Pour apporter des solutions à l’ensemble de ces problématiques, le groupe est entré dans une stratégie numérique à 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.

Quel modèle de dispositif

De façon pragmatique, la question posée était la suivante : « quel modèle de dispositif numérique pour intégrer une 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 les 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 étaient :

  • Site corporate.
  • Site marchand pour les produits non alimentaires.
  • Site marchand pour les produits alimentaires.
  • Site marchand pour…

A chaque offre, un site : ergonomie différente, design différent, logique CRM et relation client différente, espace client différent… 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.

2. 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" i.e. un "idéal type" qui serait ensuite implémentés par les pays, chacun devant prendre en compte :

  • Ambitions du groupe.
  • Situation à date de chaque pays.
  • Projets en cours ou à venir pour chaque pays.
  • Objectifs à court terme.

3. Solution

Audit des dispositifs interactifs européens

La première partie du 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 site italien était non marchand, centré sur les promotions magasin.
  • Le dispositif français et espagnols relativement avancés, proposant des plateformes multimarques agrégeant la quasi-totalité des univers de vente.
  • Le site 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.

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 les éléments suivants :

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

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 :

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

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.

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évoyait l’homogénéisation des plateformes et de l’expérience utilisateur autour de la fin 2012.

La mission de conception du master cible e-commerce de Carrefour a été marquée par la couverture d’autres problématiques complexes comme :

  • 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 marquées : catalogue ultra-fragmenté, jusqu'à 15 000 références) et d’achats non alimentaires.
  • 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).
  • 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.
Diagnostic sratégique
Diagnostic sratégique
Solution de conception
Solution de conception
Newsletter
1 fois par semaine : nos conseils pour améliorer vos objets numériques
Votre email
3 + 4 =
Newsletter IAFACTORY
i

0 spam.
0 cession de donnée.
désabonnement à tout moment.
- Voir 1 EXEMPLE

4. Résultat

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, un travail a été réalisé en conception fonctionnelle sur le site de course en ligne - drive brandé Carrefour dans le cadre de la refonte du site Ooshop.fr et de son rebranding : un support déployé et progressivement rattaché au master global...

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 l'intervention

Dans le contexte de ce programme numérique, le master e-commerce a été déployé dans les pays précités, et tous les dispositifs interactifs ont progressivement convergé / migré vers ce modèle, pour atteindre un niveau de maturité et d'homogénéité plus satisfaisant...
Il s'agit d'une mission d'architecture de l'information référente illustrant une méthodologie "top - down" / "bottom - up", partant des sites existants (donc partant du bas) pour construire un socle commun (en haut) redéployé vers tous les sites (en bas).

Autre étude de cas liée

IAFACTORY vous invite à consulter l'étude de cas CONFORAMA,
laquelle présente également des travaux de conception d'interface,
dans l'industrie de la distribution.

Article rédigé par un humain / sans IA-ssistance: julien MUCKENSTURM /
Fondateur IAFACTORY - spécialisé en expérience design depuis 2005 /
+ 300 objets numérique conçus
BRIEFER IAFACTORY CONTACTER JULIEN

5. Complément

Méthode IAFACTORY

Méthode de concption UX

Les méthodes de conception UX permettent d'élaborer un produit numérique en vue d'une expérience d'usage optimale.
Méthode de conception UX
Méthode IAFACTORY

Wireframes

Modéliser les principes d'interface de chaque écran de l'objet numérique pour en préfigurer le fonctionnement.
Wireframes
Prestation IAFACTORY

Prototypage UX

Le prototype permet de dynamiser les écrans statiques afin de visualiser le fonctionnement du dispositif.
prestation de conception UX prototypage
Expertise en conception UX

Conception d'interface

IAFACTORY vous propose des interfaces utilisateurs ciblant les meilleurs pratiques d'expérience numérique dans votre secteur.
Conception d'interface
fleche haut de page iafactory