Créer un Design System pour Maisons du Monde
2023 - 2025
Chez Maisons du Monde, j’ai conçu Fondation : un Design System pensé comme les vraies fondations d’une maison. Solide, structurant, essentiel pour construire des interfaces cohérentes, modulables et alignées à l’image de la marque..
Contexte
À mon arrivée, aucun Design System n’existait chez Maisons du Monde.
Résultat :
• une dette design et technique importante,
• des composants dupliqués dans tous les sens,
• des maquettes longues à produire,
• des écarts importants entre les maquettes et le site en ligne
• une image de marque qui manquait d’unité.
Il devenait essentiel d’industrialiser les process, tout en renforçant la cohérence de l’expérience utilisateur.
Objectif
Le projet visait à poser les fondations d’un Design System robuste et évolutif, capable :
• d’harmoniser les interfaces pour offrir une expérience plus fluide, lisible et cohérente.
• Accélérer la production des maquettes et le travail des développeurs.
• Réduire la dette design et tech, en limitant les doublons et en mutualisant les efforts.
• Créer un langage visuel clair, aligné avec l’identité de marque et les usages e-commerce actuels.
Les fondations
Pour qu’un Design System soit robuste, il faut d’abord des fondations stables.
J’ai commencé par harmoniser les styles essentiels à l’échelle du site :
Couleurs : création d’une palette principale cohérente avec l’univers de marque Maisons du Monde (tons naturels, sobres, chaleureux).
Typographies : rationalisation des styles textes pour clarifier la hiérarchie visuelle et améliorer la lisibilité sur tous les devices.
Grilles & espacements : définition de systèmes de colonnes et de règles de padding/margin pour structurer l’information et aérer les interfaces.
Iconographie : nettoyage de la librairie d’icônes, suppression des doublons, homogénéisation des traits.
Objectif : unifier l’esthétique, renforcer l’identité de marque et améliorer l’expérience de lecture, notamment sur mobile.
Les composants
Construire une bibliothèque efficace.
Une fois les fondations posées, j’ai constitué une bibliothèque de composants UI réutilisables.
Objectif : gagner en productivité, éviter les doublons, garantir la cohérence sur l’ensemble des parcours.
Boutons, tags, inputs, toggles, accordéons, loaders… : chaque composant a été revu pour répondre aux bonnes pratiques UX/UI et documenté dans Figma avec ses états (hover, focus, disabled…).
Comportements et guidelines : pour chaque élément, des recommandations d’usage ont été définies pour faciliter l’implémentation côté dev.
Objectif : gagner en productivité, éviter les doublons, garantir la cohérence sur l’ensemble des parcours.
Les slices
créer des modules adaptables
Dans le contexte e-commerce, nous avons mis en place un système de “slices”,
c’est-à-dire des blocs modulaires destinés à construire des pages flexibles, notamment sur nos Landing Page.
Chaque slice est autonome, responsive, testée en termes d’impact visuel et conversion.
Exemples : slice hero, slice éditoriale, slice carrousel produit, slice service, slice inspiration…
Objectif : rendre les pages éditables rapidement, tout en respectant les standards du Design System
Templates
Pour faciliter la construction des pages clés du site, j’ai proposé des templates prêts à l’emploi :
Templates de home page, PLP, PDP,
pages éditoriales, pages marque, etc.
Chaque template est conçu avec les bonnes slices, en respectant les règles de design définies en amont.
Objectif : fluidifier les process entre designers, développeurs et équipes métier, tout en garantissant une cohérence globale.
Impacts & conclusion
Côté UX
Les parcours sont devenus plus fluides, mieux structurés et cohérents, renforçant l’ergonomie et la lisibilité sur tous les supports.
Côté UI
Le style visuel est désormais plus clair, harmonisé et ancré dans l’identité Clarins, avec des règles UI partagées et appliquées à l’échelle.
Côté Dev
Les développeurs bénéficient de composants standardisés, ce qui réduit la dette technique et accélère les temps de production au quotidien.
Côté Business
Un parcours plus fluide et engageant, une meilleure hiérarchisation des contenus et des CTA plus visibles soutiennent la conversion.
Côté Marque
Le site reflète une identité forte et moderne, alignée avec la plateforme de marque « Live beautifully » et ses codes d’élégance durable.
Côté Product (PO, CPO, PM)
Les PO et PM disposent de fondations claires pour cadrer les projets, prioriser les besoins et aligner toutes les équipes plus facilement.
Et si on travaillait ensemble ?
Je vous aide à transformer vos idées en expériences digitales réussies.