Case Studies
Meeko
Meeko est une plateforme SaaS destinée aux professionnels de la petite enfance, réunissant de nombreux usages métier : gestion des enfants et des familles, planning, pointage, transmissions, facturation, contrats, RH et statistiques.
EdTech
Petite Enfance
B2B2C
Design System
SaaS
Formalisation d’un langage UI commun à l’ensemble du produit
Structuration des fondations : couleurs, typographies, espacements, rayons et ombres
Création d’une bibliothèque de composants et de leurs différents états
Traduction des usages métier complexes en patterns réutilisables
Mise en cohérence des interfaces de gestion, planning, facturation et suivi
Le kit est organisé en 14 ensembles de fondations, composants et patterns métier.
Réduire la dette UI pour mieux faire évoluer le produit & rationaliser une interface devenue trop fragmentée
Les logiciels métier évoluent rapidement et accumulent naturellement de nombreux composants, variantes et cas d’usage.
Mon plus gros design system étant sous NDA, je vous présente ma méthodologie dans le cadre d’un projet personnel orienté Design System, j’ai utilisé l’écosystème Meeko comme terrain d’étude afin d’explorer comment rationaliser une interface métier dense et la transformer en système cohérent, documenté et scalable.
Mon objectif était de partir de l’interface existante et de construire une base plus systémique permettant de :
renforcer la cohérence visuelle ;
réduire les variations inutiles ;
clarifier les règles d’utilisation des composants ;
faciliter la création de nouveaux écrans ;
construire un langage commun entre design et développement.
Discovery - Auditing the existing UI
L'intervention commence par réaliser un audit visuel des interfaces accessibles du produit (Desktop + Mobile).
J’ai recensé les éléments récurrents et leurs variations : navigation, boutons, formulaires, cartes, tableaux, statuts, alertes et patterns propres aux usages métier.
Cette phase d’inventaire m’a permis de distinguer trois niveaux :
Foundations
Couleurs, typographies, espacements, rayons, ombres et iconographie.
Components
Buttons, inputs, toggles, checkboxes, badges, chips, cards, tables, alerts et modals.
Product patterns
Navigation applicative, dashboards KPI et planning.
L’objectif n’était pas simplement de reproduire les écrans existants, mais d’identifier les règles communes derrière ces interfaces.
Rationalisation & Foundation
J’ai rationalisé les fondations du système pour réduire les variations et clarifier les règles de conception : palette principale et couleurs sémantiques, hiérarchie typographique, échelle d’espacement, radius et états de composants.
Le système s’appuie sur le Meeko Blue #2D64F0, complété par des accents Coral et Teal, avec Plus Jakarta Sans pour la hiérarchie et Figtree pour les contenus.
Une grille d’espacement de 4 à 64 px permet de garantir une cohérence visuelle et structurelle à l’échelle du produit.
Des composants aux patterns métier
À partir des fondations, j’ai structuré une bibliothèque de composants réutilisables - formulaires, boutons, statuts, cartes, tableaux, alertes et modales - puis décliné ces éléments dans des patterns métier clés comme la navigation, les KPI du dashboard et le planning.
L’objectif : réduire les variations inutiles et construire une interface plus cohérente, lisible et scalable.
AI-assisted workflow
Ce projet m’a permis d’aborder le Design System non comme une simple bibliothèque UI, mais comme une démarche de rationalisation du produit :
Audit → Inventory → Foundations → Components → Patterns → Documentation
Le résultat est un UI Kit structuré autour de fondations, de composants réutilisables et de patterns directement liés aux usages métier de Meeko.
L’exercice m’a surtout permis d’explorer comment concevoir un système suffisamment cohérent pour accélérer le design tout en restant suffisamment flexible pour accompagner l’évolution d’un produit SaaS complexe.
Have a project in mind?
Let’s talk