Orange

UX / UI & Product Design

Designer l'expérience qui unifie les sites web boutique et portail d'Orange afin de se placer comme opérateur multi-services.

Client

Orange

Période

2018 - 2022

Compétences

UX/UI Design
Product design
Design thinking

Outils

Axure
Sketch & Zeplin
Usabilla / Get Feedback
Contentsquare
Optimal Workshop

Projet One-i

Devant la nouvelle stratégie et promesse d’Orange de s’imposer comme un opérateur multiservices, le projet de refonte web a été lancé. L’idée est ambitieuse : agréger 2 sites, avec des utilisateurs, des usages et des contenus totalement différents en un seul. Le premier site est le portail d’actualités composé essentiellement de contenus éditoriaux, tirant la plus grande partie de sa monétisation par la publicité; le second site est la boutique d’e-commerce, vendant principalement des téléphones et des abonnements à ses clients.

Axure construction de page
Atelier ideation
Experience map

Mon rôle chez Orange

En tant qu’UX designer indépendant puis en tant que Product Designer en interne, j’ai rejoint la Direction Digitale Grand Public d’Orange récemment restructurée en organisation produit. Avec la création de différentes features teams s’ordonnançant selon les méthodes SaFe, la DDGP avait pour objectif de répondre aux nouvelles ambitions de la marque en matière d’innovations digitales et d’expérience utilisateur.

Dans ce contexte dynamique en pleine évolution, j’ai mis mes compétences au service de projets stratégiques s’articulant autour de 3 features teams : les accueils et vitrines (principales et N-1 du site), les éléments communs (header, footer) et le centre de notifications.

En collaboration étroite avec ces équipes pluridisciplinaires, mon rôle consistait à contribuer à la transformation produit au service de la nouvelle stratégie de l’entreprise. J’ai pris en charge la conception de solutions intuitives, engageantes et adaptées aux besoins des utilisateurs finaux tout en assurant une expérience utilisateur fluide et cohérente à travers les différents services et parcours que l’on m’a confiés.

Comprendre

Concevoir

Tester

Identifier les usages et les besoins, concevoir des interfaces segmentées à la croisée des attentes utilisateurs et business.

Mot de passe d'accès au proto : iTrustU

Les raisons du projet

  • Répondre à la stratégie de devenir un opérateur multi-services et apporter une diversification de l'offre aux utilisateurs
  • Restructurer et redesigner le site Orange.fr
  • Factoriser les principaux sites et usages d'orange.fr : le portail d'actualités et le site e-commerce.
  • Proposer une expérience unifiée qui réponde aux attentes du grand public, engendrant des revenus publicitaire et marchand.

Mon rôle dans le projet

Accueil du site orange.fr

  • Concevoir la nouvelle vision de la page d’accueil en identifiant les attentes des utilisateurs
  • Analyser les données d’utilisation des sites existants et définir les usages majoritaires
  • Proposer une segmentation de la page d’accueil (web et mobile) par usage : « régulier », « occasionnel » et « prospect »
  • Marketer l’offre d’opérateur multiservice en affichant des points d’entrée vers les parcours marchands en fonction des contrats détenus par les clients, en informant des dernières actualités afin d’assurer du traffic vers les entrées financées par la publicité, en proposant différents équipements et services pour mettre le cross-sell à l’honneur
  • Effectuer des recherches sur les utilisateurs (prospects et clients) : tests de prototypes, test quantitatifs, test d’intérêt
  • Décliner en version desktop

Tests utilisateurs qualitatifs

Exemple de process & méthodo

Dispositif

Afin de tester la pertinence des pages créées, de leur contenu et d’analyser les éventuels problèmes d’ergonomie, j’ai organisé une multitude de tests utilisateurs en 1to1 à partir d’un prototype.

Objectif

Évaluer la compréhension et la pertinence du classement des items du méga-menus ainsi que les entrées vers les pages en profondeur. Tester l’accès vers les vitrines (mobiles et forfaits, TV et divertissements...), l’accès vers les pages en profondeur et les parcours marchands depuis la page d’accueil. Évaluer la compréhension et la perception des vitrines (TV et divertissements et mobiles et forfaits) pour les différents profils / personas.

Mon rôle

  • Créer un prototype haute fidélité
  • Définir les cibles du test et le screener pour le recrutement
  • Réaliser le guide d’entretiens utilisateurs et définir les scénarios de tests
  • Définir une grille d'évaluation et des critères de succès
  • Faire passer les entretiens
  • Analyser les réponses des utilisateurs
  • Proposer des améliorations graphiques et ergonomiques en fonction du retour des tests utilisateurs

Cible

  • Homme / femme, 19 à 63 ans
  • 6 prospects
  • 6 clients Orange "Open" et "TV"
  • 6 clients Orange mobile

Création de personas

Principaux et secondaires

Objectif

Créer des personas représentant les utilisateurs principaux en se basant sur leurs usages de navigation.

Méthodologie

  • Utilisation de Goggle Analytics pour apporter des réponses chiffrées sur les comportements et sur la démographie.
  • Utilisation de Getfeedback / Usabilla comme outil de collecte de verbatim
  • Création de sondages de satisfaction et analyse des répondants aux sondages de NPS pour en tirer des attentes et des freins utilisateur.
  • Entrer en empathie avec les utilisateurs grâce à la connaissance provenant des nombreux tests et interviews utilisateurs passés révélant des anecdotes représentatives et constructives de leurs vies.

