Refonte site internet : comment tirer profit des techniques UX et UI ?

Posté par Emmanuelle

header refonte site internet agence CREADS
header refonte site internet agence CREADS

La refonte d’un site internet peut être un grand moment de stress. Vous hésitez à changer, vous ne savez pas trop dans quelle direction aller… Pourtant, votre site actuel regorge d’apprentissages pouvant vous aider à atteindre une nouvelle étape dans votre développement. Les méthodes UX et UI Design, dans ces situations, sont des guides précieux pour rendre votre site encore plus performant. Alors, quel processus suivre pour modifier son site web en toute sérénité ? CREADS, plateforme freelance spécialisée en graphisme, rédaction et vidéo, vous donne les clés pour avancer.

1. Refonte site internet : étudiez en détails l’ancien

1. L’audit UX 

Votre site web a encore bien des choses à vous apprendre. Avant de tout changer, n’hésitez pas à suivre les performances de votre site actuel via des “heatmaps” (carte de fréquentation ou zone thermique en français) ou des trackers. Hotjar, par exemple, est un outil de référence pour les webdesigners, permettant de suivre les performances de votre site internet en identifiant les zones de clics les plus actives.

Dans le cadre d’un audit UX complet, les UX designers font notamment particulièrement attention aux metrics de conversion de votre site, page par page, grâce à Google analytics par exemple. En résumé, où « perdez-vous » vos utilisateurs ? Pour quelles raisons ? 

En suivant les performances de votre site actuel, vous pourrez en apprendre beaucoup sur le comportement habituel de vos clients. Cet audit pourra vous indiquer les fonctionnalités plébiscitées par vos utilisateurs, et, au contraire, celles qui sont peu ou pas utilisées.

Complétez cet audit quantitatif si vous le pouvez, avec des interviews qualitatives de vos clients et utilisateurs. Ces témoignages vous permettent de mieux comprendre les comportements derrière leurs choix et creuser certains points ou fonctionnalités importantes. Grâce à cet audit de votre site web et leurs retours, vous êtes en mesure de faire des choix éclairés, notamment au sujet du budget à accorder à cette refonte.

2. Le benchmark et l’étude de la concurrence 

Si vous avez fait votre site il y a quelques années, il se peut, malgré votre bonne volonté, que vos inspirations soient un peu datées. Les nouvelles tendances et bonnes pratiques évoluant rapidement dans ce domaine en plein essor, il est facile de paraitre démodé. Pas de panique : la refonte d’un site est l’opportunité rêvée de tout remettre à plat.

Profitez de ce moment d’inspiration pour vous poser les bonnes questions. Procéder à une refonte de site internet plutôt qu’une création présente des avantages certains, en effet vous avez déjà atteint une certaine maturité. Vous connaissez les sources de satisfaction de vos clients, maîtrisez votre rythme de croisière et avez sans aucun doute une meilleure visibilité sur votre marque et vos valeurs que dans le passé. Vous n’êtes plus dans les premiers frissons de la création et les angoisses des premiers clients, au contraire, vous vous connaissez mieux et avez une bonne vision de tout ce qui a fonctionné. Si vous le pouvez, rassemblez votre équipe pour un brainstorming et demandez-vous :

  • qui vous êtes,
  • ce que vous faites,
  • comment vous le faites,
  • ce que vous voulez accomplir,
  • ce que vous voulez éviter.

Comparez ces réponses et lancez une discussion. Il se peut que de ce simple exercice ressorte de précieux insights sur votre marque et la direction que vous voudriez prendre. N’oubliez pas, l’UX Design est une question d’émotions : celles que vous faites ressentir à vos utilisateurs et celles que vous voulez leur éviter. Mettre le doigt dessus pourra vous aider à trouver l’inspiration ailleurs que dans votre cercle proche de concurrents.

