MWM Design System
MWM Design System
Design system interne de MWM partagé par plusieurs produits. J'ai conçu un design system cohérent, modulaire et documenté pour unifier l’expérience de deux produits internes stratégiques de MWM.
Entreprise
MWM • CDI
Produit
Design System
Durée
Août 2021 - mai 2024 (2 ans et 9 mois)
Rôle
Product Designer
Équipe
10 Développeurs, 1 Product Manager, moi
Outils utilisés
Figma, Github, Storybook
Ma contribution
Benchmark
User research
UX/UI Design
Prototypage hi-fi
Stratégie produit
Développement Front-End
Identité visuelle
Contexte
Unifier deux produits pour gagner en efficacité
Lors de la conception de la plateforme de publishing, il a été décidé qu’elle embarquerait certains écrans de l’intranet. Nous avons donc créé un design system commun pour assurer une cohérence visuelle avec l’intranet existant, garantir une expérience fluide et réutiliser des composants puissants déjà designés et développés.
Contexte
Unifier deux produits pour gagner en efficacité
Lors de la conception de la plateforme de publishing, il a été décidé qu’elle embarquerait certains écrans de l’intranet. Nous avons donc créé un design system commun pour assurer une cohérence visuelle avec l’intranet existant, garantir une expérience fluide et réutiliser des composants puissants déjà designés et développés.
Contexte
Unifier deux produits pour gagner en efficacité
Lors de la conception de la plateforme de publishing, il a été décidé qu’elle embarquerait certains écrans de l’intranet. Nous avons donc créé un design system commun pour assurer une cohérence visuelle avec l’intranet existant, garantir une expérience fluide et réutiliser des composants puissants déjà designés et développés.
Fondations
Un socle robuste basé sur l’Atomic Design
J’ai structuré le design system selon une approche Atomic Design afin de créer des composants réutilisables et évolutifs. Les design tokens (couleurs, typographies, espacements…) définissent les fondations visuelles et garantissent des interfaces cohérentes. Des guidelines claires ont été rédigées dans Figma pour accompagner les designers et développeurs dans l’usage des composants.
Fondations
Un socle robuste basé sur l’Atomic Design
J’ai structuré le design system selon une approche Atomic Design afin de créer des composants réutilisables et évolutifs. Les design tokens (couleurs, typographies, espacements…) définissent les fondations visuelles et garantissent des interfaces cohérentes. Des guidelines claires ont été rédigées dans Figma pour accompagner les designers et développeurs dans l’usage des composants.
Fondations
Un socle robuste basé sur l’Atomic Design
J’ai structuré le design system selon une approche Atomic Design afin de créer des composants réutilisables et évolutifs. Les design tokens (couleurs, typographies, espacements…) définissent les fondations visuelles et garantissent des interfaces cohérentes. Des guidelines claires ont été rédigées dans Figma pour accompagner les designers et développeurs dans l’usage des composants.
Composants UI
Une bibliothèque modulaire et évolutive
Buttons, cards, tables, dropdowns, modals… Chaque composant a été conçu avec ses variantes, états et documentation, pour un usage fluide par les développeurs.
Composants UI
Une bibliothèque modulaire et évolutive
Buttons, cards, tables, dropdowns, modals… Chaque composant a été conçu avec ses variantes, états et documentation, pour un usage fluide par les développeurs.
Composants UI
Une bibliothèque modulaire et évolutive
Buttons, cards, tables, dropdowns, modals… Chaque composant a été conçu avec ses variantes, états et documentation, pour un usage fluide par les développeurs.
Résultats
Résultats
Réduction du temps de conception de 40% grâce à la réutilisation des composants
Réduction du temps de conception de 40% grâce à la réutilisation des composants
Réduction du temps de conception de 40% grâce à la réutilisation des composants
90% des composants utilisés dans les deux produits proviennent du design system (Réduction du nombre de variants inutiles)
90% des composants utilisés dans les deux produits proviennent du design system (Réduction du nombre de variants inutiles)
90% des composants utilisés dans les deux produits proviennent du design system (Réduction du nombre de variants inutiles)
On estime que le développement des écrans est 2x plus rapide et qu'il y a beaucoup moins d'échanges et retours QA liés à l'UI
On estime que le développement des écrans est 2x plus rapide et qu'il y a beaucoup moins d'échanges et retours QA liés à l'UI
On estime que le développement des écrans est 2x plus rapide et qu'il y a beaucoup moins d'échanges et retours QA liés à l'UI
+20 nouveaux écrans créés depuis sans ajouter de nouveaux composants
+20 nouveaux écrans créés depuis sans ajouter de nouveaux composants
+20 nouveaux écrans créés depuis sans ajouter de nouveaux composants