Refonte d'un site web

Une meilleure expérience utilisateur et plus de vente pour le client
durée: 2 mois
Année: 2022
Role: UX/UI Designer

contexte

Julienpatane.com, coaching sportif et médecine douce

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.

Nouveau site Julien Patane

Le defi

Les utilisateurs se perdent en voyant les différents services

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.

la Mission

Concevoir une meilleure expérience utilisateur et accroître le nombre de client

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.

Le processus

Utiliser l'approche design thinking pour définir et résoudre le problème

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.

Etapes du design thinking

Empathie

Premièrement, j'avais besoin de mieux comprendre les utilisateurs, leurs besoins et le site Julienpatane.com.

Le Plan de recherche

Fixer des objectifs de recherche et établir un plan

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

l'Evaluation du site

L'évaluation du site a révélé des problèmes d'utilisabilité

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.

Mobile first

Page non responsive !

Le site à bien une version mobile, mais ne répond pas au différentes tailles du navigateur sur PC.

Compréhension

Blog, ou services vendus ?

Il n'est pas facile de comprendre que le client propose des services.

Architecture

UI douteuse

Textes mal alignés, police pas très lisible, informations mal structurées.

Exp. utilisateur

Trop de cliques pour arriver à ses fins

L'accès au formulaire et à la tarification est compliqué.

Recherche utilisateur

Qui sont-ils, et comment mieux les comprendre ?

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.

Sport

Groupe 1

Se renseigner sur une séance de coaching collectif et prendre contact avec le client via le formulaire du site.

Sport

Groupe 2

Se renseigner sur une séance de coaching individuel et prendre contact avec le client via le formulaire du site.

Médecine douce

Groupe 3

Se renseigner sur la kinésiologie, et prendre contact pour une séance avec le client via le formulaire du site.

test d'utilisabilité

Les tests d'utilisabilité des utilisateurs ont révélé des points faible

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.

Benchmark

Trouver des solutions, écarter les mauvaises idées

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.

Benchmark site Benchmark site Benchmark site

Définir

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

Enoncé du problème

Les utilisateurs ont besoin de comprendre les prestations vendues par le client, de pouvoir accéder aux prix et à une prise de contact facilement.

Idéation, Prototyper, Tester, répéter

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.

ideation

Le tri de carte, pour mieux comprendre l'utilisateur

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.

Photo tri de carte
1ère étape: Ecrire sur chaque post-it le contenu que le client souhaite garder.
Photo tri de carte
Laisser les utilisateurs catégoriser le contenu avec des post-it vierges jaunes.
Photo tri de carte
Faire le point avec les utilisateurs sur leurs démarches, puis se mettre d'accord sur une catégorisation commune.

L'arborescence avant

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

Arborescence avant
A chaque étage un choix est obligatoire est à faire pour en savoir plus. En résulte de trop nombreux cliques et un utilisateur perdu.

L'arborescence après

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.

Arborescence aprés
Arborescence simpliée avec moins d'étages = Moins de cliques. Ajout de nouvelles sections claires et rapidement cliquables.

designer

Wireframes, la solution

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.

Wireframe
Je commencerai à dessiner la page d'accueil. Le choix de scinder l'écran en deux pour + de dynamisme.
Wireframe
En écoutant les retours des utilisateurs, ils voulaient rapidement savoir qui était le coach.
Wireframe
Le choix de présenter les prestations par blocs à été fait au départ.

Prototyper

Affiner la solution grâce à des tests d'utilisabilité

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.

Photo prototype cliquable

tester

Ecouter les utilisateurs, toujours

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

repeter

Utiliser les informations recueillies pour itérer sur la solution d'origine

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.

Un aperçu rapide des services proposés

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.

Demander de faire un choix

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.

Page accueil site original

Une prise de contact facilité

Le benchmark m'a donné de bonnes idées.

Un accès au contact immédiat

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.

Ancien formulaire

Une section tarif dédiée

Trouver des tarifs était compliqué.

Tarif ancien site

Utilisateurs confus

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.

Un formulaire attrayant

Formulaire ancien

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.

Formulaire ancien

Garder l'essentiel

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

Navigation intuitive

Navigation déroutante

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 design final

Le prototype est validé, place au choix des couleurs.

partie ui

Le prototype prend vie

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 ?

Palettes de couleurs

Design final

La construction du site

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

Nouveau site Julien Patane

Impact

Un meilleur site pour les utilisateurs

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.

Plus facile d'utilisation

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 !

Prise de contact facile

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.

Compréhension des services proposés

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.

et ensuite ?

Prochaine étape

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:

Remerciement

Un travail d'équipe

Merci au développeur Nicolas Maitre pour son travail. N'hésitez pas à visiter son site !

En cliquant sur "Accepter tous les cookies", vous acceptez le stockage de cookies sur votre appareil pour améliorer la navigation sur le site, analyser l'utilisation du site et contribuer à nos efforts de marketing.