La startup Qui Toque par exemple, a profité de la refonte de son identité visuelle et de sa charte graphique pour revoir son site internet. Le site est plus épuré, les couleurs plus pop, et les formes organiques (CTA ronds, images dans des bulles au lieu des rectangles, etc.). La Une du site met également en avant le fonctionnement de l’entreprise (« Comment ça marche ? »), ce qui répond à une volonté de rassurer le visiteur. Un audit des performances du site web précédent ainsi qu’une étude des dernières tendances créatives a permis d’aboutir à ce résultat convaincant.

3. La construction de personas 

Profitez également de ce moment pour revoir vos personas client. N’hésitez pas à confronter celles définies lors de  votre première création de sites web avec les avis de différents services. Le marketing en a sûrement déjà défini et vos commerciaux ont aussi leur mot à dire sur le type de clients qu’ils rencontrent au quotidien.

Essayez de rassembler ces visions : savez-vous qu’un bon persona peut rendre un site web 2 à 5 fois plus efficace pour atteindre vos cibles (source : étude Hubspot) ? Si vous avez fait des entretiens utilisateur, leurs retours peuvent également être utiles. Vos personas doivent répondre principalement à deux questions :

  • Quel est le but de cet utilisateur sur mon site ? 
  • Quels sont ses besoins, et quelles opportunités avons-nous de les combler ? 

En créant des personas vivantes et détaillées, il vous sera plus facile de designer des solutions appropriées. Cette méthode vous permet de vous mettre le plus possible dans la peau de vos utilisateurs et de faire des choix UI Design intelligents. Demandez-vous par exemple si vos personas seraient vraiment intéressées par cette landing page que vous avez vue chez un concurrent lors de votre phase de recherche.

N’hésitez pas à compléter ces personas grâce à vos objectifs business, qui influenceront également votre démarche. Si par exemple vous souhaitez augmenter les ventes venant de votre site de 15%, vous serez peut-être tenté de vous lancer dans une stratégie de marketing inbound et content marketing pour compléter votre refonte, en ajoutant un blog de contenus et un funnel de conversion pour chaque persona identifié.

Gardez en tête que vos objectifs doivent être SMART, c’est-à-dire Spécifiques, Mesurables, Atteignables, Pertinents (relevant en anglais) et ancrés dans le Temps. Plus vous serez vague sur la direction à prendre, plus la refonte sera complexe et les risques de vous perdre en chemin élevés.

2. Construisez une nouvelle version intelligente de votre site

 

Vous avez finalisé l’étape du bilan : il est désormais temps de vous pencher sur la nouvelle version de votre site. Ici, l’essentiel n’est pas de tout casser pour tout refaire. Bâtissez intelligemment sur ce que vous avez appris et repartez sur des fondations saines.

1. S’appuyer sur les user stories et parcours utilisateurs 

Vous pouvez utiliser vos personas créés précédemment pour faire ce que les webdesigners appellent des “user stories” et “user journeys” (parcours utilisateurs). Une user story est une phrase résumant les grands buts et besoins de chacun de vos personas. Elle se présente très simplement sous cette forme:

“En tant que (persona), j’ai besoin de (besoin) afin de (but).”

En complétant cette phrase, vous aurez une meilleure vision sur la façon et l’angle avec lequel votre utilisateur abordera votre site. Un persona peut avoir plusieurs user stories, n’hésitez pas à en faire autant que nécessaire.

À partir de vos personas et user stories, vous pouvez également construire un parcours utilisateur. Cet outil visuel et narratif retrace le chemin parcouru par une personne sur votre site. Vous notez, à chaque étape de sa navigation, ce dont elle a besoin, ce qu’elle voit, ce qu’elle pense, ce qui l’irrite ou la dérange. Il est important que ce parcours soit le plus simple possible, que les différentes étapes ne rebutent pas la progression et que tout concorde pour arriver à votre but final. Par exemple sur un blog, il est malin de placer des bannières web en lien avec le sujet évoqué, renvoyant vers une landing page dédée au produit. Sur celle-ci pensez à intégrer des CTA bien visibles et aux wordings judicieux pour pousser à la commande.