Mon rôle dans le projet

Mobiles et forfaits

  • Analyse des parcours marchand existant afin de proposer une structure cohérente en fonction des usages des utilisateurs et des objectifs business d’Orange qui diffèrent en fonction des contrats détenus par les clients
  • Création d’interfaces proposant des points d’entrée en corrélation avec les grandes typologies de contrat clients : le contrat Mobile ou le contrat Open (Internet + Mobile).
  • Création d’une version de la page destinée aux prospects ou aux utilisateurs non connectés afin de les aiguiller sur des parcours d’achats qui leur sont propres.

Exemple d'amélioration continue
Connaissance multicontrats

Problématique : certains clients possèdent plusieurs contrats mobile ou internet. Le site Orange s’adresse à eux de manière personnalisée uniquement via leur contrat prioritaire : celui avec lequel ils se sont connecté.

Analyse : D’après les données que j’ai extraites de CS et GA, les clients ont tendance à effectuer des allers-retours entre leur espace client et la page « Mobiles et forfaits ».

De nombreux verbatims sous-entendent que les clients ont du mal à identifier clairement l’intégralité de leur contrat et ne comprennent pas quelles offres leur sont dédiées.

Wireframe Multicontrat
Maquette Multicontrat
Solution

  • Étudier les points de douleurs, les attentes et les freins sur les parcours existant
  • Proposer de nouvelles features pour les clients en multicontrats.
  • Prioriser et mettre en avant les parcours marchands en fonction de la valeur business et utilisateurs, du risque et de la faisabilité
  • Afficher dans la page les contrats mobile détenus par l'utilisateur et les intentions qui lui sont rattachées.
  • Tester l'appétence des solutions proposées via 2 prototypes se différenciant au niveau des fonctionnements et des affichages (12 utilisateurs testés)

Mot de passe d'accès au prototype : iTrustU

Prototype desktop

Designer le mega-menu d'Orange.fr

UX research : Tri de cartes

Mon rôle dans le projet

  • Agréger deux mega-menu en un seul
  • Trier et prioriser les liens en fonction des valeurs utilisateurs et business
  • Permettre une navigation totale et intuitive au milieu des nombreux liens éligibles au menu
  • Proposer une vision globale des univers de services et de la boutique aux utilisateurs
  • Personnaliser le mega-menu en fonction des abonnements détenus par les clients
  • Organiser et analyser plusieurs tris de cartes pour valider les hypothèses énoncées

Tri de cartes

Exemple de process & méthodo

Dispositif

Pour réorganiser le menu principal du site internet Orange.fr, j’ai préparé un tri de cartes afin de tester les wordings, les catégories, l'importance des items et les liens que les utilisateurs définissent eux-mêmes.

  • 12 sessions individuelles de tri de cartes
  • 8 clients Orange
  • 4 clients de la concurrence

Nature du test

Tri de cartes ouvert. Chaque utilisateur trie un jeu de cartes afin de les organiser dans une arborescence qui lui semble logique. Chaque carte présente le titre d’un contenu, d'une page ou d'une fonction du site Orange.fr.

Étapes clés

  • Regroupement et priorisation des services en fonction du business et de la valeur utilisateur afin de ne pas noyer les utilisateurs dans un tri de cartes trop difficile, présentant un trop grand nombre de termes.
  • Distribution des 59 cartes et présentation de la consigne. Durée : 5 min
  • Le participant trie, nomme, regroupe (post-it jaunes) et potentiellement regroupe encore (post-it verts). Bilan final. Durée : 55 min
  • Récupération du tri effectué, bref temps d’échanges avec l’équipe projet (sans le participant). Durée : 15 min
  • Analyse en s'appuyant sur l'outil Optimal Workshop

Dendogramme & Matrice de similarité

Maquettes finales après tests utilisateurs

Tests de pertinence et d'utilisabilité

Le centre de notifications

Amélioration continue

Constat

Dans le centre de notifications du site Orange.fr, les utilisateurs qui possèdent plusieurs abonnements sur la même typologie de contrat (exemple deux contrats mobiles ou deux contrats internet) se retrouvent noyés d’informations, avec certaines notifications en double. Les notifications ne sont pas clairement rattachées à un contrat, se fondent dans la masse et perdent en signification. Les utilisateurs rapportent la difficulté à s’y retrouver et à hiérarchiser l’importance des notifications.

Exploration & hypothèses

  • Proposer une amélioration graphique du centre de notifications.
  • Proposer des filtres permettant de trier les notifications.
  • Proposer un regroupement des notifications par typologie de contrats
  • Proposer une différenciation graphique entre les contrats Orange et Sosh.

Évaluation

  • Création de 3 prototypes et de guides d’entretien en corrélation.
  • Nature du test : mi quanti / mi quali.
  • L’utilisateur essaie le prototype du nouveau centre de notifications et répond à des questions fermées. 300 utilisateurs

Mot de passe d'accès aux prototypes : iTrustU