retour

École Directe

Se familiariser avec les outils et méthodes du Design Thinking

visuel représentant un « user journey map » composés de post-it de couleur
visuel représentant un tri de cartes avec les différents groupes de contenu
visuel représentant un « user story »
visuel représentant une partie d'un wireframe version mobile
1 /

client : Projet de formation USABILIS

année : 2023

catégorie•s : ux design • ui design

Journey Map
wireframe
Audit ergonomique
Tri de cartes

Contexte :

En tant que parent d’élève et utilisateur de la plateforme École Directe, J’ai choisi lors de la formation de travailler sur cette plateforme qui génère chez moi une importante frustration quant à mes besoins basiques.
 En effet, l’architecture de l’information et les actions pour réaliser une tâche se révèlent laborieuses (chez moi) avec des points irritants.

Missions :
• UX : audit ergonomique, inventaire et tri de cartes, user journey, flowchart, wireframes

Environnement technique, outils :
• Figma
Consulter le wireframe

Description détaillée de l’image

Ce visuel représente un « user journey map » ou « Parcours utilisateur » reprenant toutes les grandes étapes pour qu'un utilisateur atteigne son objectif. On y ajoute les pensées, ressentis et émotions qui jalonnent chacune des étapes. Il s'agit comme très souvent dans l'UX d'essayer de se mettre à la place de l'utilisateur qui doit accomplir une tâche.

Il est composé de 6 rangées :
  • 1. Contexte : On part d'un persona, d'un user story ou scénario (En tant que…, je souhaite que…, pour… et les attentes de l'utilisateur.
  • 2. Phases : Toutes les phases génériques (par exemple, «se connecter », « Trouver le document », etc.) que l'utilisateur doit traverser pour accomplir sa tâche
  • 3. Étapes : Le détail des actions que l'utilisateur doit accomplir pour passer à la phase suivante. Par exemple pour la phase « Se connecter », l'utilisateur doit trouver ses identifiants personnels, Se rendre sur la page de connexion, Entrer ses identifiants, etc.
  • 4. Pensées et ressentis : Lister les émotions qui traversent l'utilisateur pendant une phase donnée. Par exemple, « je suis encore dans les délais pour renvoyer mon document (émotion +)», « J'espère ne pas avoir à renouveller/me tromper de mot de passe car de mémoire le processus de récupération est complexe et long » (émotion -)
  • 5. Points irritants/frustration : Par exemple, la zone de saisie du mot de passe ne comporte pas une fonctionnalité pour afficher le mot de passe tapé.
  • 6. Points d'amélioration ou opportunités de design : Par exemple pour la zone de saisie du mot de passe afficher un libellé « afficher ou masquer » en fin de zone de saisie.

Ce visuel reprend donc les grandes étapes vues précédemment. Il s'agit d'un parent d'élève assez rigoureux qui doit remplir et signer un dossier d'inscription pour l'année scolaire à venir et s'assurer que son enfant sera bien inscrit dans l'école de son choix.

Description détaillée de l’image
Description détaillée de l’image
Description détaillée de l’image