Design
Makes Sense
Personae
Design System
Wireframe intéractif
Entretiens et tests utilisateurs
Entreprise : Association Design Makes Sense
Challenge : Repenser le site pour attirer de nouveau profils dans l’asso
Solutions et support et créés : Utilisation de la méthode de design UX pour proposer une première itération
📝 Planification
>> Pitch de l’association sur ses besoins et remise en contexte.
>> Détermination des enjeux et besoins en fonctions de ces informations et des recherches préliminaires sur l’association et son site (méthode CQQCOQP)
>> Définition de la problématique pour garder ces enjeux en fil rouge tout au long du projet (méthode des 5 pourquoi)
“Comment permettre à l’association Design Makes Sense de promouvoir ses actions et de créer des synergies avec des profils extérieurs au design mais partageant leurs valeurs éthiques ?”
>> Délimitation des cibles dans l’audience du site : deux profils ressortent
>> Création de deux personae hypothétiques élaborés pour enrichir ces cibles (méthode UX card)
Validation par l’association de notre cadre et premières pistes
🔎 Exploration
Nous avons maintenant validé le cadre de notre projet ainsi que ces intentions, nous devons maintenant confronter nos hypothèses au réel.
>> Réalisation d’un guide d’entretien en question ouvertes (méthode de Mind Map)
>> Entretien utilisateur un par un en visio
>> Récupération des transcriptions et notes en verbatimes
>> Tri de ses verbatimes en diagramme d’affinité, en diagramme de frein/motivation et en échelle de répartition
Les résultats font ressortir plusieurs grands thèmes qui viennent enrichir notre recherche préalable pour répondre au besoin de nos utilisateur et appuient nos choix de proto personae.
>> Création des personae définitives pour cette itération
>> Mise en situation du persona primaire en parcours utilisateurs (Experience Map) pour définir les moment de frictions et commencer à penser à des hypothèse de solutions
💡Atelier d’idéation
Pour trouver un maximum de solutions aux problèmes découverts précédemment, nous organisons deux ateliers d’idéations, un en groupe de recherche et l’autre plus conséquent avec un échantillon d’utilisateurs.
>> Atelier Mind Map + Gommettocratie en groupe d’UX designers
>> Définition d’un user scénario pour remettre la problématique dans le contexte de l’usage de notre interface par le persona défini plus tôt
>> Création d’un guide d’atelier enrichi par une Mind Map pour définir la méthode utilisée ainsi que cadre temporel.
>> Utilisation du guide et du user scénario pour animer l’atelier d’idéation avec les utilisateurs (Icebreaker + BrainWritting + Gommettocratie)
>> Récupération des verbatimes choisies en intelligence collective en fin d’atelier pour les trier selon leur pertinence pour notre projet (méthode de matrice impacts/efforts)
🛠️ Prototypage
En se basant sur les données recueillies et triées jusqu’à présent nous pouvons commencer à réfléchir à un prototype
>> Création d’un user flow visualisant le cheminement de notre persona principale à travers les pages répondant à ses besoins pour arriver à notre problématique : adhérer ou contacter l’association (outil …….)
>> Définition d’un zoning pour estimer les zones d’impact lors de ce parcours sur notre interface (outils Excalidraw)
>> Création d’un premier wireframe basse définition pour placer tous les éléments sans chercher à avoir une forme aboutie mais plus pour ne rien oublier (outil Excalidraw)
>> Création d’un second wireframe plus abouti dans sa structure pour être interactif et testable. par des utilisateurs (outil Figma en Design system - utilisation de design token et d’atomic design)
✅ Test utilisateur
On repart en phase de test afin de vérifier que notre interface correspond vraiment aux besoins que nous avons relevés. Cette phase sera décomposé en deux moments avec des utilisateurs différents.
>> Protocole des tests avec définitions du parcours suivant le wireframe, des missions et des questions complémentaires
>> Test synchrone en visio un par un (récupération de verbatimes et d’observations)
>> Test asynchrone via l’outil Maze (récupération de données d’observations chiffrées et que quelques verbatimes)
>> Tri de ces informations en tableaux de données et préconisations via un tableau en méthode Moscow (basées sur les réussites ou non des missions de parcourt demandées et des blocages récurrents)
🔄 Recommandations
& Itérations
 partir des résultats observés sur nos utilisateurs lors des tests nous mettons en avant des choses à changer absolument pour répondre à notre problématique ainsi que des éléments qui, bien que secondaires, seraient une amélioration bienvenue pour la prochaine itération.
Les corrections apportés sont enrichies par un benchmarks de bonnes pratiques observées sur des sites ayant des enjeux en communs avec notre projet.
⏩ Et après ?
Le cadre de se projet ne nous permettait de ne produire qu’une première itération mais il serait intéressant de tester les améliorations apportées et/ou de repartir en phase d’idéation afin de tester d’autres points clefs du site afin d’avoir un produit fini le plus adapté possible à ses utilisateurs.
Reco formulation - se rapprocher d’un copywriter afin d’améliorer les titres, CTA et textes du site dans leur ensemble.
Reco accessibilité - se rapprocher d’un expert en inclusion numérique pour par exemple :
nous aider dans la mise en place des norme RGAA
ajouter des descriptions alternatives à chaque image
avoir une version “focus” des boutons pour les lecteurs d’écran
Reco éco-conception - se rapprocher d’un expert en éco-conception numérique pour par exemple :
optimiser les médias et utiliser des vidéos déjà hébergées en ligne
réfléchir en développement à un codage moins énergivore (exemple designers éthiques https://designersethiques.org/fr)