Vitamin, le Design System de Decathlon

Design Systems France Meetup #11 - Vitamin, le Design System de Decathlon

Dans ce nouveau meetup online, nous avons reçu l'équipe de Decathlon : Sabrina VIGIL, Product designer et Laurent THIEBAULT, Engineering Manager.

En juin 2020, Decathlon a lancé son propre Design System.
Entreprise internationale, favorisant l’autonomie et la créativité (et en full remote, COVID oblige !)... Les challenges sont dans leur ADN !
Dans ce talk, ils nous ont dévoilé les détails de cette année de construction, riche en apprentissage… Et ont répondu à LA question : "On continue ou pas ?"

Liens évoqués dans la présentation :
Le Design System de Decathlon : https://www.decathlon.design/726f8c765/p/71b8e3-decathlon-design-system
L'article de Brad Frost
https://bradfrost.com/blog/post/design-system-interview-questions/
Exemple de release note (newsletter)
https://bit.ly/2SPQnci
Le dernier post #TakeYourVitamin d'aujourd'hui : https://twitter.com/decathlondev/status/1399668071917293570
Formulaire de rencontre des équipes : https://forms.gle/vsihEECZqmWRFZvW8
Github web et android
https://github.com/decathlon/vitamin-web
https://github.com/decathlon/vitamin-android
L'article d'Audrey Hacq
https://audreyhacq.medium.com/atelier-prioriser-les-composants-de-votre-design-system-b050cb638119

Design Systems France
La communauté dédiée aux concepteurs de Design Systems dans l'éco-système français. Construire, apprendre, partager.
https://designsystems.fr
https://www.meetup.com/fr-FR/DesignSystemsFrance-Paris

Transcript

