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 👍
   

   View Slide

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
   󰏃
   

   View Slide

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 👍
   

   View Slide

4. DECATHLON / PRÉSENTATION 🎽
   

   View Slide

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
   

   View Slide

6. Notre ambition sur le numérique
   “Becoming a Sports’ Digital Giant”
   

   View Slide

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)
   

   View Slide

8. 1
   Design System
   Quelques chiffres
   

   View Slide

9. 1 AN DÉJÀ !
   

   View Slide

10. Comment en sommes-nous arrivés là ?
    Quels enseignements 1 an après ?
    

    View Slide

11. DECATHLON / LA SUBSIDIARITÉ 🧬
    

    View Slide

12. View Slide

13. CONTEXTE / ON VOYAGE ? 🌍
    

    View Slide

14. DECATHLON.󰏃
    

    View Slide

15. DECATHLON.󰑔
    DECATHLON.󰑔
    

    View Slide

16. DECATHLON.󰑔
    DECATHLON.󰎟
    

    View Slide

17. DECATHLON.󰑔
    DECATHLON PRO 󰳖
    

    View Slide

18. DECATHLON.󰑔
    DECATHLON SKI ⛷
    

    View Slide

19. DECATHLON.󰑔
    ENTREZ DEHORS (DECATHLON OUTDOOR) 🌱
    

    View Slide

20. DECATHLON.󰑔
    DECATHLON ACTIVITIES 📅
    

    View Slide

21. DECATHLON.󰑔
    DECATHLON CO-CREATION 󰳒
    

    View Slide

22. HMMM… PROBLÈMES !
    

    View Slide

23. PROBLÈMES / #1 LA COHÉRENCE 🤯
    

    View Slide

24. À la maison
    En magasin
    Avec ma communauté
    Pendant mon sport
    

    View Slide

25. PROBLÈME / #2 L’EFFICIENCE 😕
    

    View Slide

26. View Slide

27. PROBLÈMES / #3 L’ACCESSIBILITÉ 😢
    

    View Slide

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.
    

    View Slide

29. PAR OÙ ON A COMMENCÉ ? / KICK-OFF 🦠
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. Choix des outils
    ⚠ Juin 2020
    

    View Slide

33. ⚠ Juin 2020
    Choix des outils
    

    View Slide

34. ⚠ Juin 2020
    Choix des outils
    

    View Slide

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
    

    View Slide

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
    

    View Slide

37. 2020, DEMI-ANNÉE TEST
    / PREMIERS RÉSULTATS 📈
    

    View Slide

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
    

    View Slide

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
    

    View Slide

40. NOTRE PRINCIPAL CRITÈRE DE SUCCÈS
    / LES COMMUNAUTÉS 󰠁🌍󰞵
    

    View Slide

41. Les communautés de pratique
    chez Decathlon
    #Mobile
    #Front
    #UX-UI
    #Ops
    #Communication
    #Products
    #GreenIT
    

    View Slide

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
    

    View Slide

43. Newsletter
    
    ≈ 1 fois par mois
    

    View Slide

44. Construire notre écosystème
    👀
    🌏
    🧪
    💙
    ≈ 300 personnes
    ≈ 350 personnes
    ≈ 20 projets
    ≈ 10 personnes
    

    View Slide

45. Construire notre écosystème
    et s’ouvrir à d’autres écosystèmes
    👀
    🌏
    🧪
    💙
    ≈ 300 personnes
    ≈ 350 personnes
    ≈ 20 projets
    ≈ 10 personnes
    

    View Slide

46. Bientôt une rencontre avec
    votre entreprise ? 🤞
    Compléter le formulaire ici
    

    View Slide

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 !
    

    View Slide

48. Impliquer les communautés
    dans la construction
    

    View Slide

49. Impliquer les communautés
    validation des composants
    

    View Slide

50. Impliquer les communautés
    validation des composants
    

    View Slide

51. Impliquer les communautés
    dans la construction (côté DEV aussi !)
    

    View Slide

52. Impliquer les communautés
    dans les décisions
    

    View Slide

53. Impliquer les communautés
    dans les décisions
    

    View Slide

54. Impliquer les communautés
    dans les décisions
    

    View Slide

55. Impliquer les communautés
    dans les décisions
    

    View Slide

56. 2021, STRUCTURATION & ACCÉLÉRATION
    / NOTRE MISSION PRODUIT
    

    View Slide

57. Mise en place d’une stratégie
    

    View Slide

58. Priorisation de nos guidelines & composants
    Inspiration : “Atelier - Prioriser les composants de votre design system” par
    Audrey Hacq, Product Design Director chez OpenClassrooms
    

    View Slide

59. Mise en place d’une roadmap produit
    

    View Slide

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
    

    View Slide

61. Suivi du delivery avec la méthode OKR
    

    View Slide

62. 2021, STRUCTURATION & ACCÉLÉRATION
    / ET MAINTENANT ?
    

    View Slide

63. TOUJOURS 1 AN !
    

    View Slide

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 !
    

    View Slide

65. Nos “Flops” 👎
    Ce qu’on a arrêté
    - Les Design Review synchrones
    - La priorisation par votes
    communautaires
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

68. CONCLUSION / ON CONTINUE OU PAS ? 󰤈󰤇
    

    View Slide

69. View Slide

70. Nous on pense, la
    question elle est
    vite répondue !
    Pour celles et ceux qui ont la réf’...
    

    View Slide

71. Design Systems France | Meetup #11
    MERCI 💙
    On échange ensemble maintenant ?
    www.decathlon.design
    

    View Slide