Aujourd’hui, nous souhaitons partager avec vous notre méthodologie centrée utilisateur pour la conception de notre nouveau site. En effet, Ludotic a fait peau neuve en janvier grâce à une refonte en profondeur : design et contenu. Les objectifs pour nous étaient multiples : rationaliser le contenu, obtenir de meilleurs scores en SEO, en performance, etc.
Alors, est-ce qu’une démarche centrée utilisateur est possible sur un site WordPress ? Comment s’y prendre ? Quels pièges éviter ? Focus sur la conception du site de Ludotic.
Pour cela, nous sommes passés par 7 grandes étapes :
- Les prérequis
- Comprendre le contexte et les enjeux
- Améliorer l’expérience utilisateur
- Prioriser des fonctionnalités et choisir une solution technique
- Créer le contenu et le design
- Intégrer le contenu et le design
- Mettre en production et ajuster au fur et à mesure
1. Les prérequis
Afin que cette refonte soit un succès, nous l’avons traitée comme n’importe lequel de nos projets clients. Une équipe projet a donc été créée avec une UX Lead Virginie Hermand, une UX Researcher Tania Béguin, et un UX/UI Designer Alexandre Jalaguier.
Un comité de pilotage a également été formé pour arbitrer et apporter un avis plus large aux moments clés. Des objectifs clairs et précis ont été formulés. Enfin, du temps dédié a été dégagé pour que chaque membre de l’équipe puisse contribuer à ce projet.
Cette approche comme un véritable projet nous a permis de nous structurer et de nous organiser correctement. Le rôle de chacun a clairement été établi et ce, dès le début.
2. Comprendre le contexte et les enjeux
Nous avions un site existant, également sur WordPress qui présentait quelques problèmes de performance, d’ergonomie, de SEO, etc.
Nous avons donc commencé par faire un World Café. Le World Café est un type d’atelier sous forme de discussion libre, comme au café, sur plusieurs thématiques d’un sujet. On invite ainsi les participants à faire émerger des propositions en groupes de 4 ou 5 personnes autour d’une table puis à les faire changer de table (donc de thématique) régulièrement afin de venir compléter les idées des uns avec celles des autres.
Notre World Café s’est articulé autour de 3 axes : UX/UI, business et écoconception. L’écologie est un sujet qui nous tient à cœur. Nous souhaitons voir quels axes d’amélioration sont possibles et comment nous pourrions tendre vers un site plus écologique.
Ce World Café a duré une matinée. Chacun a pu donc participer par groupe aux 3 thématiques et ainsi chacun a pu apporter ses idées et son avis.
Ensuite, une série d’ateliers avec l’équipe commerciale a permis de mieux cerner les enjeux et le contexte : qui sont nos cibles, quelles sont leurs problématiques, leurs questions récurrentes, etc.
Cela nous a mené à la création de personas primaires et secondaires, regroupant un ensemble de besoins et d’attentes pour notre site.
3. Améliorer l’expérience utilisateur
De ces personas ont émergé des user stories, c’est-à-dire des fonctionnalités décrites du point de vue de l’utilisateur et qui lui permettent d’atteindre un objectif. Nous avons organisé des ateliers de design thinking avec différentes parties prenantes afin d’itérer sur les propositions.
Ces ateliers de design thinking ont 3 objectifs :
- Formuler les objectifs et les besoins des utilisateurs (client, prospect, etc).
- Décrire des fonctionnalités du point de vue de l’utilisateur pour répondre à ses besoins et attentes.
- Faciliter la collaboration entre toutes les parties prenantes.
De là, nous avons pu décliner 3 parcours utilisateurs. Ces parcours nous ont permis de visualiser la manière dont nos utilisateurs accèdent aux services et aux informations sur le site. Nous avons également repéré certains irritants à corriger avec le prochain site.
A la fin de ces ateliers de design thinking, nous avions spécifié de nombreuses fonctionnalités et un ensemble de besoins très clairs à couvrir grâce à une approche centrée utilisateur.
4. Prioriser des fonctionnalités et choisir une solution technique
Suite à ces premiers ateliers, nous avons listé les choix possibles et nous les avons confrontés aux enjeux établis précédemment. Grâce à des matrices de priorité, nous avons ainsi pu facilement et rapidement prioriser les user stories précédemment écrites ainsi que les objectifs business.
Ainsi, pour la sortie du site, nous avons privilégié les objectifs de SEO et de performance. Nous avons choisi de mettre l’accessibilité et l’écoconception au second plan, afin de respecter les délais et notre budget. En effet, une fois la refonte du contenu et du design réalisée et le site en ligne, nous pouvions tout à fait dans un second temps nous consacrer à ces questions.
Enfin, en nous basant sur nos objectifs et notre ambition, nous avons fait une sélection de solutions techniques (CMS – système de gestion de contenu, thèmes WordPress, etc) que nous avons comparé par rapport à une liste de critères (prix, fonctionnalités, performance, code…).
Pour des raisons de contraintes et d’historique, nous avons choisi de conserver WordPress pour le moment. Nous avons choisi le thème Generate Press, qui présente un code propre afin de mettre en avant la performance, et qui propose dans le même temps des éléments d’accessibilité déjà présents dans le thème de base.
L’objectif pour nous était de prendre le temps d’enquêter sur les différentes solutions et d’en choisir une qui soit pérenne et qui réponde à nos enjeux et attentes. Nous avons d’ailleurs décidé de partir d’abord sur une refonte complète du contenu et du design via un thème WordPress (qui est une solution connue de nos contributeurs). Dans 4 ans, nous pourrons étudier la possibilité de partir sur du headless (donc de nous concentrer pleinement sur les enjeux d’accessibilité et d’écoconception via un code propre et entièrement personnalisé).
5. Créer le contenu et le design
Nous nous sommes ensuite attelés à la création d’une arborescence de site. Pour cela, nous avons organisé un atelier de tri de cartes en conviant des personnes de différents services (commercial, dirigeant, UX Lead, etc). Nous avons dans un premier temps travaillé sur l’organisation des différents types de contenus du site, puis nous avons lors d’un autre atelier travaillé sur le wording des noms des catégories précédemment créées.
Après cela, nous avons utilisé Figma pour maquetter en basse et moyenne fidélité ce qui nous a permis de voir comment les futures pages seraient organisées, avec quel contenu, etc. Nous y avons intégré au fur et à mesure le contenu. Les textes ont été relus via ces pages dans Figma plusieurs fois et avec plusieurs personnes différentes.
Nous avons ensuite réalisé un brief créatif afin de déterminer quel type de design serait adapté, quels mots ou émotions devaient évoquer le nouveau site, quelles inspirations, etc. Ce brief nous a permis ensuite de créer 3 pistes graphiques, qui ont été présentées au comité de pilotage.
A la suite de 3 petits ateliers, une piste s’est dégagée. Nous avons pu valider la direction artistique du nouveau site et comment celle-ci allait se décliner.
6. Intégrer le contenu
Une fois le contenu et le design validés, nous avons pu commencer à mettre en place le nouveau WordPress. Grâce au thème choisi, nous avons pu reproduire à l’identique dans WordPress le design imaginé dans Figma. Nous avons intégré le nouveau contenu écrit dans Figma, puis l’ancien contenu en l’adaptant notamment pour obtenir un score SEO plus élevé.
Là aussi, nous avons organisé plusieurs ateliers de présentation et de validation au fur et à mesure. Nous avons également sollicité des collègues à des moments clés pour relire le contenu dans le site par exemple (vérifier les coquilles mais aussi les liens, le wording, etc).
7. Mettre en production et ajuster au fur et à mesure
Enfin, au mois de janvier, nous avons pu mettre en production ce nouveau site et vous le partager ! Evidemment, nous ajustons certaines choses au fur et à mesure, soit parce que le contenu évolue, soit parce que nous souhaitons l’améliorer.
Nous venons par exemple de commencer les audits en accessibilité. Nous espérons pouvoir prochainement corriger les problèmes les plus simples et planifier une correction pour les plus complexes.
Créer un site WordPress avec une démarche UX est donc possible !!
Avoir une approche centrée utilisateur est donc tout à fait possible même en utilisant un CMS comme WordPress. Le choix du thème reste fondamental et c’est sans doute le choix le plus important durant cette refonte. En choisissant Generate Press, nous avons pu avoir une base saine sur laquelle construire.
Enfin, collaborer étroitement avec l’équipe commerciale au tout début du projet nous a fortement aidé à comprendre qui sont nos utilisateurs et comment nous pouvons les aider au mieux grâce au site. Le fait de partager les attentes et enjeux du projet dès le début nous a également permis de facilement prioriser les différentes fonctionnalités et/ou choix tout au long du projet.
En impliquant des parties prenantes variées et ce tout au long du projet, nous avons également pu obtenir une large gamme de retours que nous avons pu prioriser. A ce jour, notre backlog est toujours rempli de petites actions. C’est sans doute ce qui fait toute la richesse du web : un projet n’est jamais totalement terminé !
Envie de voir comment nos équipes peuvent vous accompagner dans votre projet ? Découvrez nos services ou contactez-nous !