Cet outil est d’autant plus puissant lorsqu’il n’est pas purement spéculatif : si vous le pouvez, synthétisez les résultats de vos entretiens et de vos travaux préparatoires sous ce format. L’important est de se mettre dans la peau de ses clients, sans oeillères : plus vous serez sincère, plus cette phase sera riche en enseignements.

Pour ces deux exercices, vous n’avez pas besoin de grand-chose : un mur vide, quelques post-its et un peu de temps vous permettront de tout mettre à plat. 

2. Déterminer le plan de votre site et son flow 

En ayant sous les yeux vos user stories et user journey, vous pouvez revoir le plan de votre site et son “flow” (quels écrans dirigent vers quels écrans). Là aussi, n’hésitez pas à être visuel. Imprimez vos écrans actuels, liez-les entre eux par des ficelles ou des traits, et faites un pas en arrière. Avec tout ce que vous avez appris, des modifications commencent déjà à émerger.

Gardez également en vue vos objectifs business, qui sont déterminants pour votre plan de site. Quelles sont les fonctionnalités ou les produits vers lesquels vous voulez diriger vos clients ?

Une fois la phase de discussion finie, n’hésitez pas à passer sur ordinateur pour concrétiser vos résultats. L’aide d’un UI Designer professionnel peut vous faire gagner un temps précieux. Il matérialise vos résultats et vos objectifs via des projections et émet des directives claires, qui pourront ensuite être appliqués par vos développeurs. Chaque plan de site a ses spécificités, mais vous pouvez vous appuyer sur les conventions en vigueur dans votre industrie, pour rassurer vos utilisateurs. Un site en e-commerce, par exemple, demande un certain set de pré-requis connus de l’utilisateur : pour booster vos chances de succès, ne passez pas à côté.  

3. Repenser le design graphique 

Nous vous recommandons vraiment de ne pas parler de design (couleurs, forme de boutons et animations) avant de vous être penchés sur les étapes précédentes. Vous verrez que tout ce travail de fond aidera grandement la forme : vous avez sans doute déjà une idée en tête à ce stade, et c’est tant mieux.

Il existe plusieurs règles tacites pour un webdesign efficace. Gardez cependant en tête que le plus important est ce que vous offrez à vos utilisateurs : un site au graphisme moyen mais très utile sera toujours préférable à un très beau site incompréhensible. Amazon, par exemple, et beaucoup de sites de e-commerce, ne se démarquent pas par leur design graphique incroyable mais bien par l’ensemble de fonctionnalités claires qu’ils proposent à leurs utilisateurs.

À l’inverse, un site web dans le luxe aura tout intérêt à miser sur un webdesign haut de gamme, pour renforcer son positionnement et séduire les visiteurs. Vous pouvez, avant de développer votre nouvelle version de site, travailler sur des écrans non fonctionnels avec votre UX/UI designer, et repasser par une salve de tests auprès de vos utilisateurs. Des retours sont toujours plus faciles à intégrer lorsque vous n’avez pas pas encore touché au code, et cette dernière vague de retours vous mettra en confiance. Pourquoi pas, même, proposer à certains de vos clients fidèles de devenir bêta testeurs ? Ceux-ci auront l’occasion de tester votre site web et ainsi de vous confier leurs premiers retours.

Envie de confier la refonte de votre site à un professionnel ? 

La refonte d’un site web est un vrai challenge, d’autant plus que vous rencontrez des contraintes en termes de budgets et délais. Travailler avec un UX/UI designer professionnel est un atout précieux dans ces moments clés pour votre entreprise. Grâce à CREADS, vous avez la certitude d’échanger avec les meilleurs profils créatifs et techniques, dès les premières phases de votre refonte web. Un chef de projet dédié vous conseille jusqu’au rendu final du projet et vous bénéficiez d’un outil de gestion de projets intuitif grâce à notre plateforme. Alors, prêts à insuffler de la nouveauté sur votre site web ?

Recevez nos conseils chaque mois en remplissant le
formulaire d’inscription à notre newsletter.

S'inscrire à notre newsletter

INSCRIVEZ-VOUS A NOTRE NEWSLETTER

Copyright CREADS 2008-2022