Devenir UI Designer avec Figma

Vous suivez un processus articulé en 7 étapes et outillé pour vous permettre d'appliquer la méthode agile sur un projet professionnel, personnel ou simulé. Des modules thématiques viennent compléter votre apprentissage par le faire sur des points méthodologiques précis.
Afin de vous aider à appliquer cette méthode agile dès aujourd'hui, cet apprentissage inclut 11 ateliers et points d'étape pour implémenter ce sprint dans votre organisation en mode sprint.

01 COMPRENDRE
Intégrer les livrables de l’équipe de delivery UX
Le Product Design lead ou le Designer UX présente aux Designers UI les livrables du UX Design sprint en précisant les business et design challenges. Cela est fait lors de l’atelier UX transmission. Vous interagissez collaborativement avec Figjam.

02 ANALYSER
Collecter et synthétiser les
besoins d’usabilité, d’accessibilité et d’éco-conception
Cet échange entre les UX et les UI designers est un point de départ. Si cela n’a pas été transmis, il s'agit de collecter maintenant les besoins liés au UI : l’accessibilité, l’usabilité, l’éco-conception. Cela se fait par des interviews de parties prenantes et un audit heuristique de l’existant.
Un atelier analyse permet de synthétiser toutes les informations collectées.

03 PREPARER
Créer ou mettre à jour le Design System
Vous prenez la décision de concevoir ou d’améliorer un Design System choisissant l’approche de l’Atomic Design pour garantir cohérence, évolutivité et adaptabilité.
Dans la continuité du cadrage fait précédemment, le processus continue avec un audit des éléments visuels et fonctionnels existants, visant à identifier les forces et les lacunes des ressources actuelles.

Créer les tokens et les composants
Les bases du design system s’appuient sur des tokens standardisées, qui couvrent les couleurs, typographies, tailles et espaces. Ces tokens sont essentiels pour établir des fondations solides permettant une personnalisation avancée grâce au theming. Ce dernier permet de répondre à des besoins spécifiques comme le multibrand ou le dark mode, tout en assurant une flexibilité pour différents contextes et identités visuelles.
La conception des interfaces s’appuie sur des principes modernes, tels que la conception responsive. L’utilisation d’Auto-layouts et des Constraints garantit que les interfaces s’adaptent de manière fluide aux différentes tailles d’écran et résolutions.


Créer un UI Kit
Ces composants modulaires sont ensuite regroupés dans un UI kit, une bibliothèque centralisée qui rassemble tous les éléments nécessaires pour concevoir et développer rapidement des interfaces. Une documentation détaillée accompagne ce kit, expliquant les règles d’utilisation, les bonnes pratiques et les cas d’usage pour chaque composant. Cette documentation est un pilier essentiel pour intégrer le design system dans le workflow des équipes, qu’elles soient de design ou de développement.

Définir la maintenance du Design System
Enfin, une stratégie de maintenance continue est mise en place pour garantir que le design system évolue avec les besoins des utilisateurs, les tendances du marché et les avancées technologiques. Cette approche assure une solution durable, efficace et toujours en phase avec les objectifs des projets.

04 CONCEVOIR
Analyser les wireframes
Vous commencez par une analyse approfondie des wireframes pour comprendre les besoins fonctionnels, les parcours utilisateurs et les points de contact critiques. Ces éléments servent de base pour intégrer l’accessibilité de manière proactive dans la structure, comme prévoir des espaces suffisants pour une navigation aisée ou des zones interactives adaptées à l’utilisation tactile.

Appliquer les tokens du Design System
Vous passez ensuite à l’application des tokens du design system, en respectant strictement les critères d’accessibilité. Par exemple, des couleurs conformes aux standards WCAG pour garantir un contraste optimal, des typographies lisibles même pour les utilisateurs malvoyants, et des espacements bien définis pour éviter les surcharges visuelles.

Vérifier l’accessibilité
Vous vérifiez l’accessibilité visuelle et fonctionnelle en permanence grâce à des plugins Figma, qui permettent de tester les contrastes, la hiérarchie et l’ordre des éléments pour une navigation inclusive.

Appliquer les principes d’écoconception
Parallèlement, vous appliquez les principes d’écoconception en limitant les contenus graphiques excessifs, en simplifiant les composants et en minimisant l’utilisation de ressources gourmandes.


05 TESTER
Préparer le test
Toutes les étapes précédentes ont comme but le test pour vérifier et améliorer la solution digitale conçue. Elle doit suffisamment répondre aux besoins des utilisateurs et des parties prenantes. La phase de préparation du test est donc essentielle pour être en capacité de vérifier l'adéquation entre le besoin et la solution.
* Définir les objectifs de test associés aux tâches des utilisateurs
* Choisir les méthodes de test les plus appropriées
* Choisir les participants et les modalités
* Développer les scénarios de test, les instructions et les critères de succès
* Créer la grille d'entretien
* Préparer le test en face-à-face et en distanciel avec Maze

Tester le MVP
Cette étape est souvent rapidement faite alors qu'elle est critique. Il vaut mieux parfois itérer pour mieux répondre aux besoins. L'équipe doit être en capacité de recommander la prochaine étape en toute objectivité.
* Mettre en œuvre les tests avec la bonne posture
* Analyser les résultats en termes de besoins de fonctionnalités, d'accessibilité et d'expérience
* Formuler des recommandations pour la prise de décision par la décisionnaire

06 ITERER
Restituer les résultats du sprint
Le MVP a été testé... L'enjeu est à présent de présenter à la décisionnaire et à d'autres parties prenantes internes concernées les éléments clés pour prendre une décision éclairée sur la suite: l'itération avec les ajustements nécessaires issus du feedback des tests ou le développement du MVP en partie ou en totalité. Cela se fait avec le canevas d'aide à la décision.

Itérer
Le MVP est itéré dans Figma avant la transmission à l’équipe de développement.
Transmettre à l'équipe de développement
L'atelier transmission des livrables permet de faire un pont entre l'équipe UX/UI, qui délivre un prototype haute fidélité validé, et l'équipe de développement qui va prendre la relève pour transformer le MVP en produit fini.

07 AMELIORER
Améliorer le Design System
À la fin du UI design sprint, vous intégrez les nouveaux composants créés pendant le sprint, en vérifiant leur cohérence avec les éléments déjà existants. Vous mettez à jour la documentation pour inclure les nouveaux composants, leurs variations et les bonnes pratiques d’utilisation, afin d’assurer une adoption fluide par les équipes.
Vous prenez en compte le feedback des utilisateurs, des développeurs et des parties prenantes pour identifier des améliorations, notamment en matière d’accessibilité et de performance. Le design system est testé pour garantir qu’il respecte les critères d’inclusivité, de réactivité et d’écoconception tout en restant flexible et évolutif pour s’adapter aux futurs besoins du projet.

Les e-learnings sont disponibles à des partenaires avec un contrat de partenariat via www.ProductDesignGuides.org 
Vous pouvez vous-même devenir partenaire.