Manque de cohérence des libellés
Les noms des catégories et des libellés ne sont pas compris, ce qui nuit à la recherche et à la navigation.
KLAP
- 3 phases
- 6 mois
- 16 interviews
- Rôle
- Recherche UX, idéation, maquettage
- Équipe
- 3 étudiant·es de l’UTC
- Outils
- Figma, Claude Design
KLAP est la nouvelle marketplace des associations étudiantes de l’UTC (Université de Technologie de Compiègne). Avec deux camarades, nous avons proposé de refondre l’ancienne application en appliquant une démarche de design UX.
Contexte
Notre nouvelle plateforme allait remplacer une interface qui était en place depuis de nombreuses années. Les utilisateur·rices avaient déjà leurs habitudes. Il fallait donc penser cette conception dans une certaine continuité, tout en profitant de cette base pour repérer les points de friction de l’ancienne interface.
Recherche
Entretiens
Nos entretiens nous ont permis d’identifier une cinquantaine d’éléments générant des incompréhensions, des ralentissements ou encore des erreurs dans l’interface actuelle. Nous avons classifié ces éléments selon nos 4 personas.
12participant·es
6questionnaires
Grilles d’entretien
Liste
des enseignements
Principaux enseignements
Manque de cohérence des menus
Le site a deux menus de navigation, ce qui crée de la confusion chez les utilisateurs.
Parcours utilisateur complexes
L’accès aux données de trésorerie est mal placé dans le parcours, ce qui fait perdre du temps aux utilisateurs.
Personas
Idéation
À partir du classement des enseignements, nous avons imaginé des propositions de correction correspondantes. Cette phase est déterminante, car de nos discussions et débats a pu naître une représentation commune du projet. Il s’agira ensuite de tester les solutions sur le terrain.
Solutions
Manque de cohérence des libellés
Recommandation
Mettre en place un atelier d’idéation et des tests de 5 secondes.
Manque de cohérence des menus
Recommandation
Repenser la navigation autour d’un menu unique et de tableaux de bord.
Parcours utilisateur complexes
Recommandation
Créer un espace dédié aux trésoriers sous forme de tableau de bord.
Architecture d’information
L’architecture du site a été organisée selon nos 4 types d’utilisateurs. Il ne s’agit pas de créer 4 interfaces différentes, mais de penser 4 parcours différents sur une même interface.
Passer par des post-it nous a permis de noter rapidement les éléments et de les réarranger dans l’espace librement. C’est aussi plus convivial que chacun sur son ordinateur.
Zoning
C’est durant l’étape du zoning papier que certains choix clés de structuration de l’interface ont été pris : sur papier, chaque trait peut donner lieu à une discussion, et donc à un choix.
Comment permettre aux responsables des ventes de créer des catégories et d’y classer les produits ?
Nous avons choisi une interface à onglets et récapitulatif en bas de page. Les tests utilisateurs nous permettront d’évaluer si cette solution est efficace.
Comment donner un accès rapide aux informations clés et à l’historique des documents de trésorerie ?
Sur le tableau de bord, nous avons combiné des éléments graphiques, des informations jugées prioritaires, et des historiques des derniers documents, avec un lien vers l’ensemble des documents.
Prototypage
Prototype généré par IA
Nous avons décidé de faire réaliser la première version de notre maquette par un outil de design génératif à partir de l’ensemble de nos zonings. Ces prototypes interactifs nous ont permis de tester certaines idées rapidement avant de commencer le maquettage sur Figma.
Faute de temps, nous n’avons pas pu tester l’ensemble des écrans. Toutefois, les tests réalisés auprès des trésoriers ont montré que nos choix permettaient de corriger la complexité du parcours utilisateur de l’ancienne interface.
Prototypage Figma
Première itération
Il s’agit du premier écran que nous avons créé en reprenant nos zonings et en nous inspirant des prototypes générés par Claude Design.
Version finale
Voici l’écran final issu de notre processus itératif. Nous avons intégré une bannière illustrative, ajouté la possibilité d’aimer et de partager l’événement, et rendu le bouton panier sticky afin de le rendre accessible à tout moment.
Maquette
Et ensuite ?
La maquette est en cours de finalisation et les écrans destinés aux étudiants acheteurs ont été validés. Toutefois, une réorientation tardive du projet nous contraint à repenser entièrement l’arborescence du back-office. En raison du calendrier, nous n’aurons pas la possibilité de contribuer pleinement à cette nouvelle conception.
Si c’était à refaire, j’apporterais 2 améliorations
- Consacrer moins de temps aux premiers tests utilisateurs afin d’arriver plus rapidement aux premières maquettes et multiplier les itérations sur les écrans.
- Impliquer davantage les étudiants dans le processus créatif, afin de favoriser leur compréhension et leur adhésion aux choix de conception.
Me contacter
Ce projet vous parle ? Écrivez-moi, je serai ravi d’échanger sur ma démarche et sur vos besoins.