En 2019, j’ai piloté la conception UX et la réalisation de la maquette du site web de l’association Résonance, un projet visant à transformer la perception du handicap psychique en entreprise.
Une collaboration fructueuse entre Aphélie Srun et moi-même pour le design UX, intégrée par Léna Clavier.
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 la collaboration
Mon rôle ? Faire des recherches UX et réaliser la maquette du site web de l’association Résonance.
Une maquette, qu’est-ce-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 approfondie, 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
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 optimisée 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 le persona en découvrant un produit, un service, une 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
La conception s’est déroulée 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 sous Balsamiq
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 avec Figma, 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.
Pour échanger sur ce projet, n’hésitez pas à me contacter.