exclu mondiale :)
formation UX design !
53h de vidéo
60 études de cas
150 livrables - 160 wireframes
places limitées

étude de cas UX Orange

Conception des boutique.orange.fr.

Architecture de l'information, design d'interaction et design d'expérience utilisateur des plateformes digitales marchandes de l'opérateur télécom Orange.

étude de cas UX orange
note : ce projet a été piloté par DIGITAS (groupe Publicis), cadre dans lequel J.Muckensturm a assuré la conduite des missions en architecture de l'information.
écrit en 2010
et révisé en 2016 par
Julien Muckensturm
Architecte de l'information
icone linkedin
icone viadeo

La problématique digitale

Spécificités de la mission Orange

Nous avons souhaité vous présenter les missions réalisées dans le cadre de l’homogénéisation et de la convergence des boutiques Orange, afin d’illustrer les apports de l’architecture de l’information dans un projet complexe de grande envergure impliquant le rapprochement de 10 supports interactifs amenés à fonctionner sur un modèle analogue, pour proposer une expérience utilisateur homogène au sein d’une interface unifiée…

Les travaux ont été réalisés en 2008.
Visualisez le projet UX Orange...

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

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

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

mécanique de circulation entre les boutiques
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

à 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
à chaque problématique, un site : une expérience utilisateur désunie

Notre approche

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.

benchmark des dispositifs digitaux concurrentiels
benchmark des dispositifs digitaux concurrentiels

planche tendances des bonnes pratiques du secteur
planche tendances des bonnes pratiques du secteur

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.

cartographie du dispositif Orange : ici, cas de l’offre broadband internet
cartographie du dispositif Orange : ici, cas de l’offre broadband internet

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
répartition en masse du volume des espaces France Télécom

certains contenus et offres étaient des duplications du site Orange
certains contenus et offres étaient des duplications du site Orange

une partie 100 % spécifique du site france télécom : l’offre fixe
une partie 100 % spécifique du site France Télécom : l’offre fixe

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.

inventaire fonctionnel des gabarits du site mobile
inventaire fonctionnel des gabarits du site mobile

inventaire fonctionnel des gabarits du site broadband
inventaire fonctionnel des gabarits du site broadband

inventaire fonctionnel des gabarits du site accessoire
inventaire fonctionnel des gabarits du site accessoire

Solutions de conception

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, visant à 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 : encapsulation du shop dans le portail

définition des règles d’interface : grille modulaire de conception
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 zones fonctionnelles

définition des règles d’interface : définition des modèles de page
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 : principes de navigation

définition des règles d’interface : éléments de navigation spécifiques
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 : 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 : cas des variabilités de la zone de rebond

définition des règles d’interface : exemple de structure générique définition des règles d’interface : exemple de structure générique

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.

scénario d’utilisation : cas accessoires high-tech
scénario d’utilisation : cas accessoires high-tech

scénario d’utilisation : cas univers mobile
scénario d’utilisation : cas univers mobile

scénario d’utilisation : cas univers fixe
scénario d’utilisation : cas univers fixe

scénario d’utilisation : accès aux ventes flash
scénario d’utilisation : accès aux ventes flash

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.

arborescence fonctionnelle de l’univers broadband internet
arborescence fonctionnelle de l’univers broadband internet

arborescence fonctionnelle de l’univers mobile
arborescence fonctionnelle de l’univers mobile

transposition de l’arborescence sous forme de navigation
transposition de l’arborescence sous forme de navigation

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.

modélisation des storyboards : exemple de l’accueil de l’offre accessoires 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 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 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 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 tv

modélisation des storyboards : exemple de l’accueil de l’offre mobile 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 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 (accessoires)

modélisation des storyboards : exemple de guide d’achat (forfait mobile)
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 (panier)

modélisation des storyboards : exemple tiré du checkout (livraison)
modélisation des storyboards : exemple tiré du checkout (livraison)

Résultats

Résultats

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.

créa des boutiques Orange
créa des boutiques Orange

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

Vous appréciez notre approche ?

UX design avec IAFACTORY.

On s'occupe de tout ce qui se rattache à la conception et on vous propose des services UX sur-mesure, en fonction de votre projet.
Si vous souhaitez vous faire accompagner en phase de conception

A partir d'ici, les internautes lisent aussi ces cas

ETUDE DE CAS UX
Rationalisation du dispositif Orange dans le cadre de la disparition de la marque France Télécom.
etude cas ux france telecom
ETUDE DE CAS UX
Architecture de l'écosystème digital international de l'industriel somfy : marque, CRM, e-commerce.
etude cas ux somfy
ETUDE DE CAS UX
Conception et architecture de l'information du dispositif digital marchand du distributeur Conforama.
etude cas ux conforama

...

Si vous recherchez des modèles à télécharger pour vos cartographies
Si vous souhaitez améliorer vos compétences en conception
Si vous avez besoin d'un peu d'aide pour votre projet digital