Lizee · 2021–2022
Design system pour une webapp responsive
Design System Figma pour la webapp de logistique circulaire de Lizee : typographie, couleurs et composants à instance-swap pour unifier et accélérer la production de maquettes HiFi.
Le contexte
En 2021, Lizee n’a pas de ressources internes pour concevoir les interfaces de son logiciel de logistique circulaire en entrepôt. Les premières maquettes sont conçues et développées sur le framework en place, Material UI. Face à la demande croissante de fonctionnalités et à un vrai besoin d’ergonomie, Lizee décide de revoir l’ergonomie globale dans une V2, dont les premières maquettes HiFi sont livrées par un prestataire externe.
Les écrans se multipliant, construire un Design System devient urgent pour garantir la maintenance et l’unité de la production de maquettes.
Typographie
Hanken Grotesk, issue du logo, est la police principale : ses graisses couvrent aussi bien les boutons que les corps de texte. Oswald distingue les données chiffrées (dates, statistiques). Pour ne pas pénaliser la performance web, seuls ses chiffres sont chargés, ce qui allège nettement le fichier.
Couleurs
Le bleu nuit de marque est la couleur primaire, un vert clair la secondaire. Les couleurs sémantiques gèrent les différents états, toutes déclinées d’une teinte claire à sombre (50 à 900). Les contrastes respectent au minimum WCAG 2.0 AA.
Composants
Certains composants (modales, sheets, boxes) exploitent l’instance swap : les instances ne sont jamais détachées, ce qui garde une cohérence de style à chaque mise à jour du Design System.
Impact
Depuis 2022, le Design System évolue en continu ; il a même absorbé un changement de branding sans accroc. Toutes les maquettes reposent sur une même librairie Figma, et les nouvelles features sur la même base de composants, produites bien plus vite. En chiffres : 3 semaines en moyenne pour les maquettes HiFi d’une fonctionnalité, 18 fonctionnalités bâties sur le Design System, 2 produits (SaaS B2B et app interne) qui s’appuient dessus, et un gain de productivité de ~200 % (temps de production divisé par deux).