Retour
01 Contexte
Client : Maisons du monde
Rôle : Design System Manager & Design Ops
Année : 2023
Lieu : Paris
Pendant près de deux ans chez Maisons du Monde, j’ai évolué du poste de UI Designer à celui de Design System Manager.
J’ai piloté la mise en place d’un Design System complet, cohérent et évolutif, destiné à soutenir plusieurs produits : e-commerce web, mobile, appshop et modules front marketing.
Mon périmètre incluait :
- création et modélisation de composants UI modulaires,
- alignement Design ↔ Développement,
- documentation Figma / Histoire,
- Design Ops & gouvernance,
- évangélisation interne.
02 Mission globale
Objectifs :
- Unifier l’UI sur l’ensemble des plateformes
- Réduire la dette graphique & technique
- Structurer Figma et les naming conventions
- Industrialiser le travail Design ↔ Dev
- Permettre une forte scalabilité produit
- Accélérer l’intégration et les sprints
- Faciliter l’onboarding des équipes
Principaux livrables :
- Création d’une bibliothèque complète (44 composants DS → 150 composants Front)
- Mise en place d’une arborescence fonctionnelle (Figma ↔ Histoire)
- Documentation exhaustive : props, states, do/don’t, comportements
- Mise en place des rituels DesignOps hebdomadaires
- Contribution active à la stratégie Design System de l’entreprise
03 Cas concret
1. Du template au composant mère : une approche systémique du carousel
Ce cas illustre parfaitement la manière dont j’ai abordé la construction du Design System : partir d’un problème produit réel pour créer une solution évolutive, pérenne et commune à toutes les équipes.
2. Point de départ : une homepage pleine de carrousels différents
Sur la homepage, plusieurs carrousels coexistaient :
- différents comportements,
- différents espacements,
- différents types de contenus,
- aucun socle commun.
→ Le premier enjeu fut donc d’unifier l’ensemble dans un template global cohérent.
Avant
Après
3. Une gamme complète construite à partir des besoins réels
Marketing, data et produit ont listé leurs modules clés :
- EditoHeroCarousel
- EditoProductCarousel
- EditoCategoryCarousel
- EditoMagCarousel
- ProductReviewCarousel
Chaque équipe avait ses besoins → mais le front avait 5 implémentations différentes.
→ C’est ici que commence la rationalisation.
4. Création d’un composant mère : le CarouselDS
J’ai conçu un composant holistique, pensé comme un “container système” capable d’accueillir plusieurs types de contenus.
Principes :
- une grille de conteneurs flexibles,
- règles UX unifiées,
- comportements standardisés,
- states documentés,
- props alignées Design & Dev,
- scalable pour les futurs modules marketing.
Ce composant mère permet :
- une logique centralisée,
- une meilleure maintenabilité,
- une réduction de la dette,
- une simplification des futures déclinaisons.
5. Résultats : cohérence, vitesse & évolutivité
La création du composant CarouselDS a permis :
✔ Une logique unifiée à l’échelle du produit
✔ Une réduction des doublons sur le front
✔ Une intégration plus rapide pour les développeurs
✔ Une prise en main plus simple pour les designers
✔ Un système capable d’absorber les futurs besoins marketing
C’est un exemple concret de la manière dont le Design System devient un levier stratégique, pas seulement un outil UI.
05 Au-delà du carousel
Deux ans de structuration DesignOps & Design System.
Pour comprendre l’envers du décor :
- langage commun
- arborescence fonctionnelle Figma ↔ Histoire
- processus de contribution
- gouvernance design
- documentation miroir
- évangélisation interne
- workflow DesignOps mis en place
- résultats produits & organisationnels
→ Lire l’article complet : “Quand le Design System structure le Design Ops”
