MWM Design System
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.
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.
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.
Produit
Produit
Produit
Design System
Design System
Entreprise
Entreprise
Entreprise
MWM
MWM
Rôle
Rôle
Rôle
Product Designer
Product Designer
Durée
Durée
Durée
Août 2021 - mai 2024 (2 ans et 9 mois)
Août 2021 - mai 2024 (2 ans et 9 mois)
Équipe
Équipe
Équipe
10 Développeurs, 1 Product Manager, moi
10 Développeurs, 1 Product Manager, moi
Outils utilisés
Outils utilisés
Outils utilisés
Figma, Github, Storybook
Figma, Github, Storybook
Ma contribution
Ma contribution
Ma contribution
Benchmark
User research
UX/UI Design
Prototypage hi-fi
Stratégie produit
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.
UI COMPONENTS
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.
UI COMPONENTS
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.
UI COMPONENTS
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ésultats
Gains en productivité & delivery : · Réduction du temps de conception de 40% grâce à la réutilisation des composants. · On estime que le développement des écrans est 2x plus rapide.
Réduction des incohérences & dette design : · 90% des composants utilisés dans les deux produits proviennent du design system. · Réduction du nombre de variants inutiles.
Amélioration de la collaboration avec les devs : Moins d'échanges nécessaires et moins de retours QA liés à l'UI.
Scalabilité & maintenabilité : +20 nouveaux écrans créés depuis sans ajouter de nouveaux composants.