Apprendre les bases pour mieux sauter

Résumé

FormaTech est une étude de cas fictive faite en groupe de 3 personnes aux profils variés dans le cadre de la formation UX/UI Design proposée par Docaposte Institute.

Rôle

UX/UI Designer de l’interface desktop

Durée du Projet

10 semaines (Mars 2024 – Juin 2024)

Outils utilisés

Figma, FigJam, Illustrator et Notion

Introduction

Méthodologie de conception

Nous avons construit notre projet selon les méthodologies de conception du Design Thinking.

Problème que l'on souhaite résoudre

Faciliter le lien entre un organisme de formation et des formateurs(trices) qualifiés dans le secteur informatique. La préoccupation majeure d’un organisme de formation est de recruter des formateurs(trices) qualifiés et fiables pour offrir des formations ; celle des formateurs(trices) est de trouver des missions de formations facilement et sans frais.

Créer un logiciel à destination d’un organisme de formation pour lui permettre de recruter et de gérer facilement et rapidement des formateurs(trices) indépendants ; une application mobile pour que les formateurs(trices) reçoivent gratuitement des offres de missions.

Étapes de développement du projet

Comprendre les besoins du client (l'organisme de formation) et des utilisateurs (les formateurs indépendants)

La phase initiale du projet s’est concentrée sur l’analyse des besoins, des frustrations et des attentes du client (l’organisme de formation) et des utilisateurs (les formateurs(trices) indépendants). L’étude du cahier des charges nous a permis d’avoir une première idée de l’ampleur du projet et d’établir nos premières interrogations. Les méthodes suivantes ont été utilisées pour cette phase.

Questionnaires

Nous avons sondé un panel de 25 personnes au total avec un questionnaire à destination des organismes de formation et un questionnaire à des formateurs(trices) indépendants. Nous avons reçu un total de 15 réponses qui nous ont confirmé plusieurs hypothèses :

Pour les organismes de formation :

Une proposition de templates pour la création de formation
Un système de comparaison entre les profils des formateurs(trices)
Pouvoir enregistrer ses formateurs(trices) préféré(e)s

Pour les formateurs(trices) :

L’inscription/la connexion par authentification Google est à faire apparaître sur la page de connexion
La vue par défaut du planning de formations doit être affiché par mois
Possibilité d’exporter les événements vers des calendriers Google et/ou autres calendriers externes
Le téléchargement du CV et des certifications dès la phase d’inscription possible
L’option “recevoir par email” pour les demandes de formations est à proposer

User flows (diagrammes)

L’utilisation des user flows a été extrêmement utile pour décortiquer les fonctionnalités les plus complexes du logiciel et de l’application. Nous avons visualisé plus clairement les différents états que peut prendre une formation et ce qui va impacter le changement de son statut, idem pour la demande de formation envoyée à des formateurs(trices).

Elaboration des fonctionnalités du logiciel et de l’application mobile

Grâce aux informations récoltés dans la phase précédente, nous avons pu clarifier le besoin de l’organisme de formation et celui des formateurs(trices) et établir la portée du projet. Nous nous sommes donc lancés dans la seconde phase du projet afin de déterminer les grandes fonctionnalités de nos interfaces.

User journeys

Avant l’ébauche des premières fonctionnalités, nous avions besoin de bien comprendre le parcours utilisateur, que ce soit du côté de l’organisme de formation mais aussi des formateurs(trices). Après avoir décomposé le parcours en plusieurs scénarios (exemple : “je rédige une formation et je l’enregistre en mode brouillon”), nous avons utilisé les user journeys pour déceler plus efficacement les points de frictions et les freins que pourraient rencontrer un utilisateur.

Il est fréquent que l’organisme de formation n’ait pas toutes les informations en amont lorsqu’il crée une formation ou qu’il souhaite envoyer une demande à un(e) formateur(trice). Il est donc indispensable qu’il puisse sauvegarder sa fiche et la retrouver facilement lorsqu’il voudra compléter les informations manquantes.

Il est ici question d’explorer la gestion des notifications diverses que le(la) formateur(trice) pourrait rencontrer. Nous avons donc pu travailler sur les priorisations de notifications selon éventuellement des codes couleurs ou des emojis.

Story mapping

Le story mapping a été clé pour identifier les grandes fonctionnalités (EPICS), le “minimum viable product” (MVP) et les opportunités d’évolution (V1) de nos interfaces. À noter que nous avons réalisé cet atelier avec l’ensemble des autres équipes formées pour être au clair sur nos objectifs et de ne pas faire “mauvaise route”.

Exploration

Cette phase a été le moment où nous avons commencé à brainstormer, expérimenter, esquisser et envisager différentes solutions pour répondre aux besoins et aux points de frustration utilisateurs. Nous sommes fréquemment revenus aux étapes précédentes pour s’assurer que nous respections bien le cahier des charges ainsi que le parcours utilisateur que nous avions établi. Nous avons pu également optimiser certains écrans grâce aux retours utilisateurs que nous avons eu au cours du projet, notamment lors du maquettage.

Brainstorming et sketch

Une technique que nous avons trouvée particulièrement utile pendant le brainstorming était le « Crazy 8« . Chaque membre d’équipe a une minute par écran (⏰ pas une de plus pas une de moins !) pour dessiner une idée sur une fonctionnalité particulière. Cela a été très efficace pour la créativité et nous a surtout aidés à sortir des sentiers battus. A la fin de l’atelier, nous avons mis en commun nos ébauches pour choisir les idées les plus intéressantes pour le projet.

Benchmark

Avant de me lancer dans les premières ébauches de l’interface, j’ai effectué une veille graphique afin d’analyser les tendances actuelles, de m’appuyer sur les bonnes pratiques, et de m’en inspirer.

Zoning

Le zoning a été une étape importante pour définir la structure de base de l’interface. Grâce à cette méthode, j’ai pu organiser grossièrement les emplacements de chaque élément afin de bien les avoir en tête avant la création des wireframes. Les scénarios que nous avions établis pour la création de chaque écran m’ont permis de penser concrètement à comment les utilisateurs allaient intéragir avec l’interface et ainsi éviter de foncer tête baissée dans la phase création.

Wireframes

Grâce au benchmark, je me suis souvent appuyée sur certains écrans qui me semblaient pertinents, notamment un formulaire à plusieurs étapes pour la fonctionnalité “Créer une formation” pour l’organisme de formation. Cependant, lors du test du wireframe, le retour utilisateur m’a démontré qu’un formulaire en plusieurs étapes aurait été trop fastidieux pour une personne qui crée et gère de nombreuses formations par jour. Lors du maquettage, j’ai donc mis de côté le formulaire en plusieurs étapes et ai donc choisi de le mettre sur une seule page afin que l’organisme puisse le remplir plus rapidement. Effectivement, un test utilisateur lors du maquettage m’a confirmé l’efficacité d’un formulaire sur une seule page.

Charte graphique

À l’approche de la fin de la phase des wireframes, nous avons commencé à travailler en équipe sur notre charte graphique plus particulièrement sur la conception d’un logo, d’une palette de couleurs, d’une typologie ainsi que le choix de notre bibliothèque d’icônes et d’illustrations. Nous avons rencontré beaucoup de difficultés lors de la création d’un logo. Aucun membre de mon équipe n’avait des compétences en design de logo. Heureusement, grâce aux précieux conseils d’une autre camarade directrice artistique, nous avons pu concevoir un logo à partir de nos idées. La conception du logo nous a fait perdre beaucoup de temps, nous nous sommes alors répartis le travail de la charte en 3, une personne a travaillé sur le logo, une personne de mon équipe s’est occupée de la typologie et des illustrations et quant à moi, je me suis concentrée sur la palette de couleurs ainsi que la bibliothèque d’icônes.

Pour la palette de couleurs, j’ai donc choisi des nuances de bleu afin de s’appuyer sur la psychologie des couleurs d’une part et favoriser des couleurs accessibles pour toutes et tous d’autre part. Le désir était ici de faire transparaître des interfaces à destination des professionnels, accessibles et fiables.

Maquettes et Prototypes

En nous appuyant sur les retours des tests utilisateurs des wireframes, nous avons donc entamé la conception de notre design system, des maquettes haute fidélité ainsi que de leur prototypage. Je suis fréquemment retournée sur les phases précédentes du projet notamment sur le cahier des charges ainsi que les user flows pour m’assurer que rien n’avait été oublié ou que la cohérence de l’expérience avait bien été maintenue. Je n’ai également pas hésité à faire de nouveaux benchmarks pour chaque écran pour m’inspirer des bonnes pratiques web lors de la conception de certaines fonctionnalités clés comme par exemple le catalogue des formateurs(trices).

Évolution de la conception

Afin d’illustrer au mieux l’évolution de conception de l’interface desktop, j’ai choisi la fonctionnalité “Catalogue de formateurs(trices)”. Je voulais ici donner la possibilité à l’organisme de formation de sélectionner plusieurs profils de formateurs(trices) à la fois. En effet, après les retours de test utilisateurs sur cette fonctionnalité, la sélection multiple avec la galerie n’était pas évidente pour les testeurs. Grâce au benchmark et à mon expérience personnelle d’utilisateur, j’ai donc trouvé plus intuitif de proposer une liste plutôt qu’une galerie de profils pour suggérer la sélection multiple. A l’avenir, il serait peut-être intéressant d’offrir à l’organisme de formation le choix sur l’affichage qu’il préfère pour visualiser les formateurs(trices) (sous forme de galerie, liste, etc.).

Prototypes

Le prototypage des maquettes a été une phase assez longue où il a fallu faire preuve de beaucoup rigueur pour ne rien oublier sur le parcours utilisateur. Il m’est souvent arrivé de revenir sur les maquettes, de créer davantage d’écrans, de components pour m’assurer de la fluidité de l’expérience utilisateur. Dans cette étape, les variables de Figma m’ont également aidée à réduire le nombre d’écrans à créer et à illustrer le parcours que peut prendre l’utilisateur. On peut voir ci-dessous, un exemple de prototype pour le scénario “Je crée une formation et je recherche un(e) formateur(trice) pour l’animer” via le prisme de l’organisme de formation.

Lors du prototypage des maquettes, j’ai commencé à créer de nombreuses variables et notamment celle pour le dark mode. Malheureusement, il aurait fallu créer en amont l’intégralité des styles en Local Variables et non en Local Styles comme il a été fait tout au long du projet pour s’assurer de la cohérence des couleurs lors du changement. Le passage du light mode au dark mode a donc été abandonné et j’ai préféré me concentrer sur des éléments du projet plus pertinents. À noter qu’il serait plus judicieux à l’avenir d’utiliser uniquement des Local Variables pour un design system et de penser le dark mode en amont.

Tests

Nous avons effectué des tests tout au long de notre projet notamment pour tester nos wireframes avant de nous lancer dans la conception des maquettes et des prototypes. Cependant, il nous a manqué du temps à la fin du projet avant sa présentation devant un jury pour organiser des tests utilisateurs et récolter leurs retours afin de peaufiner nos prototypes.

Retour clients et utilisateurs

Ce qui n’a pas marché

La première palette de couleurs trop fades et peu accessibles
Les profils formateurs(trices) en mode galerie pour la sélection multiple
Un formulaire de création de formation en plusieurs étapes
L’accessibilité des boutons désactivés

Ce qui a marché

La création d’une formation en une seule étape
L’accessibilité des couleurs et des champs textes

Ce que j'ai appris grâce au projet

La recherche utilisateur ainsi que les tests tout au long du projet sont essentiels pour assurer une interface pertinente, intuitive et accessible. Dans ce projet, l’insight utilisateur m’a beaucoup manqué notamment pour confirmer les directions pour l’UI que je prenais.

Rester simple dans sa charte graphique et surtout dans son choix de couleurs pour l’interface ! Être au clair sur une seule couleur d’interaction, avoir une règle de couleur pour les contours, les ombrages et les backgrounds permet de gagner en efficacité lors du projet mais aussi de s’assurer une cohérence graphique. Pendant le projet, il m’est souvent arrivé d’être confuse au niveau des couleurs et de ne plus me souvenir des directions artistiques que j’avais prises pour le design des components et de l’interface desktop.

Investir du temps et l’organiser pour faire du benchmark sur chaque élément et sur chaque écran avant de dessiner les wireframes.

Se mettre d’accord sur une nomenclature en amont du projet et s’y tenir. À la fin du projet, je ne m’y retrouvais pas bien plus particulièrement quand j’ai commencé à mettre en place des variables. Avec l’expérience, il sera beaucoup plus facile d’organiser son design system.

Ce qui pourrait évoluer dans le futur

Une proposition de templates pour la création de formation
Un système de comparaison entre les profils des formateurs(trices)
Pouvoir enregistrer ses formateurs(trices) préféré(e)s