Gagner en cohérence et en productivité avec un design system
Quand Gautier, l’un de nos UX/UI designer, est venu nous parler de design system il y a 2 mois, j’étais un peu dubitatif. Nous avions à ce moment là d’autres sujets prioritaires et il en ajoutait un nouveau qui s’annonçait compliqué à mettre en place.
Devant notre moue hésitante, Gautier a décidé de faire preuve de pédagogie. Il nous a présenté les opportunités qu’aurait le design system à la fois pour les développeurs et les designers : travailler ensemble plus efficacement et donc in fine apporter de la satisfaction à nos utilisateurs. Puis il a pris le temps de détailler la démarche que l’on pourrait adopter pour mettre en place ce design system sans perdre en productivité. Convaincus par ses arguments, nous nous sommes lancés.
En prenant un peu de recul après 2 mois de travail, je crois que Gautier a bien fait d’insister un peu.
C’est quoi un design system ?
Un design system est une bibliothèque de styles et de composants réutilisables, documentée et soumise à des normes claires et détaillées. Il sert aussi bien aux designers qu’aux développeurs ou au marketing pour construire une expérience utilisateur cohérente plus rapidement.
Il comprend plusieurs briques, dont les 3 principales sont :
- une charte graphique, qui définit des éléments de style (couleurs, typographies, icônes…) et leur utilisation
- un kit UI qui rassemble les composants réutilisables (boutons, inputs…) en se basant sur la charte graphique afin de garder un style uniforme entre les composants
- une documentation qui explique la façon dont chaque composant doit être utilisé
Si vous voulez en lire plus sur le sujet, cet article écrit (en anglais) par Audrey Hacq définit plus précisément ce qu’est un design system.
Quels avantages à mettre en place un design system chez Captain Contrat ?
Un gain de clarté pour nos utilisateurs
Notre application a maintenant 7 ans, un âge tout à fait respectable pour une application web. Avec plusieurs lignes produits (place de marché, abonnement) et plusieurs types d’utilisateurs (créateurs d’entreprises, dirigeants d’entreprises, experts comptables, avocats…) elle est devenue relativement complexe d’un point de vue graphique.
Jusqu’à présent nous avons conçu chaque page au moment où nous avons eu besoin de l’implémenter, sans nous soucier de la cohérence avec celles déjà existantes. Nouvelle couleur, nouveaux boutons, nouvelle taille de texte, etc. La diversité graphique de nos interfaces utilisateurs était très pénalisante.
Quand Gautier a posé sur la table la question du design system, il est devenu évident pour nous que cette situation était problématique pour nos utilisateurs, qui avaient parfois du mal à utiliser notre application.
En rassemblant au sein du design system nos règles de conception, nous évitons que les différentes pages proposent des interfaces obéissant à des règles qui sortent de la norme. Elles restent cohérentes entre elles et nos utilisateurs se sentent à l’aise pour naviguer sur toute notre application sans mauvaises surprises.
Un gain d’efficacité pour les designers
Une autre conséquence directe du désordre graphique de notre application était le coût de conception de nouvelles pages. A chaque nouvelle conception, le designer s’interrogeait pour finalement prendre des décisions semblables à celles prises pour d’autres pages. Nous ne prenions pas en compte les enseignements tirés du passé. On aurait pu réutiliser l’existant, mais quelle couleur choisir parmi les 8 qui existent déjà ?
Avec une bibliothèque de composants et une charte graphiques documentées, les designers peuvent s’appuyer directement sur les éléments définis par le passé pour gagner du temps dans la conception : “Je veux un texte d’aide pour accompagner l’utilisateur, donc je vais utiliser directement le texte d’aide par défaut de notre design system”
Au delà de la conception d’une nouvelle page, nous avions aussi du mal à faire évoluer nos interfaces existantes car il était difficile de décliner une modification partout sur le site d’un coup. On peut parler de dette graphique, par analogie à la dette technique.
Avec un design system unifié, on peut facilement modifier un élément sans avoir de surprises sur l’impact pour toutes les vues dans lesquelles il est utilisé.
Un gain de temps pour les développeurs
Du point de vue des développeurs, l’utilisation d’un design system est également venue apporter de l’efficacité dans notre travail.
Toutes les maquettes étant différentes auparavant, nous devions systématiquement implémenter de nouveaux composants, ou des versions modifiées de composants existants. Ce temps de développement était mal utilisé et nécessitait par ailleurs beaucoup d’aller-retours avec les designers pour valider le travail réalisé.
Maintenant que nos designers utilisent notre design system, les interfaces sont proches. Une fois les composants définis et documentés, et dès lors qu’ils ont été utilisés et implémentés une fois, nous pouvons les réutiliser sur les différentes pages sans avoir besoin de les réimplémenter. Nous avons déjà constaté un gain de temps conséquent.
Conclusion
Vous l’aurez compris, après deux mois de mise en place et d’utilisation de notre design system, je considère qu’il s’agit d’une bouffée d’air frais, à la fois pour nos utilisateurs et pour nos équipes de conception et de développement. Il nous a aidé à résoudre un problème structurel et douloureux : notre application n’avait pas d’unité graphique.
Nous avons progressé sur les deux axes que nous avions identifiés :
- côté utilisateur : nos interfaces ont gagné en cohérence et donc en clarté.
- côté designer et développeur : nous avons gagné en productivité car la réutilisabilité des éléments qui composent nos interfaces utilisateurs se traduit par un gain de temps sur la conception et l’implémentation.
La décision de mettre de place ce design system correspond aussi à l’arrivée d’un deuxième designer dans l’équipe. Cette arrivée aurait pu augmenter l’entropie graphique de notre application. En nous forçant à documenter l’existant et les décisions prises, nous avons probablement gagné un temps fou.
Un chouette projet !
Article co-écrit avec Gautier.
Pour les curieux, notre design system est documenté ici.
Vous êtes convaincus de l’utilité d’un design system, mais vous ne savez pas comment le concevoir, ou gérer la transition ? Cet article de Gautier précise comment notre design system a été conçu.
