Design System : création et évolution de Limonen
Audit, création et accompagnement sur les évolutions du Design System d'un SaaS.
Audit des couleurs
Benchmark des Design Systems de renoms
Structuration des évolutions
les composants sont tous accessibles AA
de composants détachés
Deux phases essentielles
Le projet à connu deux grandes phases :
La création du Design System
Comme parfois lors de la création d'un pôle Design, il a fallu structurer et outiller le Design. La création du Design System était un de ces points essentiels.
L'évolution du Design System
Quelques années après, l'équipe grossit… et la dette de design (dont on ne parle pas assez !) s'installe. Il est temps de faire évoluer le Design System pour répondre aux nouveaux besoins émergents, et continuer de créer un produit de qualité.
Phase 1
Création du Design System
Pour créer la première version de la plateforme du client, il y avait seulement des maquettes. Au début, c'est suffisant. Mais les mois passant, le besoin d'avoir une base solide et réutilisable pour maintenir la cohérence visuelle et faciliter la collaboration se fait sentir.
Ma mission est d'analyser les maquettes existantes pour en extraire les composants réutilisables, et de démarrer la documentation du Design System.
Analyse des maquettes et création du Design System
Etape 1
But
Déterminer les composants utilisés d'une maquette à l'autre
Vérifier les couleurs, espacements, arrondis, typographie pour déterminer les variables
Résultat
Liste des composants validés à créer
Création du Design System sur Figma
Rédaction de la documentation
Etape 2
But
Evangéliser les informations présentes dans le Design System
Définir le support de la documentation : ZeroHeight (outil dédié) ou Notion (accessible facilement à toute l'entreprise)
Résultat
Partage simple des informations principales de la Brand du Design System : les couleurs et typos, qui aident beaucoup les services de communication (marketing, service client…)
Des guides d'utilisation (do / don't) permettent de prendre en main facilement la base du Design System
Phase 2
Evolution du Design System
La connaissez-vous, cette sensation que "ça fait le taf, mais… c'est galère". Vous y êtes. C'est la dette design qui s'installe.
Deux ans après la création du Design System, elle est bien là. L’équipe Product Design est passée de deux à six personnes. Les composants ne répondent plus aux besoins des designers et manquent d'harmonie.
Résultat : on n'arrive plus à créer des maquettes réellement satisfaisantes.
C'est le moment de réduire la dette. Faire passer le Design System à un niveau supérieur.
Ma mission est d’auditer le Design System et planifier les évolutions nécessaires pour qu'il soit à jour avec l'évolution de l'entreprise.
Audit des couleurs
Etape 1
But
Une hypothèse relevée par les designers est que les composants sont difficiles à décliner car les couleurs ne sont pas harmonieuses entre elles.
Vérifier la base : les couleurs du Design System
Audit de Teinte, Saturation et Luminosité (TSL)
Pour comparer les couleurs entre elles, je les analyse avec un graphique de teinte, saturation et luminosité.
Résultat
Les couleurs "500" n’ont pas la même luminosité, ce qui explique des décalages entre les composants
Il n’y a quasiment que des couleurs très claires ou de luminosité 50%, il y a beaucoup de manque dnas le spectre de luminosité.
Benchmark d'autres Design Systems
Etape 2
But
J'ai confirmé qu'il y a des problèmes sur les couleurs du Design System. Je souhaite maintenant étudier d'autres Design System pour comprendre comment réajuster le tir.
Prendre exemple sur les grands noms : Atlassian, Decathlon…
Résultat
La numérotation des couleurs de Vitamin (le Design System de Décathlon) est liée à la luminosité de la déclinaison : leurs couleurs sont donc "naturellement" cohérentes les unes avec les autres.
Conception d'une nouvelle palette, avec une numérotation cohérente et l’ajout des couleurs manquantes.
Evolution du Design System
Etape 4
But
Réajuster les couleurs qui varient trop : le orange et le gris, pour garder une cohérence et reposer des bases.
Accompagnement du Design Ops sur les différents chantiers à mettre en oeuvre, pour créer le Design System V2.
Résultat
Priorisation des composants à retravailler
Atelier de co-création de nouvelles versions de composants avec les UX Designers, en vérifiant l’accessibilité
Organisation avec l’équipe Front End pour mettre à jour les couleurs, puis les nouveaux composants en production
Quelques points pratico-pratiques
Pour mieux imaginer comment se sont déroulées les deux phases du Design System, je vous ajoute des informations supplémentaires.
Outils utilisés
Figma, pour le Design System, l'analyse des maquettes et l'audit du Design System
Miro, pour le parcours utilisateurs, le Service Blueprint, et les personas
Zero Height et Notion, pour la documentation et pour le suivi de projet d'évolution
Collaboration
Equipe Product Design & Design Ops : Une fois l'audit terminé, nous avons travaillé main dans la main pour trouver de nouveaux composants fiables et cohérents.
La confiance des designers envers le Design System a fortement augmenté suite aux évolutions.
Echangeons sur votre projet
Vous avez un produit digital ou un Design System à créer ? Que ce soit pour une appli mobile, une plateforme SaaS ou un site, nous pouvons en discuter pour voir de quelle manière je peux vous accompagner. Il suffit de prendre rendez-vous ensemble en visio.