Créer un Design System scalable et adaptable et poser les bases d’un système multi-marque
Moniwan
Un Design System visionnaire, conçu pour durer et s’adapter aux défis futurs.
J’ai conçu un Design System sur Figma pour Moniwan, en structurant ses composants selon les principes de l’Atomic Design. Ce projet a posé les bases d’une expérience utilisateur cohérente, accessible et modulaire, tout en anticipant l’évolution vers une utilisation multi-marque.
L’objectif : répondre aux besoins spécifiques des néo-investisseurs avec une solution robuste et scalable, capable de s’adapter à une autre marque du groupe, La Française, dotée d’une identité et d’usages distincts. Cette flexibilité a permis d’unifier les processus de conception et d’accélérer le développement sur l’ensemble des projets.
L’équipe
• 1 x product designer (moi)
• 1 x product manager
• 1 x product owner
• 2 x développeurs front end
• 1 x consultant SEO
• Equipe QA
• Equipe Acquisition et Réseaux sociaux
Le défi !
Créer un Design System pour Moniwan à partir de rien, dans un contexte où aucun système n’existait, était un défi en soi. Mais le véritable enjeu allait au-delà des besoins immédiats : poser les bases d’un système évolutif, capable de s’adapter à une autre marque du groupe, avec une identité, une cible et des usages distincts. Il s’agissait de trouver l’équilibre entre concevoir un système robuste et adapté à Moniwan, répondre à des contraintes métier spécifiques, et anticiper une harmonisation multi-marque. Une ambition portée par des délais serrés, où chaque décision alliait efficacité immédiate et vision stratégique à long terme.
Le vrai défi ? Poser des bases solides pour un système évolutif capable de répondre aux besoins de la marque Moniwan et de la marque La Française dans le futur.
Ma solution !
1# Comprendre les besoins et fixer les objectifs
Ateliers collaboratifs avec les équipes pour clarifier les besoins et définir les objectifs.
Audit complet des interfaces et des éléments de communication exixtants.
Analyse des écarts et besoins spécifiques entre les marques.
Benchmark des Design Systems leaders multi marque pour intégrer les meilleures pratiques UX et techniques.
J’avais ma conclusion : Le Design System que je devais créer devait être vivant, modulaire et universel. Il devait évoluer dans le temps, s’adapter à différents contextes, tout en restant inclusif, cohérent et en renforçant l’identité de chaque marque.
2# Structurer les fondations sur figma (C’est parti ! )
Définir les tokens pour standardiser les styles communs (typographies, couleurs et espacements…)
Créer une arborescence modulaire et agnostique avec une nomenclature claire et intuitive.
Collaborer avec les développeurs pour concevoir une structure technologique sur-mesure, adaptée aux besoins du projet.
Structurer un Design System, c’est poser des bases solides et modulaires qui facilitent le travail des équipes, tout en ouvrant la voie à une évolution fluide et pérenne.
3# Conception et prototypage collaboratif
Prototyper les composants Atomic Design (atoms, molecules, organisms) pour couvrir tous les besoins fonctionnels.
Organiser des ateliers avec les parties prenantes pour prioriser les besoins et affiner les premières versions.
Valider les composants en testant les prototypes avec les équipes métier, en intégrant leurs retours pour garantir une expérience fluide.
Prototyper, c’est créer un terrain d’expérimentation où les idées prennent vie, se confrontent aux besoins réels et s’affinent grâce à des échanges constructifs avec les équipes.
4# Tester et itérer
Vérifier la cohérence et l’ergonomie des composants dans différents contextes d’utilisation.
Adapter les résolutions et interactions spécifiques, tout en ajustant les tokens pour garantir une expérience fluide et harmonieuse.
Tester et itérer, c’est aller au-delà de la validation initiale pour affiner chaque détail, garantir la cohérence du Design System et s’assurer qu’il répond parfaitement aux besoins des utilisateurs
5# Deployer et documenter
Créer une documentation complète dans Zeroheight, incluant les guidelines Atomic Design, la nomenclature, des templates et des exemples d’écrans.
Former les équipes sur l’utilisation du Design System et des outils mis en place sur Figma.
Mettre en place un processus de gouvernance pour garantir une maintenance continue et une évolution harmonieuse du système.
Un Design System ne s’arrête pas à sa création. Sa documentation et son déploiement sont les clés pour garantir son adoption, son utilisation efficace et sa capacité à évoluer durablement.
Les résultats
Un Design System robuste déployé pour Moniwan. Il a posé des bases solides pour la cohérence visuelle et technique.
Une réduction de 50 % du temps de développement grâce à des composants réutilisables.
Une adaptation multi-marque réussie puisque le système a été répliqué et adapté pour La Française, avec des chartes graphiques différentes, prouvant sa flexibilité.
Mes réflexions pour aller plus loin…
Ce projet a montré l’importance d’un Design System bien structuré dès le départ pour anticiper une future gestion multi-marque. Avec plus de temps, une architecture complètement centralisée aurait permis une optimisation des mises à jour et une collaboration encore plus fluide entre les marques.
Ma boîte à outils
Figma
Miro
Zeroheight
Notion
Photoshop
L’avis de ce qui m’ont fait confiance…
Bruno – B2C Growth & Paid Acquisition Specialist
« J’ai eu le plaisir de travailler pendant 1 an avec Sandrine sur les différents projets de La Française & Moniwan. C’est une personne impliquée, professionnelle, pro-active sur son périmètre et tout cela avec le sourire et une soif d’apprendre sans fin…
Je recommande fortement sans hésitions son profil qui est un moteur et une forte valeur ajoutée au sein d’une équipe. »
Voir les recommandations sur Linkedin
Envie de collaborer ?
Curieux de voir comment un Design System pourrait transformer vos projets ?
Date:
08/01/2025