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
Prototypage hi-fi
User testing
Développement Front-End
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
37%
de réduction du temps de conception et QA
37%
de réduction du temps de conception et QA
37%
de réduction du temps de conception et QA
x2
de vitesse de développement des écrans
x2
de vitesse de développement des écrans
x2
de vitesse de développement des écrans
86%
des composants utilisés dans les deux produits proviennent du design system
86%
des composants utilisés dans les deux produits proviennent du design system
86%
des composants utilisés dans les deux produits proviennent du design system
+20
nouveaux écrans créés depuis sans créer de nouveaux composants
+20
nouveaux écrans créés depuis sans créer de nouveaux composants
+20
nouveaux écrans créés depuis sans créer de nouveaux composants