Il y a maintenant 8 mois, Syndic One, le spécialiste du syndic collaboratif en ligne confiait la refonte de son site à Wexperience. Il s’agissait surtout de clarifier l’offre proposée par Sergic mais aussi de moderniser le site.
Qui est Syndic One ?
Filiale du groupe Sergic, spécialiste de l’immobilier, Syndic One est le leader du syndic en ligne dédié aux petites copropriétés.
Objectifs de la refonte
Besoin de clarifier l’offre proposée par Sergic, souvent mal comprise sur le site
Besoin de remettre au goût du jour la charte du site
Besoin d’augmenter la prise de lead
Réponse de Wexperience
À chaque projet, sa réponse propre, mais avec des méthodologies centrées utilisateurs.
1) Comprendre les besoins, les attentes et juger la performance du site actuel
Après plusieurs projets de refonte de sites effectués par les équipes Wexperience, c’est en 3 phases que nous avons piloté ce nouveau projet. Dans un premier temps, des tests utilisateurs d’une durée de 30min avec 6 testeurs ont été réalisés sur l’interface actuelle à savoir l’ancien site (cf ci-dessous). Le principal objectif de cette phase d’immersion et de préparation a été de juger la compréhension de l’offre. Lors de ce test, un questionnaire UXM de mesure de l’UX de notre solution UX.Care a également été soumis aux testeurs.
Ancienne homepage du site Syndic One
Nous nous sommes rendus compte que de nombreux utilisateurs ne saisissaient pas les contours de l’offre. L’interprétation était floue et aucune réponse à leurs questions n’était réellement fournie. Hotjar, et sa solution de Clic Map & Scroll Map a également été utilisée en début de projet, afin de suivre et comprendre les habitudes réelles de navigation des utilisateurs.
Si les web analytics ou les questionnaires permettent d’avoir une idée, dans les grandes lignes, de ce qui ne va pas à un endroit d’un site ou d’une app, les tests utilisateurs sont comme la loupe surpuissante de voir exactement POURQUOI ça ne va pas !
Cela ne veut pas dire que nous avons négligé l’information fournie par les web analytics. Bien au contraire, un audit analytics réalisé par notre agence partenaire Digitaleez a été plus qu’important à ce stade du projet pour comprendre la provenance du trafic, et pour disposer d’informations sur les internautes, leur navigation et la conversion. Google Data Studio, permettant de rendre les données plus visuelles s’est également ajouté à cet audit analytics.
Syndic One s’est donc vu recevoir un rapport complet de leurs données web, entièrement personnalisé, plus facile à lire et à partager.
2) Conception du site avec prise en compte des enseignements des tests utilisateurs
Une seconde vague de tests utilisateurs sur la base de wireframes a, par la suite, été réalisée (durée de 20min). Nul besoin de rappeler l’importance des wireframes qui permettent à la fois de réduire les incertitudes et de se concentrer sur l’architecture de l’information. Grâce à un travail de retouche de la structure et des contenus du site, l’offre est devenue beaucoup plus claire pour les utilisateurs.
Cette seconde phase a surtout permis de valider les orientations prises sur les choix de conception faits, sur les parcours et les nouvelles pages.
Phase de prototypage faite sur Invision, qui permet simplement de dynamiser les wireframes, dans leurs versions mobile, desktop et tablette.
Conception de nouveaux parcours :
La page offre qui était auparavant présentée sous forme de texte brut a complètement été revue. Un tableau suffit à la clarifier désormais.
Avant / Après avec une offre plus claire présentée sous forme de grille
La section dédiée à la réalisation du devis a également été améliorée avec un tout nouveau parcours en 5 étapes, bien plus clair et simplifiée que le formulaire qui était proposé.
3) Direction artistique et Intégration HTML/CSS
À la suite des phases de direction artistique (DA), ce sont 2 versions du site qui ont été proposées à la marque. Plus moderne, plus proche de la cible des utilisateurs, plus humaine, claire et fidèle à la marque, découvrez à cette adresse la version gagnante :
Après quelques aller/retour et la sélection de la version gagnante, nous avons procédé à la réalisation des pages du site.
Les objectifs de l’identité graphique :
– Permettre, avant toute chose, une identification rapide de l’offre et de la marque
– Améliorer et faciliter la navigation et la lecture
– Rendre le site plus humain et proche de ces utilisateurs
Intégration HTML/CSS + Développement
Pour finir, c’est aussi les équipes Wexperience qui ont piloté l’ensemble du développement et l’intégration du site sous le système de gestion de contenus (CMS) WordPress ainsi que le développement du formulaire (directement relié à Salesforce)
Livrable -> Code HTML de tout le site et maquettes graphiques de tout le site
Méthodologie de projet :
Agile et centrée utilisateur : un processus que nous adaptons à une majorité de nos projets et qui alterne phase de conception et test utilisateurs. Par une approche d’amélioration continue du projet, cela permet de produire un site en meilleure adéquation avec les besoins utilisateurs et de réduire, par la suite, les coûts de maintenance corrective.
Quant aux tests utilisateurs, ils permettent d’avoir le point de vue objectif des utilisateurs finaux. Nous réalisons généralement nos tests dans des salles dédiées : dans nos locaux à Lille, ou à Paris, ou même ailleurs, si le client le souhaite. Dans tous les cas, nous invitons également nos clients à assister aux tests.
Outils
Pour assurer la qualité de nos prestations, plusieurs outils nous permettent d’optimiser les coûts et les temps de conception.
Invision : pour le partage d’informations et les discussions sur le projet. Invision est également utilisé pour le prototypage
Sketch : outil de conception, qui permet de gagner du temps en production. Avant de passer à la conception de maquettes graphiques, celles-ci sont conçues sous la forme de maquettes « fil de fer » (wireframes) qui permettent de se concentrer d’abord sur l’architecture d’information avant l’apparence graphique du site. La légèreté de l’outil permet également de gagner du temps de production en favorisant la mise en forme d’idées de manière plus rapide.
WordPress : est le CMS que Syndic One utilise et sur lequel nous avons procédé à l’intégration.
En 2017, la mutuelle GSMC confiait la refonte de son site à Wexperience. Il s’agissait de remettre à jour un site qui avait trop vieilli et qui ne correspondait plus à la stratégie digitale de la société. Wexperience s’est donc vu confier la partie design de la refonte. Revue de détail !
Qui ?
GSMC est une mutuelle indépendante
Besoins de la refonte
Besoin de se remettre dans l’air du temps, le site « datait »
Changement de plateforme technique
Intégration d’une version mobile, alors inexistante
Démarrage d’une véritable politique digitale / préparation de l’avenir
Réponse de Wexperience
A chaque projet, sa réponse propre, mais avec les mêmes méthodologies centrées utilisateurs
1) Acquisition de la connaissance client
Wexperience possédait déjà une expérience du métier de l’assurance (ayant déjà travaillé sur la refonte de Smeno, Humanis, Matmut ou Just). Les équipes connaissent bien les problématiques de mutuelles ou d’assurance.
La connaissance se fait également par des entretiens individuels sur site (tests utilisateurs) permettant de dresser un diagnostic de l’existant et de perfectionner sa connaissance utilisateur.
Importance des tests utilisateurs : GSMC qui avait un à priori très négatif sur son site a pu découvrir, au contraire, des points forts qui l’ont surpris et ont pu être réintégrés dans le nouveau site. Lors de ce test, nous avons également mis en oeuvre, notre questionnaire de mesure de l’expérience utilisateur UXM via notre solution UX.Care.
A partir des éléments constitutifs de la marque, Wexperience a fait plusieurs propositions d’identité graphique. Celle-ci, en plus de son rôle dans la valorisation de la marque, servant également à renforcer la perception de facilité d’utilisation du site. Cela a été un succès comme l’on montré les mesures de l’expérience utilisateur réalisée sur l’ancien site et le nouveau site
Objectifs de l’identité graphique : permettre une identification rapide de la marque et véhiculer ses valeurs améliorer la perception de la facilité d’utilisation du site
Intégré à cette phase : la conception d’animations et d’interactions visuelles destinées à améliorer le potentiel émotionnel de l’interface
Livrable -> maquettes graphiques des pages les plus importantes du site
3) Conception des pages
La conception des pages est réalisée dans un premier temps sous la forme de maquettes fil de fer.
Ce procédé permet d’accélérer la production des pages, mais aussi d’avoir plus de souplesse.
Dans le cas de GSMC, les pages pour ordinateur ont d’abord été conçues, puis celles pour l’affichage sur téléphone mobile.
A noter : cet ordre est interchangeable et dépend de la maturité du site. Un site avec beaucoup d’utilisateurs mobiles sera d’abord conçu pour les téléphones mobiles (« mobile first »).
Après une première phase de conception, un test utilisateur a été conduit de manière à apporter de nouvelles améliorations et de nouveaux correctifs.
A la fin de la phase de maquettage est appliquée la couche de design graphique. Celle-ci vient renforcer certains détails ergonomiques du site, en plus de poser l’identité de marque.
Prise en compte du référencement naturel (SEO) : au cours de la conception, un expert SEO vient valider la conception des pages en prenant en compte les critères d’optimisation
Livrable -> maquettes graphiques de tout le site
4) Intégration HTML/CSS
Avant d’être exploitable techniquement, les maquettes de page doivent être codées en HTML/CSS, le langage universel dedescription du Web.
Livrable -> code HTML de tout le site
Méthodologie de projet agile et centrée utilisateur
Ce processus alterne phase de conception et test utilisateurs. Il permet, par une approche itérative d’amélioration continue du projet, de produire un site en meilleure adéquation avec les besoins utilisateurs et de réduire par la suite les coûts de maintenance corrective.
Cela par rapport opposition à ce qui est appelé « le mode projet » où un cahier des charges est établi à l’avance et suivi sans aucune possibilité de correctif avant la livraison.
Les tests utilisateurs permettent d’obtenir la vision des clients finaux au cours du processus de conception.
Outils
Pour assurer la qualité de nos prestations, plusieurs outils nous permettent d’optimiser les coûts et les temps de conception.
Invision : pour le partage d’informations et les discussions sur le projet. Invision est également utilisé pour le prototypage
Sketch : outil de conception, qui permet de gagner du temps en production. Avant de passer à la conception de maquettes graphiques, celles-ci sont conçues sous la forme de maquettes « fil de fer » (wireframes) qui permettent de se concentrer d’abord sur l’architecture d’information avant l’apparence graphique du site. La légèreté de l’outil permet également de gagner du temps de production en favorisant la mise en forme d’idées de manière plus rapide.
La refonte de site, totale ou partielle, est un chantier long et compliqué qui présente des risques. Pour assurer sa réussite, il faut savoir mettre en place une méthode bien rodée. C’est cette méthode, que nous appliquons avec nos clients, qui vous est présentée ici, à travers le cas de Oney Bank, leader du crédit à la consommation en France.
Les risques de la refonte
Bien que l’optimisation permanente des front-office soit désormais la règle, il existe encore de nombreux cas de sites webs ou mobiles qui nécessitent une démarche de refonte complète. Autrement dit, une démarche qui nécessite à la fois une étude en profondeur des ressorts du succès d’un site, mais qui remette également en question son apparence et son UX.
Mais cela ne se fait pas sans risques et les écueils sont nombreux qui risquent de mener à un projet innabouti, peu efficient, voire contre-productif dans certains cas.
Ne pas aboutir
Nombreux sont les cas où le projet, démarrant en fanfare, finit par s’enliser dans les sables mouvants d’interminables réunions, de prises de décisions reportées, de manque de budget ou carrément de manque de personnel.
Être trop long
Le monde digital avançant à la vitesse du vent, les projets trop long voient finalement remettre en question leurs propres objectifs quand la conception, par lenteur, vient à proposer des solutions déjà dépassées lors de leur mise en production.
Être trop cher
Un projet de refonte, s’il n’est pas maîtrisé peut vite aboutir à des surcoûts et des dépassements budgétaires qui peuvent mettre de la tension au sein des équipes et mettre en danger même son aboutissement.
Rater ses objectifs
La route est longue entre le début et la fin d’un projet et les détours fréquents. Et si le projet n’est pas accompagné d’une vision globale stratégique, il peut vite s’éloigner des objectifs initiaux. Résultat, il risque d’aboutir à un simple lifting par manque de clairvoyance ou bien alors à un résultat en opposition avec les objectifs de départ.
Les pouvoirs de l’UX peuvent-ils aider à sauver un projet ?
L’UX à la rescousse
Une refonte doit donc, dès le départ, se contraindre à un processus métier et à une organisation qui permet de contourner tout ces risques ou, tout au moins, à les amoindrir. L’UX, qu’on peut aussi assimiler à la conception centrée utilisateur, mêlée de méthodes agiles, va permettre justement de mener à bien un projet de refonte avec un maximum de résultats garantis ! C’est la méthode que nous utilisons chez tous nos clients et qui donne entière satisfaction.
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur notre nouvelle offre « refonte de site », cliquez ici
Pourquoi l’UX ?
Les méthodes de l’UX sont, au départ, basées sur l’ergonomie, c’est à dire sur l’observation des utilisateurs pour en tirer des conclusions. Observer les utilisateurs et leurs actions permet de se faire une opinion très proche de la réalité de ce qui se passe en réalité sur un site ou une application. Mieux que les web analytics, qui nécessitent beaucoup de ressources et de temps pour en tirer parti, l’UX permet à partir de méthodes peu onéreuses, simples et efficaces, de comprendre parfaitement les envies, les besoins et les craintes d’une population cible et de déterminer les moyens d’améliorer la satisfaction simplement en travaillant l’apparence et l’organisation des interfaces.
Les personas sont un outil très utilisés dans la conception centrée utilisateurs
Plus encore, l’UX oblige à raisonner et à s’organiser de manière tout à fait nouvelle, en se plaçant du point de vue de l’utilisateur, pour mener un projet. Dans le web, comme en informatique, c’est la méthode la plus efficace. Une approche centrée utilisateur permet non seulement d’accélérer le temps de production d’un projet, mais également d’en améliorer grandement la qualité du point de vue de l’utilisabilité et de l’efficacité économique, tout en en réduisant les coûts de correction et de maintenance. C’est à se demander pourquoi tout le monde ne le fait pas, encore aujourd’hui.
(cf Benefits of User-Centered Design)
Le cas du projet Oney
Oney Bank, société de crédit à la consommation, acteur majeur sur ce marché, cherchait à améliorer la notoriété de ses offres et surtout à augmenter l’efficacité de leur présentation sur son site de marque. A savoir : Oney est partenaire de grandes marques de distribution et la plupart de ses clients entrent par le biais d’un achat à travers ces marques (par du crédit-conso en fin de parcours d’achat ou, plus simplement, comme moyen de paiement sur un site de ecommerce).
Oney se doit, comme tous ses concurrents d’informer et de rassurer sur son identité, sur ses offres, et sur son image, qui ont un impact particulièrement important dans les métiers d’argent. Si la confiance n’est pas au rendez-vous, la clientèle fuit.
Une des pages de l’ancienne version du site, avant la refonte
Nos conseils pour bien réussir un projet de refonte
Objectifs et bilan
Un des points les plus primordiaux d’un tel projet est d’en fixer les objectifs et de s’y tenir. Sans objectifs clairement partagés de bout en bout de la chaîne de production, il sera difficile de monopoliser et de rassembler chacun dans le même état d’esprit au cours du projet.
Pour mieux vous faire saisir le travail accompli, nous nous attacherons ici à vous décrire le projet de refonte de la fiche produit de l’assurance vie. Comme tout produit financier, l’assurance vie est un produit compliqué qui nécessite à la fois clarté et rassurance. Qui plus est, comme beaucoup de produits financiers, le produit est soumis à des contraintes légales qui rendent parfois « impraticables » ou illisibles certaines informations.
Le protocole que nous mettons en place est itératif. Il a pour principe de laisser le temps au temps et d’ajuster par itérations courtes les différentes maquettes que nous livrons au client, et cela, en fonction des avis des utilisateurs qui sont testés à échéances régulières.
Comme vous pouvez le voir – et c’est très important – le projet est « entrecoupé » de tests utilisateurs. Et c’est là réellement que réside notre principale source d’innovation et d’inspiration. C’est bien lors de ces sessions avec les clients finaux que nous arrivons à déterminer dans le détail ce qui pourrait permettre d’améliorer l’expérience utilisateur, et, in fine, la performance commerciale de la page, comme nous le verrons à la fin de cet article.
Le protocole de test consiste en une série d’interviews individuels d’une heure environ.
Notre conseil : toujours mener un test utilisateur sur l’existant afin d’obtenir une vision objective de l’UX sur l’interface testée. Conduire ensuite ce même test à différentes phases du projet afin de pouvoir comparer les évolutions apportées.
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur notre nouvelle offre « refonte de site », cliquez ici
Dans ce genre de projet, trois tests sont menés :
Un premier test d’apprentissage et de bilan. Il est mené sur l’existant et permet aux équipes UX de prendre connaissance du métier d’Oney, mais également de se faire une opinion objective du comportement des utilisateurs sur le site (qu’il soit mobile ou desktop). A noter : les résultats de ce test sont mixés avec d’autres axes d’analyses comme :
Les Web Analytics (partie menée par Digitaleez, notre partenaire)
Les personas clients
Les experience maps
les cartes de chaleurs : clicmap, scrollmap
Et plus encore, en fonction de ce que le client est capable de nous livrer
Analyse page Oney : le premier test utilisateur va pouvoir permettre de renforcer l’équipe de conception dans ses convictions et rationnaliser l’analyse d’un point de vue utilisateur final
Un deuxième test de validation des premières hypothèses de refonte. Ce deuxième test est réalisé sur un prototype construit à base de wireframes (maquettes fil de fer sans design graphique). Malgré la difficulté pour les utilisateurs finaux de se projeter dans ce qui n’est qu’une ébauche, les enseignements à retirer de ce genre de test sont extrêmement riches et permettent de s’engager à ce stade du projet dans la bonne voie sans le moindre doute. C’est aussi à ce stade que les fausses pistes sont éliminées.
Exemples de wireframes : plus d’une centaine ont été produite pour la version desktop et la version mobile
Le dernier test est conduit sur les pages habillés graphiquement (soit sous forme de maquettes prototypées, soit déjà montées en HTML). Ce dernier test est essentiel pour se rassurer et valider l’intégralité de la phase de conception. Il est encore temps de faire des correctifs à moindre coût avant la phase finale de développement.
Les maquettes, les wireframes ou les prototypes sont partagées entre les équipes sur Invision
Les tests utilisateurs ne sont pas le seul outil que nous utilisons. La phase d’analyse comprend aussi l’étude de données quanti (web analytics, scrollmap, clicmap) associé à la création d’outils centrés utilisateurs (Personas, Experience maps).
Un questionnaire pour mesurer l’UX
Les tests ne sont pas la seule source d’information pendant la phase de conception. Afin d’avoir une vision plus exhaustive de l’expérience client, nous y ajoutons systématiquement un questionnaire d’évaluation Attrakdif qui permet d’avoir une mesure objective de l’expérience utilisateur dans toutes ses dimensions.
Le questionnaire Attrakdif est un questionnaire simple que les utilisateurs peuvent remplir en moins de 3mn
Soumis à chaque utilisateur en fin de de test, il est un élément indispensable de la conception. Comme vous pouvez le voir sur le schéma ci-dessous, les progrès accomplis entre la version de départ non optimisée et la version finale du projet sont indéniables. Quasiment tous les critères de l’expérience utilisateur ont été améliorés.
Plusieurs Attrakdif ont été réalisés sur les wireframes, le site original et le site final. Ce schéma montre la progression très nette de l’UX sur les différents parcours utilisateurs testés.
Des gains jusqu’à 20% sur le coût d’un projet classique
Pourquoi la méthode centrée utilisateur fait-elle gagner du temps et de l’argent ?
La mise en place d’une telle méthodologie peut paraître lourde, gourmande en temps, chère. Au contraire, c’est tout l’inverse ! Cette démarche fait gagner de l’argent à tout le monde sur plusieurs facteurs :
Le temps du projet est limité : grâce à la conception centrée utilisateur couplée à un mode de développement agile, la durée du projet est restée raisonnable et aucun dépassement de temps n’a été constaté.
Economie : le surcoût du projet à cause de l’apport de compétences UX est en réalité gommé par le premier critère (respect des délais), mais aussi par la livraison d’un résultat bien plus satisfaisant en terme de qualité de développement. Il a été montrée par A+B (ref) que l’économie réalisée se situait aussi au niveau des coûts de maintenance et de correction, notoirement réduits grâce à une UX appropriée et adaptée aux besoins utilisateurs (cf the ROI of User Experience)
Performance : comme nous allons le voir pour terminer cet article, le taux de transformation de demande de souscription à l’assurance vie a grimpé de manière significative suite à la refonte.
Les allers et retours, qui font peur à toutes les agences, sont intégrés au budget dès le départ. Il n’y a donc pas de surprise non plus à ce niveau
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur notre nouvelle offre « refonte de site », cliquez ici
Finalisation et mesure de la performance
Une fois validées les maquettes finales, celles-ci sont montées en HTML puis envoyées aux équipes de développement qui disposent alors de documents précis, fiables et testées. Sur ce type de projet, toutes les pages sont conçues par Wexperience. Cela veut dire que presqu’aucun écran n’échappe à la main créatrice de nos équipes. Adopter ce niveau de précision permet d’éviter par la suite toute dérive entre le moment de la livraison des maquettes et leur montage. De la même manière qu’au cours de la phase de conception, cette manière de faire diminue aussi les aller et retours entre les équipes techniques et les équipes de conception. La mesure de la performance de la nouvelle version s’effectue par un test A/B classique. L’ancienne version est testée versus la nouvelle, rien d’extraordinaire !
Plusieurs kpi sont mesurés, mais nous gardons l’oeil sur le plus important, qui est le taux de transformation.
Sans dévoiler de résultats prévis, le test a montré plusieurs améliorations notoires :
Des taux de clic beaucoup plus forts sur les call-to-action principaux
Mais aussi et surtoutdes taux de remplissage du formulaire de souscription allant parfois jusqu’à +10% !! Quand on rapporte ce gain au nombre de visiteurs du site, le résultat n’est pas négligeable.
La page finale après refonte du produit d’assurance vie d’Oney. La part belle est faite à l’émotion, la clarté, la simplicité et la transparence qui sont des critères fondamentaux de la conversion sur ces types de site.