Structurer et accélérer la production digitale avec un Design System scalable et adaptable
Moniwan｜Crédit Mutuel Alliance Fédérale
Un Design System modulaire qui réduit le time-to-market, unifie l’expérience utilisateur et facilite l’implémentation.
Les services Moniwan devaientt évoluer rapidement tout en assurant une expérience utilisateur fluide et homogène. L’absence d’un Design System entraînait des incohérences visuelles, ralentissait les cycles de production et complexifiait l’implémentation technique.
Il était essentiel de structurer les interfaces avec un Design System scalable et documenté pour optimiser la collaboration entre design et tech, tout en assurant une adoption rapide par les équipes.
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 résultat
Un Design System modulaire et évolutif conçu pour accélérer la production, garantir une expérience utilisateur homogène et simplifier l’implémentation. Sa documentation détaillée a facilité son adoption et son déploiement en optimisant la collaboration entre design et tech.
Cette première brique a également servi de fondation pour la création du Design System de La Française, en adaptant le système aux besoins spécifiques de cette autre marque du groupe .
Ma solution : un Design System pour accélérer, harmoniser et pérenniser l’expérience produit
1# Comprendre et structurer la vision
Ateliers avec les équipes pour aligner les objectifs et les contraintes.
Audit des interfaces existantes pour identifier les points de douleur et les besoins en composants.
Benchmark des Design Systems leaders multi marque pour intégrer les meilleures pratiques.
Avant de concevoir le Design System, il était primordial de définir les objectifs et les besoins des équipes produit et tech. Le Design System devait être vivant, modulaire et évolutif, capable de s’adapter aux différents supports de la marque tout en renforçant la cohérence visuelle
2# Créer les bases du Design System
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 technique 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# Concevoir et tester les composants
Prototyper les composants Atomic Design (atomes, molécules, organismes) pour couvrir tous les besoins fonctionnels.
Valider les composants avec les équipes métiers, en intégrant leurs retours pour garantir une expérience fluide.
Tester la cohérence et l’ergonomie des composants dans différents contextes d’utilisation.
Adapter les résolutions et intéractions 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
4# Standardiser, documenter et assurer l’adoption du Design System
Créer une documentation complète dans Zeroheight, incluant les guidelines Atomic Design, les composants, 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 bénéfices
80% de réduction du temps de conception et développement grâce aux composants réutilisables.
Expérience homogène sur tous les parcours et réduction des incohérences UI/UX.
Accessibilité digitale optimisée avec une conception respectant les normes en vigueur.
Approche Mobile First, garantissant une expérience fluide sur tous les supports.
Adoption rapide par les équipes avec un onboarding facilité grâce à la documentation.
Déploiement multi-marque, utilisé également pour harmoniser les interfaces de La Française
Voir le projet
Ce que j’ai appris
• L’Atomic Design c’est vraiment mon dada : Concevoir des composants réutilisables et interconnectés pour faciliter la standardisation et la scalabilité, tout en garantissant une flexibilité aux équipes produit et tech.
• Aligner l’accessibilité et la performance : Le respect des normes d’accessibilité dès la conception a permis d’offrir une expérience inclusive sans compromis sur l’esthétique ou l’ergonomie.
• Le Design System est un levier stratégique : Bien documenté et adopté, il devient un atout majeur pour optimiser le time-to-market et assurer une homogénéité multi-marque.
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 ?
Vous souhaitez structurer votre expérience utilisateur avec un Design System efficace ? Parlons-en !
Date:
08/01/2025