Projet pédagogique & marque réelle
formation bootcamp ux design - ux france
équipe : projet réalisé en équipe avec 3 autres ux designers
mission : conception UX d'une solution digitale
durée : 5 semaines
outils utilisés : figma, figjam, maze, zoom, notion
Le Réseau du Design Social Grand Est est un jeune réseau de designers bénévoles engagés dans le design social.
Besoin exprimé
Conception UX du futur site web du Réseau
Ses enjeux stratégiques
• Augmenter sa visibilité en ligne et celui du design social dans la région
• Permettre la mise en relation entre clients/partenaires et les designers
Contraintes
• Ils ont peu de temps et de ressources
• Réalisation du projet en 5 semaines
OBJECTIF DU PROJET
CONCEPTION UX DU SITE WEB
Enjeux stratégiques identifiés et objectifs utilisateurs (UX) :
• Sensibiliser le grand public au design social > identifier clairement les actions à résoudre
• Développer le réseau, valoriser les designers et renforcer leur engagement > adhérer au réseau et entrer en relation avec d’autres membres
• Développer des partenariats & attirer des soutiens financiers > percevoir la plateforme comme professionnelle et rassurante
• Créer un site accessible et éthique > utiliser une plateforme accessible et responsable
Le site web doit permettre de :
• Favoriser l’adhésion au réseau et les partenariats
• Promouvoir le design social
• Créer des synergies entre les designers
Nous avons réalisé 6 entretiens individuels qualitatifs d’une durée de 30 minutes en visioconférence, auprès d’adhérents et non-adhérents au Réseau.
Objectif de l’entretien
Comprendre leur profil & contexte ; leur rapport au design social, au réseau et à l’adhésion ; leurs frustrations, freins et incompréhensions ; leurs attentes vis-à-vis du projet ainsi que leur projection et vision idéale.
Résultat des entretiens
Suite aux entretiens, nous avons récupérer les verbatims des utilisateurs puis utilisé un diagramme d’affinité pour les trier et les regrouper afin de faire émerger des thématiques.
Cette analyse a permis d’identifier 7 thématiques :
• Partager les savoirs
• Créer des opportunités
• Transmettre le savoir
• Mettre en relation les designers
• S’appuyer sur nos valeurs
• Promouvoir le réseau et ses actions
• S’inscrire dans les réalités locales
À partir des 7 thématiques issues des entretiens, nous avons construit le persona Marie, designer en design social et adhérente au Réseau afin de formaliser ses freins, motivations et besoins.
Ses besoins
• Connecter les designers
• Transmettre le savoir
• Promouvoir le réseau et ses valeurs
• Partager les connaissances
• Créer des opportunités
Besoins identifiés comme critiques
• Créer des opportunités
• Connecter les designers
Afin de générer des idées de fonctionnalités et de contenus, nous avons organisé un atelier participatif d’une durée d’1 h avec 6 participants en visioconférence, avec des adhérents ou non adhérents connaissant le Réseau.
Objectifs de l’atelier
• Identifier, parmi les thématiques issues des entretiens utilisateurs, celles jugées prioritaires par les participants
• Faire émerger des idées de fonctionnalités et de contenus en réponse à ces attentes
Résultats de l’atelier
3 thématiques ont été jugées prioritaires par les participants :
• Transmettre le savoir
• S’inscrire dans les réalités locales
• Créer des opportunités
2 idées de fonctionnalités ou de contenus préférées par les participants :
• Consulter les informations de contact des personnes ayant contribué à un projet (fonctionnalité)
• Partager des appels d’offres ou des appels à manifestation d’intérêt liés au design social à l’échelle locale (contenu)
Après l’analyse, le tri et la priorisation des idées issues de l’atelier participatif, nous avons identifié les fonctionnalités et contenus jugés indispensables. Nous avons ensuite procédé à un vote au sein de l’équipe afin d’identifier ceux à retenir.
Fonctionnalités retenues pour la suite du projet
• Consulter des projets concrets réalisés sur le territoire
• Filtrer les projets par métier ou thématique (santé, éducation, inclusion sociale…)
Ces fonctionnalités ont été jugées prioritaires et cohérentes avec :
• Des objectifs du site (favoriser les partenariats, promouvoir le design social)
• La demande du Réseau
• Certains besoins du persona utilisateur Marie (promouvoir le Réseau et ses valeurs, partager les connaissances)
Une fois les fonctionnalités retenues, nous avons commencé à structurer le site web, à partir du persona utilisateur Marie
Scénario d’usage du persona utilisateur Marie
Nous avons défini un scénario d’usage afin de cadrer ce que le site doit permettre au persona utilisateur Marie : accéder simplement et rapidement à des exemples concrets de projets sur une thématique précise du design social et pouvoir les partager à ses clients afin d’illustrer des impacts réels proches de leurs problématiques
Arborescence du site web
À partir de son scénario d’usage, nous avons construit l’arborescence afin de hiérarchiser les pages et rendre le parcours cohérent avec son objectif
Parcours utilisateur du persona utilisateur de Marie
A partir de l’arborescence, nous avons défini son parcours utilisateur de la page d’accueil jusqu’à une fiche projet.
Ce parcours permet de visualiser les étapes, actions et conditions qu’elle peut réaliser pour atteindre son objectif formulé dans son scénario d’usage et, de vérifier que ce parcours est simple, fluide et sans blocage.
Organisation des pages du parcours utilisateur de Marie (zoning)
Nous avons traduit le parcours utilisateur de Marie et nos idées via un zoning pour organiser les contenus et fonctionnalités au sein des pages de son parcours afin de rendre l’information lisible
Arborescence du site web
Parcours utilisateur (user flow)
Zoning
Wireframes
A partir du zoning, nous avons réalisé des wireframes afin d’organiser précisément les contenus et les fonctionnalités des pages du parcours utilisateur de Marie :
• Page accueil
• Page design social
• Page projets
• Fiche projet
Prototype interactif
Nous avons rendu les wireframes cliquables afin de pouvoir les faire tester lors des tests d’utilisabilité.
Nous avons réalisé 4 tests d’utilisabilité afin d’évaluer le prototype interactif du parcours utilisateur de Marie auprès de 4 testeurs mixtes, dont les 2 commanditaires, âgés de 31 ans à 51 ans et de profession intermédiaires ou auto-entrepreneurs.
Protocole des tests d’utilisabilité synchrones & asynchrones
Objectif des tests : vérifier l’utilisabilité du parcours utilisateur de Marie, de la page d’accueil jusqu’à une fiche projet.
Leur mission correspondait au scénario d’usage du parcours utilisateur de Marie.
Analyse quantitative des résultats des tests d’utilisabilité synchrones
Le parcours utilisateur de Marie est globalement utilisable :
• Toutes les tâches ont été réalisées avec de bonnes notes globales, sans blocage total
• 2 tâches ont toutefois nécessité de l’aide : accéder à la page « projets », « trouver l’option de partage et partager le projet »
Analyse qualitative des résultats des tests d’utilisabilité synchrones
L’analyse qualitative des tests nous a permis d’identifier plusieurs problèmes :
• Des incompréhensions de contenus, des difficultés à identifier les éléments interactifs
• Une navigation peu claire
• Des filtres peu lisibles
• Un manque d’informations sur les fiches projets
Recommandations
Nous avons traduit les problèmes soulevés en recommandations concrètes :
• Les éléments interactifs
• Le contenu wording
• Les fonctionnalités filtres
• La navigation
• La mise en page
Analyse quantitative des tests d’utilisabilité synchrones
Suite aux tests utilisateurs, nous avons amélioré le wireframe de la page d’accueil du parcours utilisateur de Marie.
Nous avons appliqué une solution aux problèmes identifiés, que nous avons décidé de conserver, pour corriger les points de friction.
Itérations des wireframes de la page d’accueil (recommandation éléments interactifs)
Ce que l’on prévoit de faire
• Tester la page d’accueil intégrant les améliorations apportées suite aux tests d’utilisabilité
• Apporter les solutions aux wireframes des pages : Page Projets, Fiche Projet, Page Design social, Menu
Ce qui doit être amélioré (solutions aux problèmes identifiés et conservés pour l’itération)
• Fonctionnalités filtres – Page projets
Ajouter une fonctionnalité moteur de recherche sur le site pour faciliter l’accès aux contenus
Optimiser le système de filtre (métier, thématique) et créer des pages dédiées par tag + ajouter des #pour les tags
• Mise en page – Fiche projet
Catégoriser le projet : typologie du projet, accès aux designers du projet, structure
Mettre bouton « partage » + images designers en bas de la page « fiche produit »
• Mise en page – Page Design social
Ajouter des titres dans la page design social
• Contenu : wording – Menu
Modifier l’intitulé du mot réseau dans le menu par « designers »
Harmoniser les textes des boutons
• Vérifier si les wireframes sont bien tous adaptés aux différents handicaps (RGAA) : contrastes, navigation clavier, lecteurs d’écran, alternatives textuelles
