Chez DataCamp, notre mission est de démocratiser l’enseignement de la science des données pour tous. Avec plus de 2 millions d’apprenants dans le monde, nous avançons vite. Maintenir un tel rythme de croissance nécessite l’implication de tous au sein de l’entreprise et fait émerger de nouveaux défis passionnants.
Pour l’équipe Design, cela signifie passer d’une conception page par page à une approche plus scalable. La réutilisation des composants existants, la réduction du temps de développement, l’amélioration de l’ergonomie et le renforcement de l’accessibilité deviennent des priorités.
Cet article explique comment nous commençons à structurer un design system.
Qu’est-ce qu’un design system ?
Un design system rassemble tous les composants nécessaires pour diffuser et reproduire une solution de design. Ce n’est ni nouveau ni réservé au design de produits numériques : on en trouve de nombreux exemples dans l’histoire.
Par exemple, le premier empire chinois faisait face à un problème : les archers ne pouvaient pas utiliser les flèches de leurs camarades. Chaque flèche était conçue pour un arc précis, rendant les autres incompatibles. Le premier empereur, Ying Zheng, a standardisé la conception des flèches, ce qui a eu un impact majeur sur leurs conquêtes militaires.
Dans les années 1950, chaque station du métro de New York avait sa propre signalétique. Résultat : une grande confusion, car chaque station proposait une navigation différente. Beaucoup d’usagers hésitaient à emprunter le réseau parce qu’ils ne comprenaient pas son fonctionnement. Massimo Vignelli et Bob Noorda ont créé le NYC Transit Authority — Graphics Standards Manual, qui documente la fabrication des panneaux et leur placement dans les stations. Ce système est resté globalement inchangé et il est encore utilisé aujourd’hui.
Pourquoi adopter un design system ?
Quand chaque page est conçue isolément, de nombreux composants sont dupliqués ou existent en variantes proches. Le produit devient difficile à appréhender pour les utilisateurs et complexe à maintenir pour les équipes techniques. Chez DataCamp, nous avons recensé plus de 20 types de boutons dans notre produit, chacun avec ses spécificités (états de survol différents, états désactivés incohérents, etc.). Avec une forte croissance, il devient très difficile de suivre l’ensemble des composants et presque impossible de les maintenir. C’est là que le design system prend tout son sens.
Pour un produit numérique, un design system décrit les composants d’interface utilisateur qui permettent de concevoir une interface répondant à un besoin et offrant une expérience cohérente aux utilisateurs.
Lorsqu’un design system est bien exécuté, il déclenche un effet domino qui …
- Réduit les incompréhensions
- Réduit le temps d’implémentation
- Réduit la charge de maintenance
- Réduit les bugs
- Réduit les tickets de support
- Augmente la qualité
- Augmente l’efficacité
- Augmente la longévité
- Améliore l’apprentissage
- Améliore l’ergonomie
- Améliore l’accessibilité
- Favorise l’innovation
- Renforce la focalisation
- Stimule les ventes
Ce n’est pas simple …
Créer, maintenir et faire respecter un design system demande beaucoup de discipline et un effort continu de la part de toutes les équipes impliquées. Il ne s’agit pas seulement de design : l’ingénierie et le product management sont des parties prenantes clés. Chacun doit pouvoir poser des questions exigeantes : « Pourquoi construisons-nous cela ? », « Pouvons-nous réutiliser ce composant ailleurs ? », « Avons-nous déjà quelque chose de similaire ? », « Ce composant sur‑mesure apporte‑t‑il suffisamment de valeur au regard de l’effort requis ? ».
Design System 101 chez DataCamp
1. Créer un inventaire des composants
Objectif : s’assurer que chacun connaît l’existence et le statut d’un composant.
À mon arrivée chez DataCamp, nous disposions d’un fichier Sketch contenant des couleurs, des icônes, des polices et quelques composants de base. Loin d’être exhaustif, mais une bonne base. Côté front‑end, l’équipe avait également une bibliothèque de composants utilisés dans différents projets.
Ensemble, nous avons créé un inventaire dans Airtable à partir des composants réellement utilisés en production. Cela a permis à l’équipe Design d’identifier l’existant et d’éviter la création involontaire de nouveaux composants. Nous avons aussi pris la mesure du nombre de composants similaires et de l’ampleur du problème.
2. Harmoniser les conventions de nommage
Objectif : éviter les malentendus entre Design et Engineering.
En comparant les composants, nous avons constaté que Design et Engineering n’utilisaient pas le même vocabulaire. Par exemple, la « couleur primaire » définie par le design était la « couleur secondaire » dans le code. Ce type d’écart entraîne des incompréhensions à l’échelle et génère confusion et frustration. Nous avons donc aligné le langage utilisé par toutes les équipes.
3. Optimiser le workflow de design
Objectif : éviter la perte de travail et rendre le flux transparent.
Travailler en équipe design pose ses propres défis. Nous stockions auparavant nos fichiers dans Dropbox, mais avec la croissance de l’équipe, le risque de perte et la difficulté de suivre les versions ont fortement augmenté.
L’équipe a été très ouverte au changement et nous avons adopté Abstract. Cela nous a permis de versionner correctement nos designs, d’instaurer un flux de travail transparent et de concevoir avec davantage de sérénité.
4. Mieux documenter et faciliter l’onboarding
Objectif : accélérer l’onboarding et réduire la charge de communication.
Nous avons commencé à documenter notre processus et notre design system avec Slite. Si nous devons expliquer quelque chose plus d’une fois, cela doit être documenté et partagé avec l’équipe. On évite ainsi une surcharge de communication et la perte d’informations.
5. Design reviews
Objectif : aligner les attentes entre Design et Engineering.
Il est essentiel que les design reviews se fassent dans les deux sens. Les designers doivent pouvoir revoir le front‑end, et le front‑end doit aussi pouvoir challenger le design. Les designers ont souvent envie d’innover et de créer du nouveau. Les ingénieurs doivent pouvoir poser les questions qui fâchent : « Pourquoi faire du sur‑mesure ? », « Ne peut‑on pas réutiliser ce composant ? », « Peut‑on l’améliorer ? », « L’effort de développement supplémentaire est‑il justifié ? ». Il s’agit de justifier les décisions et de poser un cadre clair pour toutes les parties prenantes.
Conclusion
Nous venons tout juste de structurer notre design system et nous essayons encore de démêler les composants dupliqués présents dans notre produit. La route est encore longue, mais à chaque composant que nous traitons, nous créons un produit plus qualitatif, plus cohérent et plus facile à appréhender pour nos clients.
Nous serions ravis de savoir comment d’autres organisations s’approprient un design system. Envoyez‑moi un email pour partager votre expérience.
Chez DataCamp, nous sommes en permanence à la recherche de talents. Intéressé ? Consultez nos offres.
