En 2018, j’étais en Bachelor avec une option en UX Design. À cette période, j’ai participé à un projet de conception UX et j’ai réalisé la maquette du site web de Résonance, un projet visant à transformer la perception du handicap psychique en entreprise. J’ai travaillé avec Aphélie Srun pour le design UX, et notre maquette a été intégrée par Léna Clavier. Je vous explique ici comment on a travaillé, et comment faire pour créer la maquette de votre site web.
Contexte
Résonance est une association qui œuvre pour briser les préjugés concernant le handicap psychique en milieu professionnel. Sa vision est claire : permettre à chaque individu, quelle que soit sa situation de handicap, d’accéder à l’emploi et de s’épanouir en entreprise.
Face au constat alarmant d’un taux d’emploi des personnes handicapées largement inférieur aux obligations légales, tant dans le privé que dans le public, Résonance agit pour le changement.
L’association cible particulièrement les entreprises employant ou souhaitant employer des personnes en situation de handicap, avec pour mission de déconstruire les idées reçues et faciliter l’inclusion professionnelle.
Objectif de ce projet de maquette de site web
Mon rôle ? Faire des recherches UX et réaliser la maquette du site web de l’association Résonance.
Une maquette de site web, qu’est-ce-que c’est ?
Une maquette, ou mockup en anglais, est une représentation visuelle d’un site, qui devra ensuite être développée. Concevoir une maquette permet de réfléchir aux aspects graphiques d’un site web avant de se lancer dans le développement.
Méthodologie appliquée
Phase 1 : Immersion et recherche utilisateur
Notre démarche a débuté par une phase d’immersion comprenant :
- Des entretiens qualitatifs avec des collaborateurs d’entreprises diverses
- L’analyse des freins et motivations à l’emploi de personnes en situation de handicap
- La création de personas détaillés représentant nos différentes cibles
C’est une phase très importante avant de vous jeter aveuglément dans la création de la maquette de votre site web. Elle permet de réellement comprendre votre cible, ses attentes et ses freins.
Phase 2 : Stratégie d’expérience utilisateur
Nous avons développé une stratégie UX complète en réfléchissant tout d’abord à une cinématique d’interaction pour guider les utilisateurs. La cinématique d’interaction est ce que vous souhaitez que votre cible fasse en découvrant votre produit / service / organisation. Voici celle de Résonance :
Exemple de cinématique d’interaction
Ensuite, nous avons défini un parcours utilisateur (consumer journey) détaillé, prenant en compte les aspects émotionnels et pratiques.
La consumer journey permet d’identifier les différentes étapes par lesquelles vont passer votre persona en découvrant votre produit, votre service, votre campagne… Il s’agit plus ou moins de la même chose que la cinématique d’interaction, mais avec bien plus de détails : les actions de l’utilisateur·trice, les médias utilisés, les pensées, les émotions… Dans le cas de Résonance, nous avons imaginé le cas de Sandrine, chargée de recrutement dans une entreprise, qui découvrirait les actions de Résonance. Voici sa consumer journey :
Exemple de Consumer Journey pour l’association Résonance
Phase 3 : Conception itérative de la maquette du site web
Une conception de maquette se déroule en plusieurs étapes :
- Création de zonings pour définir les zones fonctionnelles principales
Le zoning est en quelque sorte le brouillon de l’interface, qui peut d’ailleurs se faire au crayon sur une feuille blanche. Il permet de définir les différentes zones du site web. Voilà le zoning réalisé pour Résonance :
Zoning du site de Résonance
- Développement de wireframes détaillés
Le wireframe est plus détaillé. Bien qu’il puisse également être dessiné sur une feuille de papier, il peut être en général intéressant de commencer à le modéliser via un outil comme Balsamiq.
Wireframe du site de Résonance
- Réalisation de la maquette finale intégrant la charte graphique complète
La maquette représente l’interface avec une grande fidélité. Les textes sont présents, ainsi que tous les éléments de la charte graphique. C’est ce document que vont utiliser les développeurs pour faire l’intégration au site web. On peut utiliser des logiciels comme Sketch ou Figma pour cette étape.
Résultats obtenus
Découvrez le résultat de ce projet en visitant le site web de Résonance.
>> Besoin de réaliser la maquette de votre site web ? Contactez-moi !