Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vitamin, le Design System de Decathlon

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

73f82a90bab5250087193c95ea45585d?s=128

Design Systems France

June 02, 2021
Tweet

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É 🧬

  12. None
  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 😕

  26. None
  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 ? 󰤈󰤇

  69. None
  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