1. Design Systems France | Meetup #11 Vitamin, le Design System de Decathlon Pour faire en sorte que le talk soit le plus audible possible, n'oublie pas d'éteindre ton micro 👍
2. Design Systems France, c’est : Une communauté Slack de + de 400 passionné⸱es de design systems 🙌 Une dizaine d’événements à son compteur 🎤 Presque 100 design systems français référencés 󰏃
3. Design Systems France | Meetup #11 Vitamin, le Design System de Decathlon Pour faire en sorte que le talk soit le plus audible possible, n'oublie pas d'éteindre ton micro 👍
4. DECATHLON / PRÉSENTATION 🎽
5. Notre sens Être utile aux gens et à leur planète Notre mission “Sport for the many” Rendre les plaisirs et les bienfaits de la pratique des sports accessibles au plus grand nombre
6. Notre ambition sur le numérique “Becoming a Sports’ Digital Giant”
7. 97 000 Collaborateurs au global Chiffres au 31/12/2020 60 pays 142 M clients ≈ 2 000 Collaborateurs au numérique 1 700 magasins Quelques chiffres ≈ 150 PO / PM / Project leaders ≈ 100 UX / UI Designers ≈ 250 Developpeurs (Web, iOS, Android)
8. 1 Design System Quelques chiffres
9. 1 AN DÉJÀ !
10. Comment en sommes-nous arrivés là ? Quels enseignements 1 an après ?
11. DECATHLON / LA SUBSIDIARITÉ 🧬
13. CONTEXTE / ON VOYAGE ? 🌍
14. DECATHLON.󰏃
15. DECATHLON.󰑔 DECATHLON.󰑔
16. DECATHLON.󰑔 DECATHLON.󰎟
17. DECATHLON.󰑔 DECATHLON PRO 󰳖
18. DECATHLON.󰑔 DECATHLON SKI ⛷
19. DECATHLON.󰑔 ENTREZ DEHORS (DECATHLON OUTDOOR) 🌱
20. DECATHLON.󰑔 DECATHLON ACTIVITIES 📅
21. DECATHLON.󰑔 DECATHLON CO-CREATION 󰳒
22. HMMM… PROBLÈMES !
23. PROBLÈMES / #1 LA COHÉRENCE 🤯
24. À la maison En magasin Avec ma communauté Pendant mon sport
25. PROBLÈME / #2 L’EFFICIENCE 😕
27. PROBLÈMES / #3 L’ACCESSIBILITÉ 😢
28. Et d’autres problèmes d’accessibilité… Sur les contenus textuels, les contenus non-textuels, les couleurs et contrastes, la navigation générale, la navigation clavier, les formulaires, la gestion du tactile et les interactions.
29. PAR OÙ ON A COMMENCÉ ? / KICK-OFF 🦠
30. Inventaire de l’existant Atelier d’environ 1h30 Avoir une vision d’ensemble des éléments les plus utilisés dans les produits et définir un langage commun
31. Analyse des attentes Traduit et adapté de Brad Frost 18 interviews Développeurs, intégrateurs, PO, UX/UI designers, graphiste print, créateurs de contenu Comprendre les contextes métiers, l’organisation des différentes équipes. Les attentes / inquiétudes. Les critères de succès et d'échec dans l’organisation Interviews de 30 à 45 min
32. Choix des outils ⚠ Juin 2020
33. ⚠ Juin 2020 Choix des outils
34. ⚠ Juin 2020 Choix des outils
35. Notre wiki, la source de vérité sur notre organisation • Vision • Mission • Engagements à court & moyen terme (2020, année test) • Présentation de l’écosystème • Rituels synchrones • Activités asynchrones • Kanban board • Contacts utiles Au départ il y avait... 🔒 Private access / Decathlon SSO
36. Notre wiki, la source de vérité sur notre organisation • Présentation du Design System • Meeting notes • OKRs (spoiler alert) • Liens utiles d’inspiration • Liste de nos consommateurs, contributeurs et partenaires • Formulaire de feedback • Formulaire d’inscription newsletter Désormais, il y a en +... 🔒 Private access / Decathlon SSO
37. 2020, DEMI-ANNÉE TEST / PREMIERS RÉSULTATS 📈
38. 31 décembre 2020, des livrables essentiels et un bel engouement 40+ Contributeurs Designers, développeurs, brand & content leaders 19 Pays représentés au niveau des consultations régulières du site web 20 Produits consomment nos design &/ou dev guidelines 10+ Pages Objectifs, get started design & dev, guidelines, premiers composants Chiffres au 31/12/2020
39. 31 décembre 2020, des livrables essentiels et un bel engouement “Amazing! Thanks so much! You guys are doing a wonderful job with vitamin btw. We really needed this Design System for quite some time. Thank you for this.” — Hussain DEWANI, UX referent for Hong Kong team 󰏔 “Thank you for the quick answer! In my country, I'm the only person who is responsible for the UI UX and development too so everything you shared with me today is a goldmine! 😀” — Renátó TATÁR, Engineer for Hungary team 󰏘 “Efforts like these are difficult to fully appreciate from the outside, but as a Decathlon designer, I can say with the utmost confidence that these achievements have been fantastic and immensely appreciated by designers and developers alike.” — Mike JERUGIM, Senior UX/UI/Product Designer for Canada team 󰎟 Feedback au 31/12/2020
40. NOTRE PRINCIPAL CRITÈRE DE SUCCÈS / LES COMMUNAUTÉS 󰠁🌍󰞵
41. Les communautés de pratique chez Decathlon #Mobile #Front #UX-UI #Ops #Communication #Products #GreenIT
42. Renforcer les communautés en multipliant les canaux de communications 265 membres Design System Slack workspace 193 abonnés Design System Newsletter 1K visiteurs uniques / mois Design System website Via les release notes 2K abonnés @decathlondev Série #TakeYourVitamin toutes les 2 semaines sur Twitter, LinkedIn & Instagram
43. Newsletter ≈ 1 fois par mois
44. Construire notre écosystème 👀 🌏 🧪 💙 ≈ 300 personnes ≈ 350 personnes ≈ 20 projets ≈ 10 personnes
45. Construire notre écosystème et s’ouvrir à d’autres écosystèmes 👀 🌏 🧪 💙 ≈ 300 personnes ≈ 350 personnes ≈ 20 projets ≈ 10 personnes
46. Bientôt une rencontre avec votre entreprise ? 🤞 Compléter le formulaire ici
47. Impliquer les communautés encourager à contribuer Light : Un correctif, un commentaire, une idée, une erreur dans la documentation ou dans les librairies. Medium : Une petite amélioration, de petites modifications de contenu ou de design. Large : Une grande amélioration, ajouter ou modifier des guidelines, participer au processus de conception. Heavy : Une nouvelle fonctionnalité, concevoir un composant entier !
48. Impliquer les communautés dans la construction
49. Impliquer les communautés validation des composants
50. Impliquer les communautés validation des composants
51. Impliquer les communautés dans la construction (côté DEV aussi !)
52. Impliquer les communautés dans les décisions
53. Impliquer les communautés dans les décisions
54. Impliquer les communautés dans les décisions
55. Impliquer les communautés dans les décisions
56. 2021, STRUCTURATION & ACCÉLÉRATION / NOTRE MISSION PRODUIT
57. Mise en place d’une stratégie
58. Priorisation de nos guidelines & composants Inspiration : “Atelier - Prioriser les composants de votre design system” par Audrey Hacq, Product Design Director chez OpenClassrooms
59. Mise en place d’une roadmap produit
60. Suivi du delivery avec la méthode OKR Mission & Vision Où ? Comment ? Objective Objective Objective Objective Key Result Key Result Key Result To do To do To do
61. Suivi du delivery avec la méthode OKR
62. 2021, STRUCTURATION & ACCÉLÉRATION / ET MAINTENANT ?
63. TOUJOURS 1 AN !
64. 1er juin 2021, Une accélération confirmée par les chiffres Illustration issue de l’épisode 3 de notre série #TakeYourVitamin paru aujourd’hui !
65. Nos “Flops” 👎 Ce qu’on a arrêté - Les Design Review synchrones - La priorisation par votes communautaires
66. Nos “Tops” 👍 Ce qu’on va continuer - La transparence (avec le wiki) - La communication (via Slack, newsletters) - Le fichier de co-construction ouvert à tous - Les prises de décision via sondage - Les reviews des guidelines et des composants par les communautés
67. Nos “Nexts” 🚀 Ce qu’on va commencer - Gamifier la contribution, lancer les challenges - Aider à la consommation du DS - Créer du lien avec les produits, les magasins etc. - Travailler le fix and flex (la déclinaison de thème)
68. CONCLUSION / ON CONTINUE OU PAS ? 󰤈󰤇
70. Nous on pense, la question elle est vite répondue ! Pour celles et ceux qui ont la réf’...
71. Design Systems France | Meetup #11 MERCI 💙 On échange ensemble maintenant ? www.decathlon.design