Pendant près de deux ans chez Maisons du Monde, j’ai évolué du rôle de UI Designer à celui de Design System Manager.
J’y ai piloté la mise en place complète du Design System : création de composants modulaires alignés entre design et développement, structuration de l’arborescence Figma, documentation partagée (Figma/Histoire), standardisation des workflows et des namings.
J’ai animé des rituels hebdomadaires dédiés avec les équipes et accompagné l’évangélisation interne autour de la démarche DesignOps et des bénéfices d’un Design System à long terme.

Du template au composant mère : une approche systémique du carousel

1. Le carrousel dans la Homepage : premier point de friction

La refonte de la homepage a été l’élément déclencheur : plusieurs types de carrousels cohabitaient, sans logique unifiée. J’ai commencé par concevoir un nouveau template global, intégrant une gestion rationnelle de ces modules tout en assurant la cohérence visuelle avec la Lead UI.

2. Une gamme complète de carrousels pensée à partir des usages réels

L’équipe marketing est arrivée avec des besoins concrets, en lien avec les temps forts de l’année. De son côté, l’équipe data disposait de chiffres précis sur la cliquabilité et la conversion de chaque module. En s’appuyant sur ces usages récurrents, la lead UI a identifié une gamme de carrousels qu’il a fallu documenter et transmettre aux développeurs. À ce jour, cinq composants Front ont été rassemblés : EditoHeroCarousel, EditoProductCarousel, EditoCategoryCarousel, EditoMagCarousel et ProductReviewCarousel. Mais la liste pourrait encore s’allonger dans les écrans à venir. C’est à ce moment-là que le vrai travail de rationalisation a commencé…

3. Le composant mère dans le Design System

Ce travail a mené à la création d’un composant holistique dans le Design System : un socle unique, modulable à volonté, basé sur une grille de conteneurs flexibles. Chaque conteneur peut accueillir une variété de contenus selon le besoin métier, et les règles d’affichage ont été pensées pour répondre aux exigences UX comme aux contraintes techniques. Ce composant mère permet à la fois de centraliser la logique, de limiter la dette technique, et de faciliter les déclinaisons futures côté dev & design. On l’appelle le CarouselDS

Overview

Props

States

Other

4. Résultat : cohérence, gain de temps, évolutivité

Ce chantier a permis d’unifier la logique de carrousels à l’échelle du produit :

• moins de doublons,
• une prise en main facilitée pour les équipes
• une intégration plus rapide pour les développeurs
  Un bel exemple de design system appliqué à un besoin métier concret.

Ce projet autour des carrousels n’est qu’un exemple parmi tant d’autres de l’approche que j’ai développée chez Maisons du Monde. Si tu souhaites découvrir le fil rouge stratégique — de la conception UI à l’organisation DesignOps — je t’invite à consulter mon article : “Quand le Design System structure le Design Ops”

Dans celui‑ci, je décris en détail :

• la mise en place du langage commun et de l’arborescence fonctionnelle

• la documentation et le processus de co‑construction

• la plateforme Figma ↔ Histoire comme source unique de vérité

Tu y trouveras également le contexte global, les méthodes d’évangélisation interne et les résultats concrets d’une initiative menée pendant deux ans.

👉 Lire l’article complet