Exemple de conception de boutiques ecommerce : boutique.orange.fr.
Cette étude de cas UX design porte sur l'Architecture de l'information, le design d'interaction et le design d'expérience utilisateur des plateformes digitales marchandes de l'opérateur télécom Orange.
Orange, filiale et marque commerciale du groupe France Télécom, est le premier opérateur mobile en france avec 43,5 % de part de marché en 2008 ; la marque est implantée à l’échelle internationale (dans plus de 20 pays), notamment en europe et en afrique et à vocation à devenir la dénomination du groupe dans son ensemble avec pour effet la disparition de la marque France Télécom auprès du grand public.
Les activités d’Orange s’organisent autour des offres suivantes :
La transition de la marque France Télécom vers Orange marque un tournant dans les activités commerciales de l’enseigne et s’accompagne par un important travail d’adaptation à l’échelle off-line et on-line.
La stratégie digitale de la marque Orange, consiste notamment, au travers de son portail et de ses activités de production de contenus, à drainer un maximum d’utilisateurs par le biais du contenu et des services pour les exposer in fine aux offres commerciales.
Le portail d’Orange (Orange.fr), générant un trafic mensuel de l’ordre de 20 millions de visiteurs uniques mensuels (source médiamétrie), le plaçant ainsi sur le podium des sites les plus fréquentés en france (après google et msn live) est donc une force considérable dans le modèle.
Mais le portail Orange… est également une des grandes faiblesses de la marque, car le portail souffre d’un manque de lisibilité auprès des usagers et les offres commerciales (internet-tv-téléphone-mobile-fibre…) accusent un manque de visibilité et se voient cannibalisés par la multiplication des contenus et des services.
Les difficultés d’accès aux offres dans le méli-mélo du portail nuisent considérablement aux performances transactionnelles en ligne pour Orange ; à ces carences en matière de lisibilité et de transparence commerciales, s’ajoutent le fait que les offres d’Orange cohabitaient encore en 2008, avec celles de France Télécom, créant des dispositifs marchands proposant des offres similaires avec leurs clientèles propres…
Enfin, chaque branche de l’activité de la marque Orange se traduisait par un site différent : un site pour l’offre internet, un site pour l’offre fixe, un site pour l’offre mobile… avec pour conséquence une hétérogénéité globale du modèle et des parcours utilisateurs chaotiques (open windows, design différent, ergonomie différente, espace client différent)…
Pour Orange, la nécessité d’opérer une rationalisation globale de son dispositif digital devenait une priorité pour pérenniser le business on-line de la marque à moyen terme.
C’est dans ce contexte que nous sommes intervenus dans le cadre d’une mission de conseil en architecture l’information de plusieurs mois, visant la convergence des offres et le rassemblement des supports de vente au sein d’une plateforme marchande commune à l’ensemble des activités, dite one-eshop, et proposant une expérience utilisateur unifiée au travers d’une interface unique...
En 2007, les activités commerciales d’Orange en ligne souffrent d’un manque de lisibilité et de transparence auprès des utilisateurs :
Concernant la coexistance de plusieurs boutiques en ligne, on distinguait :
Sur www.francetelecom.fr
Sur www.Orange.fr
D’autre part, au-delà des boutiques, le modèle commercial d’Orange en ligne s’organisait autour de deux zones fortes, au travers des espaces clients et de l’assistance…
Concernant les espaces clients…
Les espaces clients, matérialisaient la relation client entre Orange et le consommateur, au travers d’une plateforme spécifique ; carence du modèle: les espaces clients fixes, mobiles et internet étaient cloisonnés véritable comble pour les clients quadruple-play (!) et gouffre en matière d’expérience utilisateur (cause : chaque offre était gérée par un SI différent).; il s’agissait donc de les unifier à long-terme.
Concernant l’assistance…
Les espaces dédiés à l’assistance visaient à offrir à l’utilisateur, prospect ou client, toutes les modalités de support spécifiques à une offre (internet ou téléphone ou mobile…) ; là encore, chaque branche de l’activité disposait d’une assistance spécifique au travers d’un site propre…
Cette désunion et cette hétérogénéité globale traduisait et reflétait :
La montée en gamme du dispositif interactif, proposant une gamme d’offres commerciales toujours plus étoffée, s’est finalement heurtée aux limites des systèmes d’information en place et aux difficultés de faire converger des plateformes reposant sur des socles techniques différents…
Au final, 3 enjeux importants se dégageaient :
Pour Orange, les objectifs en matière de performance étaient très ambitieux et visaient notamment à multiplier par 3 les ventes en volume et les taux de transformation ; verbatim :
« L’objectif du one eshop est de créer une seule boutique multi spécialiste best in class, capitalisant sur les meilleures pratiques du groupe et alignée avec la stratégie de convergence du groupe : cela doit se traduire par une amélioration de la satisfaction client via des parcours optimisés et une augmentation des taux de transformation via un alignement sur les best practice ; il est entendu que ce projet est un projet de site marchand unique et non un nouveau portail ; il est a préciser que le périmètre de ce chantier concerne tous les univers (fixe, équipement, mobile, multiservices) sur les marchés résidentiels et professionnels. »
mécanique de circulation entre les boutiques
à propos de la synergie entre le shop, l’espace client (care) et l’assistance
à propos de la synergie entre le shop, l’espace client (care) et l’assistance
à chaque problématique, un site : une expérience utilisateur désunie
La mission en architecture de l’information portait sur 3 axes interdépendants :
Pour ce faire, Orange avait mis à notre disposition un large panel d’études utilisateurs et audits spécifiques réalisés par son service expérience utilisateur et autres cabinets spécialisés.
Notre premier travail a consisté à centraliser toute cette information pour nous immerger dans les problématiques métiers de la marque et surtout, nous adapter à la culture d’entreprise si spécifique qui caractérise le groupe.
Seconde étape inévitable, la réalisation d’un benchmark concurrentiel visant à observer les dispositifs digitaux des marques confrontées aux mêmes problématiques à l’échelles internationale (sfr, att, t-mobile…) ; une telle approche permet de faire avancer le projet sur des bases tangibles tout en sensibilisant les équipes aux problématiques de conception et aux solutions potentielles à mettre en œuvre.
Le benchmark concurrentiel, en tant qu’observatoire des réussites et des échecs, est un atout majeur pour faciliter la prise de décision et orienter la conception vers des solutions déjà éprouvées : l’idée n’est jamais de copier, mais de s’inspirer des modèles performants pour les adapter efficacement aux spécificités de l’enseigne.
Avec un premier regard critique des stratégies concurrentes et des solutions à disposition, nous avons entrepris un travail d’inventaire du dispositif Orange afin de dresser la cartographie des composantes fonctionnelles propres à chaque support constitutif de la galaxie Orange.
Le travail de cartographie du dispositif s’est appliqué à tous les univers de vente : mobile, fixe, internet, télévision, accessoires…
Cette approche basée sur un prisme d’analyse fonctionnel, permet d’identifier de façon micro toutes les briques constitutives du fonctionnement d’un site, et offre au final une excellente vision du périmètre du dispositif.
cartographie du dispositif Orange : ici, cas de l’offre broadband internet
cartographie du dispositif Orange : ici, cas de l’offre broadband internet
répartition en masse du volume des espaces France Télécom
certains contenus et offres étaient des duplications du site Orange
une partie 100 % spécifique du site France Télécom : l’offre fixe
Dans la lignée des travaux de cartographie, nous avons mené un inventaire des gabarits pour chaque dispositif : l’objectif était d’identifier les éléments spécifiques à chaque support pour pouvoir déterminer les éléments communs au dispositif global et les éléments spécifiques à intégrer dans le modèle.
inventaire fonctionnel des gabarits du site mobile
Il s'agissait de concevoir l’intégralité des interfaces composant le dispositif marchand des boutiques Orange ; bien que les activités devaient convergées au sein d’une interface commune, la méthode de travail souhaitée par Orange consistait à approcher chaque branche de l’activité par la conception de tous les écrans, y compris si le fonctionnement de ces derniers avaient déjà été modélisés par un template relatif à un autre univers : cette exigence nous a obligé à concevoir le dispositif interactif dans une logique de « page », pour couvrir l’intégralité des cas.
Cette approche (conception des pages) n’aurait pas pu être envisageable si nous n’avions pas inventorié l’intégralité des briques fonctionnelles constitutives du dispositif en amont.
Voici la liste des chantiers fonctionnels que nous avons été amené à traiter :
Il s’agissait de concevoir l’interface e-commerce de ces différentes offres sur la base des mêmes modalités de fonctionnement, ce qui impliquait une très bonne connaissance des spécificités de chaque offre, pour ouvrir les choix opérés en matière d’interface sur des solutions tangibles, flexibles et adaptables capables d’agréger un maximum de variabilité.
Le dispositif devait permettre de répondre aux différentes typologies de cibles par la modélisation de parcours appropriés à chaque stratégie usager :
Nous avons commencé à modéliser les travaux de conception sous forme de charte ergonomique et fonctionnelle.
L'objectif consistait à fédérer et faire valider les règles de fonctionnement du dispositif général à l’ensemble des interlocuteurs pour ensuite pouvoir piloter chacun des chantiers de conception de façon indépendante, sur la base d’une charte commune.
définition des règles d’interface : encapsulation du shop dans le portail
définition des règles d’interface : grille modulaire de conception
définition des règles d’interface : définition des zones fonctionnelles
définition des règles d’interface : définition des modèles de page
définition des règles d’interface : principes de navigation
définition des règles d’interface : éléments de navigation spécifiques
définition des règles d’interface : règles de fonctionnement du footer
définition des règles d’interface : cas des variabilités de la zone de rebond
définition des règles d’interface : exemple de structure générique
Nous avons complété la définition d’interface par la modélisation des parcours d’achat pour chacun des univers de vente, afin d’anticiper le travail de conception fonctionnelle détaillée.
On parle aussi de parcours utilisateur...
scénario d’utilisation : cas accessoires high-tech
scénario d’utilisation : cas univers mobile
La modélisation des scénarios d’utilisation et les réflexions sur les parcours utilisateurs ont permis d’orienter les choix définitifs à opérer en matière d’arborescence fonctionnelle et leur traduction sous forme de navigation. Les arborescences fonctionnelles constituent la suite logique des parcours.
arborescence fonctionnelle de l’univers broadband internet
Ensuite, nous avons pu modéliser l’interface détaillée de chaque univers de vente, en nous appuyant sur les inventaires, les scénarios d’utilisation et les arborescences fonctionnelles.
L’objectif était d’optimiser le fonctionnement général en utilisant et partageant un maximum de modules et de gabarits en commun.
S’agissant d’une interface riche, chacun des storyboards a fait l’objet d’animation pour expliciter le fonctionnement détaillé des interactions de surface et de structure.
Ci après, quelques extraits des storyboards réalisés pour Orange, modélisant l’accueil de chacun des univers de vente.
modélisation des storyboards : exemple de l’accueil de l’offre accessoires
modélisation des storyboards : exemple de l’accueil de l’offre fixe
modélisation des storyboards : exemple de l’accueil du hub france télécom
modélisation des storyboards : exemple de l’accueil de l’offre internet
modélisation des storyboards : exemple de l’accueil de l’offre internet
modélisation des storyboards : exemple de l’accueil de l’offre tv
modélisation des storyboards : exemple de l’accueil de l’offre mobile
modélisation des storyboards : exemple de l’accueil de l’offre prépayé
modélisation des storyboards : exemple de guide d’achat (accessoires)
modélisation des storyboards : exemple de guide d’achat (forfait mobile)
modélisation des storyboards : exemple tiré du checkout (panier)
modélisation des storyboards : exemple tiré du checkout (livraison)
Dès la mise en ligne des premières boutiques (accessoires et fixes), les indicateurs de performances ont marqué des progressions significatives et encourageantes ; le déploiement des autres boutiques s'est fait progressivement, autour des univers mobiles et d'animation commerciale ; le dispositif dédié aux offres internet est toujours en cours de réalisation et n'est pas encore en ligne.
Un processus de commande commun a été déployé, permettant de mutualiser les parcours de vente au sein d'un panier unique.
Le nouveau dispositif marchand Orange, one e-eshop, pour le moment toujours encapsulé au sein du portail, a permis d'augmenter les performances commerciales de l'enseigne sur les univers du mobile, du fixe et des accessoires.
Point de vue utilisateur, la nouvelle interface, simplifiée et épurée, a été favorablement accueillie, notamment pour le caractère plus transparent de la présentation des offres et des accès aux différents univers de vente.
Il est difficile de retranscrire avec précision l'intégralité des travaux réalisés en architecture de l'information pour Orange car la mission a été relativement dense et s'est étalée sur plusieurs mois.
D'un point de vue méthodologique, cette mission reste une référence en matière de documentation projet, car les travaux d'inventaire, de cartographie, d'arborescence et de définition des règles d'interfaces, réalisés en anticipation de la conception fonctionnelle, ont permis de mutualiser un maximum de composantes fonctionnelles et de réaliser d'importants gains de productivité en production.
L'approche et la méthodologie projet, centrée sur les travaux en architecture de l'information, ont permis de garantir un niveau de cohérence global dans la modélisation de tous les univers de vente, avec pour effet une expérience utilisateur homogène au travers d'une interface unifiée.
Cette mission a été très complexe à mener pour deux raisons : d'une part, il fallait que tous les travaux concordent au sein d'une même interface, malgré les spécificités de chacun des univers de vente, et d'autre part, nous avons du intervenir dans un contexte dans lequel l'annonceur dédiait une équipe spécifique à chaque projet...
Il fallait donc, pour chaque univers de vente (mobile, fixe ou internet), remobiliser les équipes autour des enjeux communs, des problématiques de cohérence et de leurs impacts en terme d'interface.
Une mission passionnante mais casse tête (!).
Techniques utilisées :
Formation vidéo à visionner :
Livrables à télécharger :
Etudes de cas à lire :
Travaux à visualiser :
Compétences métier évoquées dans ce projet :
Autres ressources sur le web :