Fin 2019, j’ai réalisé la maquette du site web de l’association Résonance. Retour sur ce projet orienté UX Design.
La maquette a été réalisée par Aphélie Srun et moi-même, et intégrée par Léna Clavier.
Contexte
Résonance est une association qui lutte contre les stéréotypes envers les personnes atteintes d’un handicap psychique. Sa conviction : « chaque être humain, même en situation de handicap, doit pouvoir accéder à un emploi et travailler en entreprise. »
Résonance a constaté que le taux d’emploi de personnes handicapées dans les entreprises privées et dans la fonction publique est bien trop faible, et même plus bas que ce qu’impose la loi.
Son objectif est donc d’informer sur les handicaps, afin d’enrayer les préjugés. Sa cible ? Les entreprises où travaillent des personnes en situation de handicap, et celles qui peinent à recruter.
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
1. Créer des personae
Avant toute chose, nous avons mené des interviews auprès de salariés de plusieurs entreprises pour valider nos hypothèses concernant l’intégration des personnes en situation de handicap psychique dans les entreprises. A partir de là, nous avons créé des personae représentant nos cibles.
2. Penser à la cinématique d’interaction
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
3. Définir une consumer journey
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
4. Faire le zoning et le wire framing
Une fois que l’on connaît bien sa cible, il est temps de passer à la conception de l’interface. Le zoning et le wire framing sont deux étapes très importantes pour commencer à la modéliser.
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
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
5. Créer la maquette
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
Pour visionner le résultat en ligne, cliquez sur l’image !
Pour toute demande ou question concernant le projet Résonance, contactez-moi !