Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

Design Systems France

June 02, 2021
Tweet

More Decks by Design Systems France

Other Decks in Design

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. 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
  5. 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)
  6. 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.
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. Construire notre écosystème 👀 🌏 🧪 💙 ≈ 300 personnes

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

    🧪 💙 ≈ 300 personnes ≈ 350 personnes ≈ 20 projets ≈ 10 personnes
  16. 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 !
  17. Priorisation de nos guidelines & composants Inspiration : “Atelier -

    Prioriser les composants de votre design system” par Audrey Hacq, Product Design Director chez OpenClassrooms
  18. 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
  19. 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 !
  20. Nos “Flops” 👎 Ce qu’on a arrêté - Les Design

    Review synchrones - La priorisation par votes communautaires
  21. 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
  22. 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)
  23. Nous on pense, la question elle est vite répondue !

    Pour celles et ceux qui ont la réf’...
  24. Design Systems France | Meetup #11 MERCI 💙 On échange

    ensemble maintenant ? www.decathlon.design