OBJECTIF
OBJECTIF
Permettre aux utilisateurs de connecter leurs applications à Yeap
Permettre aux utilisateurs de connecter leurs applications à Yeap
RECHERCHE
RECHERCHE
Se nourrir du contexte
Se nourrir du contexte
Avant de commencer un projet, j'effectue toujours une phase de veille sur le sujet.
Ici, j'ai cherché à m'inspirer de l'activation d'applications, que ce soit sur ClickUp ou Slack par exemple. J'ai observé une représentation sous forme de cards majoritairement, avec des informations plus ou moins spécifiques selon les cas.
Avant de commencer un projet, j'effectue toujours une phase de veille sur le sujet.
Ici, j'ai cherché à m'inspirer de l'activation d'applications, que ce soit sur ClickUp ou Slack par exemple. J'ai observé une représentation sous forme de cards majoritairement, avec des informations plus ou moins spécifiques selon les cas.
USER FLOWS
USER FLOWS
Mettre à plat les différents parcours utilisateurs
Mettre à plat les différents parcours utilisateurs
Pour commencer le projet, il faut identifier les différents parcours des utilisateurs.
Nous représentons ces derniers sous forme de User Flows, qui permettent de visualiser facilement les différentes pages et embranchements durant les interactions de l'utilisateur sur les différents parcours.
Pour ce projet, je me suis concentré sur 3 premiers parcours ; l'activation d'applications au niveau du compte client, l'activation d'applications au niveau du dossier et la désactivation d'applications au niveau du compte client.
Pour commencer le projet, il faut identifier les différents parcours des utilisateurs.
Nous représentons ces derniers sous forme de User Flows, qui permettent de visualiser facilement les différentes pages et embranchements durant les interactions de l'utilisateur sur les différents parcours.
Pour ce projet, je me suis concentré sur 3 premiers parcours ; l'activation d'applications au niveau du compte client, l'activation d'applications au niveau du dossier et la désactivation d'applications au niveau du compte client.
WIREFRAMES
WIREFRAMES
Mettre en forme ses idées
Mettre en forme ses idées
Une fois les parcours identifiés, la prochaine étape est de traduire ces derniers en écrans. Pour ça, on effectue des wireframes, le plus possible, en utilisant des ateliers, des Crazy 8, etc...
Pour ce projet, j'ai testé plusieurs versions et j'ai décidé de partir sur une liste de cards pour les applications avec un overlay latéral pour afficher le détail de l'application et permettre son activation.
Une fois les parcours identifiés, la prochaine étape est de traduire ces derniers en écrans. Pour ça, on effectue des wireframes, le plus possible, en utilisant des ateliers, des Crazy 8, etc...
Pour ce projet, j'ai testé plusieurs versions et j'ai décidé de partir sur une liste de cards pour les applications avec un overlay latéral pour afficher le détail de l'application et permettre son activation.
PROTOTYPING
PROTOTYPING
Donner vie aux interfaces
Donner vie aux interfaces
Après avoir identifié les interfaces les plus pertinentes à tester, j'ouvre Figma pour créer un prototype qui s'approche le plus possible de ce qui pourrait être développé.
Ce prototype sera ensuite utilisé pour conduire les tests.
Voici l'exemple du prototype d'activation d'un application au niveau du compte client :
Après avoir identifié les interfaces les plus pertinentes à tester, j'ouvre Figma pour créer un prototype qui s'approche le plus possible de ce qui pourrait être développé.
Ce prototype sera ensuite utilisé pour conduire les tests.
Voici l'exemple du prototype d'activation d'une application au niveau du compte client :
USER TESTS
USER TESTS
Proposer le projet aux utilisateurs
Proposer le projet aux utilisateurs
Après avoir réalisé un prototype interactif de nos différents parcours utilisateurs, il est temps de les tester. Pour cela, j'ai organisé 3 user tests de 45min avec 3 utilisateurs types différents.
L'objectif de cette phase est de confirmer ou non les hypothèses conçues lors des phase précédentes. Ici, on observe le comportement de l'utilisateur avec notre prototype pour identifier ce qui marche et les éventuels points de friction.
Après avoir réalisé un prototype interactif de nos différents parcours utilisateurs, il est temps de les tester. Pour cela, j'ai organisé 3 user tests de 45min avec 3 utilisateurs types différents.
L'objectif de cette phase est de confirmer ou non les hypothèses conçues lors des phases précédentes. Ici, on observe le comportement de l'utilisateur avec notre prototype pour identifier ce qui marche et les éventuels points de friction.
Afin de pouvoir prendre des notes en étant seul à animer les test, j'ai préparé un fichier en amont des tests avec des questions à poser le long des tests pour obtenir des feedbacks sur des questions que l'ont pouvait se poser avant de faire les tests. L'idée est d'avoir ici une vue d'ensemble détaillée de chaque test avec un code couleur pour identifier les éléments qui ont bien marché, les interrogations et les problèmes rencontrés.
Afin de pouvoir prendre des notes en étant seul à animer les test, j'ai préparé un fichier en amont des tests avec des questions à poser le long des tests pour obtenir des feedbacks sur des questions que l'ont pouvait se poser avant de faire les tests. L'idée est d'avoir ici une vue d'ensemble détaillée de chaque test avec un code couleur pour identifier les éléments qui ont bien marché, les interrogations et les problèmes rencontrés.
FEEDBACKS
FEEDBACKS
Grouper les retours utilisateurs
Grouper les retours utilisateurs
Une fois les user tests terminés, j'ai regroupé les feedbacks récurrents sur chaque parcours.
L'idée est ici d'avoir un aperçu plus visuel de chaque interface avec des codes couleurs représentant ce qui est intéressant de garder et ce qu'il faudrait modifier pour améliorer les interfaces.
Une fois les user tests terminés, j'ai regroupé les feedbacks récurrents sur chaque parcours.
L'idée est ici d'avoir un aperçu plus visuel de chaque interface avec des codes couleurs représentant ce qui est intéressant de garder et ce qu'il faudrait modifier pour améliorer les interfaces.
Itération
Itération
Faire évoluer le projet suite aux retours
Faire évoluer le projet suite aux retours
Suite à l'analyse des feedbacks, un nouveau cycle d'idéation et de création commence afin d'améliorer la fonctionnalité.
Voici quelques modifications que j'ai pu apporter aux interfaces suite aux user tests :
Suite à l'analyse des feedbacks, un nouveau cycle d'idéation et de création commence afin d'améliorer la fonctionnalité.
Voici quelques modifications que j'ai pu apporter aux interfaces suite aux user tests :
-> Modification de l’affichage des dossiers dans la modale
-> Modification de l’affichage des dossiers dans la modale
Afin d’afficher un plus grand nombre de dossiers et d’informations dans la modale, un tableau a été intégré permettant un affichage plus clair, plus détaillé et plus compacte.
Afin d’afficher un plus grand nombre de dossiers et d’informations dans la modale, un tableau a été intégré permettant un affichage plus clair, plus détaillé et plus compacte.
Avant
Avant
Avant
Avant
-> Modification de la card sur le dossier
-> Modification de la card sur le dossier
Afin de clarifier si l'application est disponible à l'activation, un badge a été ajouté.
Afin de clarifier si l'application est disponible à l'activation, un badge a été ajouté.
Avant
Avant
Avant
Avant
-> Modification de la card sur le compte client
-> Modification de la card sur le compte client
Pour permettre à l'utilisateur de savoir sur combien de dossier l'application est activée, ce nombre a été ajoutée dans le badge.
Pour permettre à l'utilisateur de savoir sur combien de dossier l'application est activée, ce nombre a été ajoutée dans le badge.
Avant
Avant
Avant
Avant
-> Modification de l'affichage de la suspension
-> Modification de l'affichage de la suspension
Pour ne pas frustrer l'utilisateur de ne pas savoir ce qui se cache derrière la fonctionnalité de suspension, les champs associés sont affichés par défaut en lecture seule.
Pour ne pas frustrer l'utilisateur de ne pas savoir ce qui se cache derrière la fonctionnalité de suspension, les champs associés sont affichés par défaut en lecture seule.
Avant
Avant
Avant
Avant
-> Modification des informations de l'overlay
-> Modification des informations de l'overlay
Le lien vers le site d'application a été retiré car il n'est pas jugé utile et attire l'attention inutilement. Le libellé du bouton et également passé de "Activer sur tous les dossiers" à "Générer les identifiants" pour assurer l'utilisateur des étapes en cours.
Le lien vers le site d'application a été retiré car il n'est pas jugé utile et attire l'attention inutilement. Le libellé du bouton et également passé de "Activer sur tous les dossiers" à "Générer les identifiants" pour assurer l'utilisateur des étapes en cours.
Avant
Avant
Avant
Avant
Conclusion
Conclusion
Un projet centré sur l’utilisateur
Un projet centré sur l’utilisateur
En seulement 2 semaines, j'ai pu passé par toutes les phases d'une approche design centrée sur l'utilisateur. Mener seul ce projet m'a aussi permis de me challenger sur mes compétences de designer.
En seulement 2 semaines, j'ai pu passé par toutes les phases d'une approche design centrée sur l'utilisateur. Mener seul ce projet m'a aussi permis de me challenger sur mes compétences de designer.
