Conception boutiques ecommerce exemple

A propos d'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 :

• les offres de téléphonie mobile (forfaits et mobiles)
• les offres de téléphonie fixe en lieu et place de France Télécom
• les offres internet, adsl, et nouvellement la fibre
• les offres tv, au travers du canal Orange (Orange sport, cinéma series…)
• les offres combinées dîtes triple play internet-tv-téléphone
• les offres quadruple play internet-tv-fixe-mobile amenées à se développer
• la vente d’accessoires high-tech

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

Convergence des plateformes marchandes

En 2007, les activités commerciales d’Orange en ligne souffrent d’un manque de lisibilité et de transparence auprès des utilisateurs :

• deux marques coexistent et proposent des offres similaires (Orange et France Télécom)
• chaque offre fait l’objet d’un site spécifique (ergonomie, design…)

Concernant la coexistance de plusieurs boutiques en ligne, on distinguait :

Sur www.francetelecom.fr

• la boutique fixe et accessoires (prospects et clients) - (particuliers et pros)
• la boutique mobile (prospects et clients) - (particuliers et pros)
• la boutique internet (prospects et clients) - (particuliers et pros)

Sur www.Orange.fr

• la boutique internet (prospects et clients) - (particuliers et pros)
• la boutique mobile (prospects et clients) - (particuliers et pros)

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 construction du dispositif interactif par ajout de services successifs
• les difficultés organisationnelles internes de l’enseigne (1 site = 1 équipe)
• l’absence d’une instance méta garantissant une homogénéité UX
• la difficulté à faire converger les SI
• la difficulté à faire converger et traduire les évolutions du modèle stratégique de façon réactive en matière de dispositif interactif

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 :

• la transition de France Télécom vers Orange en conservant le business de ft
• l’unification des univers de vente au sein d’une seule et même boutique
• la convergence et l’homogénéisation de l’expérience utilisateur

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

Analyse, benchmark et cartographie

La mission en architecture de l’information portait sur 3 axes interdépendants :

• concevoir un dispositif permettant de gérer la disparition de France Télécom (cette problématique a été traitée de façon indépendante dans le cadre d’une mission spécifique. Elle est détaillée dans l’étude de cas France Télécom)
• concevoir les boutiques internet-tv-téléphone-mobile sur les mêmes bases
• fixer des règles d’interface permettant d’encapsuler tous les dispositifs

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.

Analyse et benchmark

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.

Cartograpie

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.

Inventaire fonctionnel

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.

Unification des expériences par l'interface

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 :

• offre mobile et forfaits, catalogue et processus de commande
• offre mobile spécifique prépayée, catalogue et processus de commande
• offre fidélisation, programme changer de mobile, catalogue et processus
• offre internet, télévision, fibre, catalogue et processus de commande
• offre fixe, catalogue processus de commande
• offre accessoires high-tech, catalogue et processus de commande
• boutiques d’animation commerciale (vente flash and co)
• hub de redirection vers Orange dans le cadre du rebranding France Télécom

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 :

• conception de parcours guidé (guide d'achat, configurateur)
• conception de parcours raisonné (affinage par facette)
• conception de parcours impulsif (animation commerciale, vente flash)

Charte ergonomique et fonctionnelle

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.

Scenario d'utilisation

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

Arborescence fonctionnelle

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.

Conception d'interface

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.

Résultats des travaux UX

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.

Bilan de la mission réalisée pour Orange

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 (!).

Écrit par Julien Muckensturm

Approfondir la conception ecommerce

Techniques utilisées :

• Charte ergonomique
• Charte éditoriale
• Inventaire fonctionnel
• Parcours utilisateurs
• Arborescence fonctionnelle
• Conception de zoning
• Design de navigation
• Wireframing
• Scénarisation interactive
• Prototypage
• Spécifications fonctionnelles
• Conception web

Formation vidéo à visionner :

• Formation UX design en ligne

Livrables à télécharger :

• Kit ultime projet 150 modèles de livrables à télécharger
• Kit ultime conception 160 écrans de wireframes à télécharger
• Kit UX design 25 modèles à télécharger

Etudes de cas à lire :

• Etude de cas France Télécom
• Etude de cas Somfy
• Etude de cas Cdiscount

Travaux à visualiser :

• Wireframes
• Zoning
• Design de navigation
• Arborescence
• Cartographie
• Analyse de data
• Sketch Ui design
• Design mobile first
• Mind map

Compétences métier évoquées dans ce projet :

• Méthode et process
• Ebusiness
• Architecture de l'information
• Design de l'interaction
• Design de l'information
• UI design conception d'interface

Autres ressources sur le web :

• Signalez nous des ressources sympas autour des thèmes abordés dans cette étude de cas UX design en utilisant les commentaires !