Julien Patane est un client proposant plusieurs services: Coaching sportif, kinésiologie, réflexologie et cohérence cardiaque. Il pratique depuis 2017 et partage notamment son site via des cartes de visites où sur la plateforme Superprof. Ayant lui même fait son site web, il m'a demandé de le refondre totalement. Il ne s'agissait pas seulement de mettre un coup de peinture, mais de repenser aussi l'architecture afin de gagner en clarté et en compréhension.
Le client propose plusieurs services différents et l'utilisateur se perd. En cause une arborescence et une architecture de l'information mauvaise. Nous ne comprenons plus si le client vend une prestation, où si il s'agit d'un blog.
Julien Patane est venu vers moi pour refondre totalement son site afin que ses utilisateurs comprennent mieux ses prestations et pour pouvoir attirer de nouveaux clients. J'ai donc endossé le rôle d'UX et d'UI designer pour ce projet.
L'équipe comprenait un développeur et moi-même. En tant que seul designer, j'étais responsable de mener des recherches, de concevoir des croquis, des wireframes, des maquettes et un prototype, et d'entreprendre des tests d'utilisabilité. J'ai travaillé directement avec le client pour comprendre son environnement et son objectif. J'ai également fait l'interface avec le développeur pour planifier et réaliser les tests d'acceptation du site web.
Premièrement, j'avais besoin de mieux comprendre les utilisateurs, leurs besoins et le site Julienpatane.com.
J'ai défini quelques objectifs de recherche et décidé des meilleures méthodes de recherche pour les atteindre :
1. En apprendre le plus possible sur le site Julienpatane.com
Evaluation du site
2. En apprendre le plus possible sur les utilisateurs
Entretiens utilisateurs & test d'utilisabilité
3. Comprendre les solutions actuelles et la concurrence
Benchmark
Le but de l'évaluation était de trouver rapidement et facilement les problèmes d'utilisabilité qu'un utilisateur peut rencontrer. J'ai parcouru le site comme un utilisateur cherchant une prestation. Voici les principaux problèmes que j'ai découverts.
Le site à bien une version mobile, mais ne répond pas au différentes tailles du navigateur sur PC.
Il n'est pas facile de comprendre que le client propose des services.
Textes mal alignés, police pas très lisible, informations mal structurées.
L'accès au formulaire et à la tarification est compliqué.
Mon but était de connaître le ressenti de l'utilisateur pendant son parcours sur le site. Premièrement qui sont les utilisateurs ? A l'aide de l'entretien avec le client, nous avons pu définir 3 personas.
Le nombre de contact n'étant pas suffisant pour avoir un échantillon représentatif, j'élargie les utilisateurs à un groupe d'une vingtaine de personnes de 20 à 40 ans. Je les divise en 3 groupes ayant chacun une mission bien précise.
Se renseigner sur une séance de coaching collectif et prendre contact avec le client via le formulaire du site.
Se renseigner sur une séance de coaching individuel et prendre contact avec le client via le formulaire du site.
Se renseigner sur la kinésiologie, et prendre contact pour une séance avec le client via le formulaire du site.
Chaque utilisateur devait répondre à un questionnaire SUS, UEQ et complétion de phrase que j'ai mis en place. Pour certains, j'ai pu aussi avoir un entretien présentiel où téléphonique. Voici quelques retours.
La navigation n'est pas intuitive
Certaines pages ne sont pas optimisées sur smartphone.
Il manque une section Tarifs dédiée
Le formulaire est impossible à trouver.
Cela nous donnerait plus confiance si nous voyons Julien sur la page principale.
Il est compliqué de naviguer entre les pages du site.
Le benchmark m'a permis d'analyser les sites concurrents. L'objectif était de comprendre comment leurs services étaient vendus, et si certains proposaient plusieurs services identiques à celui de mon client.
À ce stade, il était temps de redéfinir l'objectif et de réduire sa portée en fonction des informations recueillies auprès des utilisateurs.
Les utilisateurs ont besoin de comprendre les prestations vendues par le client, de pouvoir accéder aux prix et à une prise de contact facilement.
Avec les informations des utilisateurs et un énoncé de problème redéfini en main, il était temps de proposer des solutions et de les valider.
Le tri de cartes (Card sorting en anglais) est une des méthodes utilisées pour construire une architecture de l’information en impliquant les utilisateurs finaux. A l’aide de 2 personnes, je réalise un tri de carte ouvert que j’animerai. J’aurai auparavant listé sur des post-it verts le contenu du site web que le client souhaite garder.
La première étape était d'analyser l'arborescence en place. Pourquoi elle ne fonctionne pas ? où pourrais-je apporter des améliorations ? J'ai commencé par dessiner l'arborescence pour plus de visibilité.
Grâce à l'atelier de tri de carte, aux retours des utilisateurs et à mon analyse, je dessine la nouvelle arborescence. Objectif: Simplifier le parcours utilisateur, et mieux structurer l'information.
Mobile first ! L'arborescence étant validée, je commence par la version mobile. Le défi à ce moment là, est de faire comprendre rapidement et clairement à l'utilisateur que le site contient des services différents. Je validerai mes idées avec le client tout au long du projet afin d'avancer étape par étape.
J'ai conçu un prototype mid-fidelity pour valider la solution de conception initiale. Je voulais savoir si la refonte avait résolu certains des problèmes de clarté, de flexibilité et de navigation.
J'ai donc envoyé le prototype à mon groupe d'utilisateur afin de tester cette nouvelle version et entendre leur retour. Ci-joint quelques retours.
La section tarif n'est pas clair
Le parcours est plus fluide
L'accès au contact est plus facile
Il n'est plus possible de voir des avis et donner le sien
Il manque une FAQ
On comprend mieux le but du site
En utilisant les connaissances acquises lors des tests d'utilisabilité et des critiques de conception, j'ai itéré sur les wireframes et la conception visuelle. Les sections suivantes mettent en évidence les principales améliorations apportées au site et au parcours utilisateur.
Je voulais être sur qu'en arrivant sur le site, l'utilisateur aller comprendre que plusieurs services sont proposés, et qu'ils peuvent être complémentaires.
Sur le site original, le client demandait à l'utilisateur de faire un choix entre le sport, la kinésiologie ou la section contact. Un clique qui allait nous empêcher de connaître rapidement quels sont les services proposés derrière chaque choix.
Le benchmark m'a donné de bonnes idées.
Comme vu dans l'arborescence du site original, la prise de contact est difficile. L'utilisateur qui n'arrive pas à prendre contact va quitter le site rapidement. Seulement 20% des testeurs ont trouvés le formulaire et m'ont avoué ne pas avoir quitté la page car il s'agissait d'un test.
Trouver des tarifs était compliqué.
Les utilisateurs testeurs m'ont confiés être perdus. Ils lisaient les informations concernant le sport et la médecine douce, mais aucun prix. Pourtant ces informations existaient bien ...
Le formulaire existant - en plus d'être difficile à trouver - se remplissait en 2 étapes. Un clique de plus qui éloigne l'utilisateur.
Premier clique pour poursuivre l'envoi du formulaire. Et la couleur verte de remplissage "pollue" celui-ci.
Deuxième clique. De plus, le formulaire ne rentre pas dans une page, nous devons scroller en bas pour l'envoyer.
Un formulaire ne doit contenir que les informations importantes. Dans l'original, le client demandait de cocher le service qui l'intéresse. Mais l'utilisateur peut très bien décrire sa demande aussi dans le champs "message" avec plus d'informations.
Naviguer entre les différentes sections était compliqué.
Nous devions utiliser les flèches retour du navigateur pour pouvoir changer de section et découvrir d'autres prestations. De plus, les libellés comme "contact / infos utiles" ne sont pas clair.
Que trouve t'on derrière ? La navigation en est affectée.
Le prototype est validé, place au choix des couleurs.
Comme vu durant l'entretien, le client souhaite un bleu chaleureux, et comme couleurs énergiques du jaune et orange. Je lui propose plusieurs palettes de couleurs, tout en affinant quelques questions: Quelle couleur prédominante pour le header et footer ? Une couleur pour les mots en gras ? D'autres préférences particulières ?
Le projet est envoyé au développeur, et nous travaillons main dans la main pour finaliser ce projet. Quelques semaines plus tard, le site web est terminé.
La facilité d'utilisation, de prise de contact et de compréhension des services vendus étaient 3 mesures clés qui ont été mesurées au cours de la phase de recherche et du deuxième test d'utilisabilité. J'ai pu constater que la refonte avait un impact positif sur les utilisateurs.
J'ai demandé aux utilisateurs à quel point le nouveau site était facile à utiliser. 100% des utilisateurs ont convenu qu'il était facile à utiliser, contre 30% à l'origine !
Grâce au bouton "me contacter" fixe en première page et dans la navbar, 100% des utilisateurs ont trouvé la prise de contact très facile.
Les utilisateurs m'ont reportés que maintenant, le but du site web est compris. Je pense que ces améliorations se traduiront par un taux de prise de contact plus élevé et par conséquent, plus de nouveau client.
Contacter de nouveau le client d'ici 6 mois pour savoir si le nombre de client via le site à augmenter. Si non, re itérer le processus.
J'ai aussi demandé au client de:
Merci au développeur Nicolas Maitre pour son travail. N'hésitez pas à visiter son site !