Le contexte de la refonte
Le constat
Le poids des couches successives ajoutées au fil des besoins et des évolutions se ressentait de manière générale par une complexification excessive et inutile des parcours, ainsi que par un manque d’uniformisation et de cohérence.
Cela fait partie du cycle de vie classique d’un site de cette ampleur, mais globalement, l’utilisateur subissait les contraintes internes (technique, métier, offre…). Il était devenu nécessaire de retravailler en profondeur les parcours et de les simplifier, les fluidifier pour améliorer leur performance.
Objectif & démarche
La refonte de ces parcours devait ensuite servir de vision cible à une plateforme au coeur de différents chantiers : nouvelle direction artistique à venir, lancement de nouvelles offres, et plus largement un “plan qualité digitale” (refonte technique, CMS, data, optimisation SEO…).
Le site partait de tellement loin que le sujet imposait un certain pragmatisme : il ne s’agissait pas d’innover en créant de nouveaux services ou des fonctionnalités exotiques, mais plutôt de repartir sur des bases seines en remettant le site au niveau des meilleures pratiques UX du marché. Il serait ensuite optimisée en continu par les équipes.
Méthode
Nous avons commencé par un Audit UX pour identifier les nombreux points de douleurs sur les parcours actuels (navigation, ergonomie, hiérarchisation des informations, contenus, étapes/parcours…). L’audit UX permettait un recul qu’il est facile de perdre lorsque l’on travaille sur un périmètre restreint ou que l’on est (trop) habitué à vivre avec les contraintes internes. Cet audit à été complété et validé par les résultats de précédents tests utilisateurs réalisés par le service de recherche.
En parallèle, nous avons réalisé un Benchmark sur une vingtaine de sites pour identifier des bonnes pratiques adaptées aux différentes problématiques.
Puis nous sommes entré dans la conception des parcours & des écrans : notes d’intention sur les parcours, échanges réguliers avec les stakeholders (métiers, marketing, business…), nombreuses itérations pour tester différentes possibilités, affinage progressif des wireframes et des contenus, prototype Invision navigable… Le tout avec une approche mobile first.
1/ Parcours d’acquisition d’une “Box” Internet
Le constat de l’audit : un parcours inutilement compliqué et des contenus dispersés
Il y avait une importante rupture de parcours, car la présentation des mêmes offres était complètement différente que l’on se situe avant ou après le test d’éligibilité – ce qui amenait beaucoup de confusion chez les utilisateurs. De plus les fiches de présentation des offres étaient mal structurées (contenus & informations dispersées et non hiérarchisées, thématiques mal identifiées), et elles devenaient inaccessibles après ce test d’éligibilité.
La solution : ramener de la fluidité et de la simplicité
Une page d’accueil « Box Internet » qui présente le contenu des offres dans des cartes synthétiques et détaillées, qui contiennent tous les avantages pour faciliter la lecture et la comparaison des offres .
Lorsque l’utilisateur teste son éligibilité, il n’est plus renvoyé vers une page de résultat au format complètement différent : c’est la même page qui se met à jour en affichant uniquement les offres disponibles à son adresse de l’utilisateur (pour éviter la précédente rupture de parcours).
L’utilisateur peut à tout moment consulter des fiches offres détaillées entièrement revues et réécrites, avec des bénéfices regroupés et présentés par piliers (Internet, Téléphonie, TV, bonus…). Certains contenus (débit de connexion etc.) sont mis à jour après le test d’éligibilité.
Ajout d’une étape de cross-sell pour proposer des options.
Autre point, transverse à tout le site mais que nous avons adressé très tôt : la nécessité de simplifier la navigation en supprimant les menus déroulants (trop chargés et compliqués à lire) : proposer des accès directs aux contenus avec des entrées explicites (Forfaits, Téléphones, Box, Box + Téléphone)
2/ La présentation des forfaits mobiles
Le constat : un besoin de mise aux best practices nécessaire (ergonomique, graphique), et un besoin de travail sur les contenus pour répondre aux besoins de comparaison et d’aide au choix des utilisateurs
Outre la difficulté de comprendre les offres, leur présentation était très loin de faciliter la vie des prospects :
Présentation sous forme de tableau un peu vieillissante : difficultés de lectures (beaucoup d’offres), toutes les offres n’étaient pas visibles (slide horizontal sur le tableau), éléments mal segmentés, manque de clarté graphique (plusieurs nuances de gris)…
Sur mobile le tableau se transformait en cartes trop chargées, avec un défilement horizontal fastidieux.
Problèmes de hiérarchie de l’information : avantages mal valorisés, promos qui ressemblaient à des publicités, mauvaise mise en avant des réassurances, manque de critères clairs pour aider au choix, fiche produit forfait trop basique…
La solution :
Un accès direct sur la gamme de forfaits la plus populaire et prioritaire en terme de business, avec une présentation des offres dans un système de cartes complètement revu.
Réécriture des contenus pour les rendre plus synthétiques et plus clairs.
Faciliter l’aide au choix en indiquant le forfait le plus populaire, faire de la pédagogie sur les usages et besoin de données.
Intégration des promotions directement dans les offres (dans une carte promo au lieu d’une bannière publicitaire). Sur mobile : offrir une vision synthétique des offres, seule la plus populaire (et/ou une offre promo) est déroulée par défaut.
Ajout de réassurances et de questions/réponses pour lever les freins.
Fiches produits revues : réécriture des contenus, ajout de réassurances, cross-sell etc.
3/ Téléphone + Forfait
Le constat : il est très difficile pour un utilisateur de comprendre ce qu’il allait réellement payer ! Et le parcours est très long et semé d’embuches…
Sans rentrer dans les détails de l’audit, ce parcours manquait lui aussi de fluidité et il était très fastidieux de comparer plusieurs combinaisons de téléphone/forfaits/prix.
Le plus gros point de douleur était que le prix affiché dans le catalogue et sur les fiches des téléphones était différent de celui à payer au panier ! Pour les utilisateurs, c’est bien sur une énorme source d’incompréhension et d’abandon.
En résumé il était impossible de comprendre ce que l’on allait réellement payer, car la volonté était d’afficher sur le site des prix bas qui n’étaient pas le prix réel, mais le prix après remises (il fallait fouiller pour trouver le détail des remises et leurs conditions). De plus, un certain nombre d’éléments qui influaient sur le prix et qui étaient modifiables par l’utilisateur étaient trop dispersés : on ne comprenait donc pas ce que l’on ajoutait au panier.
Catalogue de produits non optimisé : filtres difficiles à identifier et à utiliser, pas de mises en avant de produits, lecture gênée par une trop grande multitude d’informations, trop de produits par ligne…
Fiche produit : contenus de présentation et de caractéristiques techniques mal formatés, avis clients qui ne fonctionnaient pas sur smartphone…
Après avoir choisi un téléphone, l’utilisateur était ensuite envoyé sur une nouvelle page pour choisir un forfait : difficulté de revenir en arrière, difficulté de sélectionner un autre téléphone pour comparaison des prix, difficulté de comprendre la grille des tarifs pour savoir ce qu’on allait payer aujourd’hui et par mois…
La solution : une transparence totale sur les prix, la sélection d’un forfait directement sur la fiche produit du téléphone pour faciliter les comparaisons et fluidifier le parcours, et une remise aux normes du e-commerce.
Page d’accueil unique (vs. plusieurs entrées auparavant) qui affiche des promos, des sélections thématiques (entrées par les marques Apple et Samsung qui représentent plus de 90% des ventes), propositions d’autres téléphones populaires ou accès au catalogue entier.
Affichage des filtres à gauche (plutôt que d’être cachés !) – ou accessibles en haut sur smartphone.
Ajout de transparence sur les prix : pour chaque téléphone on affiche clairement le prix à payer aujourd’hui et le prix minimum après remise, pour éviter les surprises lors de l’ajout au panier.
La plus grosse valeur ajoutée concerne l’ajout de la sélection du forfait directement sur la fiche produit, au lieu d’envoyer l’utilisateur sur une nouvelle page compliquée à déchiffrer. L’utilisateur à accès à toutes les combinaisons d’achats, il sait exactement ce qu’il ajoute au panier.
Remise aux normes de la fiche produit : revue de la présentation des basiques (contenus de présentation, caractéristiques techniques, avis). Lors de l’ajout au panier : ouverture d’une popin qui propose des accessoires de protection, proposition de l’assurance dans le panier.
4/ Prototype de Progressive Web App (PWA) avec tunnel simplifié
Le constat
Le site est peu adapté à un consultation sur mobile (en tout cas avant la refonte !) et est long à charger. La moindre demande de modification ou d’évolution doit passer par un process interne long qui empêche toute agilité.
Les forfaits B&You (sans engagement) sont un produit simple et peu impliquant, mais qui nécessite de passer par un tunnel de commande très contraignant : nombreuses étapes, demande de numéro de pièce d’identité, nécessité de payer 1€ par carte et d’indiquer un RIB…
Les objectifs et l’approche
Tester la technologie PWA pour s’affranchir de ces contraintes.
Proposer une expérience plus plus dynamique avec une interface qui se rapproche du comportement d’une application (libertés prises avec la charte actuelle, animations…)
Un tunnel de commande réduit à l’essentiel, en essayant de lever les contraintes obligatoires : proposer de nouveaux modes de paiement, pouvoir scanner une CB/un RIB plutôt que de les saisir, sauter la création de compte, permettre l’envoi de documents plus tard etc.
Ceci permettrait de comparer les performances de cette version simplifiée avec la version classique, et si le test se révélait concluant, d’envisager de généraliser cette approche et cette technologie sur tout le site.
