Design System pour une webapp responsive
Contexte
En 2021, Lizee ne dispose pas de ressources en interne pour concevoir les interfaces du logiciel dédié à la logistique circulaire en entrepôt. Les premières maquettes ont été désignées et développées sur la base du framework front-end en place: Material UI.
Face à la demande croissante de fonctionnalités et au besoin en termes d’ergonomie et d’expérience utilisateur. Lizee prend la décision de revoir l’ergonomie globale de l’app dans une V2. Les premières maquettes HiFi sont livrées par un prestataire externe.
Les écrans se multipliant, il devenait urgent de construire un Design System pour garantir une maintenance et une unité dans la production de maquettes HiFi.
Aperçu
Typographie
La typographie Hanken Grotesk issue du logo est la police principale. Ses différentes graisses permettent de l’exploiter à la fois sur des boutons que sur des corps de textes.
Oswald est utilisé pour distingué les données chiffres (dates, statistiques etc.)
Afin de ne pas être pénalisé en performance web, seul les chiffres de la police sont chargés. Le fichier a téléchargé est beaucoup plus léger
Couleurs
La couleur de marque bleu nuit primaire est utilisée principalement. Une seconde, vert léger, en tant que couleur secondaire.
Les couleurs sémantiques sont incluses pour gérer les différents états.
Toutes sont déclinées d’une teinte plus lumineuse à plus sombre (50 à 900)
Le contraste des couleurs respecte au minimum WCAG 2.0 AA
Composants
Certains composants comme les Modales, Sheets, ou Boxes profitent des propriétés Instance swap ce qui permet de ne pas détacher les instances et de toujours garder une consistance dans le style lors des mise à jour du Design System.
Résultat
Depuis 2022, le Design System évolue de jours en jours. Il a même été actualisé suite à un changement de branding, sans aucun accroc.
Après plusieurs mois d’ajustements, les premières maquettes reposent toutes sur une librairie Figma. Les nouvelles features reposent sur la même base de composants. Les nouvelles fonctionnalités sont produites beaucoup plus rapidement
Chiffres clés
3 Semaines
Temps moyen pour réaliser les maquettes HiFi d’une fonctionnalités
18 Fonctionnalités
Reposant sur le Design System
1 Mise à jour
Du design system suite à un changement d’identité visuelle.
2 Produits
Produits reposant directement sur le Design System (SaaS B2B, App Interne)
200% En gain de productivité.
Temps de production divisé par deux pour livrer des maquettes HiFi après avoir mis en place le Design System.