Conception d'un design system
Un projet pour homogénéiser le design des espaces client de Yomoni et simplifier la mise en place de nouvelles fonctionnalités.
Mise en place d'une librairie Figma avec des tockens, des composants déclinables et des règles d'utilisation strictes.
Date
Octobre 2020
Role
Product designer
Project owner
Outils
Compétences
Analyse & reflexion produit
UI design
Prototypage
Design process
Documentation
Brief
Concevoir une librairie de tous les composants atomiques de l'espace client de Yomoni et de leurs variantes dans Figma, pour pouvoir créer des maquettes et des prototypes facilement.
Ă€ propos de Yomoni
Yomoni est une fintech qui rend la gestion d'épargne en ligne simple et transparente. Elle propose d'ouvrir différents produits d'investissement (Assurance-vie, Compte-titres, PEA, PER...) et de suivre leurs évolutions (performances, répartition, composition...) dans un espace client.
Cet espace en ligne évolue rapidement avec de nouvelles pages et fonctionnalités. Il était donc nécessaire de créer un design system pour pouvoir le maintenir et concevoir des maquettes homogènes.
Composition du design system
Le design system de Yomoni, c'est une styleguide, des composants atomiques (atomes, molécules, organismes et templates) et de la documentation pour simplifier son utilisation.
Zoom sur les composants
Figma permet de créer des composants et leurs variantes et de les regrouper dans une librairie utilisable dans plusieurs fichiers. Pour simplifier l'utilisation et organiser cette librairie, on l'a découpé selon la méthodologie Atomic Design en 4 groupes : Des atomes, des molécules, des organismes et des templates. Chaque groupe est décliné en 2 sous-catégories pour les tailles d'écran, 📱 mobile et 🖥️ ordinateur.
Chaque composant utilise la fonctionnalité d'auto-layout de Figma pour s'intégrer au mieux dans les prototypes. Tous les composants sont déclinés dans plusieurs variantes pour englober tous les cas possibles.
Quelques chiffres
Le design system de Yomoni, c'est plus de 250 composants uniques et 1500 variantes pour concevoir Ă l'infini des interfaces.
Utiliser le design system
En utilisant les composants et leurs règles d'utilisation, on peut créer des maquettes rapidement et les transformer en prototypes fonctionnels avant de les transmettre aux équipes de développeurs pour implémentation.
Il suffit donc de piocher dans la liste et d'insérer les composants atomiques dans les templates. Lorsqu'un composant est mis à jour dans le design system, les modifications sont déployés immédiatement dans tous les fichiers ou il est utilisé.
Pour finir
Un design system doit constamment évoluer, il reste donc de nombreux composants à ajouter, mais il permet déjà créer de décliner des maquettes et prototypes fonctionnels rapidement.
