Après avoir compris ce qu’était un design system et en quoi consistait l’atomic design grâce aux articles précédents, voyons aujourd’hui comment construire son design system.

‍

Step #1 : poser les bases

Premièrement, il est important d’observer son équipe, et surtout de garder en tête que le design system est un sujet relativement nouveau. L’important n’est pas de faire un design system parce que c’est tendance et que toutes les grandes entreprises en ont un, mais plutôt de lister les problèmes que l’on rencontre au quotidien, et voir si le design system peut être une solution pour résoudre la majeure partie d’entre eux. Selon l’organisation, ou les différentes façons de travailler de chacun, le design system peut être plus ou moins difficile à intégrer pour l’équipe. Tout comme le confirme Madisson Borgmann (product designer chez HealthStream) dans son article « Design System Imposter Syndrome » : « Most design and development teams are aware of the value of a design system resource but are still learning how it fits into their processes or other areas of value the resource can provide to an organization. »

Il est donc important de demander à ses coéquipiers leurs visions, recueillir leurs principes et leurs valeurs, et les réponses qui reviendront le plus souvent pourront être considérées comme des futures règles de bases à inscrire dans ce design system : vos fondations.

On va ensuite déterminer quels seront les objectifs (en termes de business, d’efficacité…) et comment pourra-t’on les mesurer afin de s’assurer du bienfondé de la démarche.

Step #2 : l’organisation

Ces premières fondations posées, on peut ensuite penser au type d’organisation qui va se créer autour de ce design system. Selon la taille de l’équipe et les connaissances des coéquipiers sur le sujet, il est possible de choisir une organisation de travail différente, et la plus adaptée possible. L’exemple ci-dessus montre trois types d’organisation : solitaire (une seule personne s’occupe du design system, c’est la personne référente), centralisée (une équipe est dédiée au design system), fédérée (quelques personnes de chaque équipe se chargent du design system). Mais il est également possible de les mixer entre elles !

Cela étant dit, l’organisation autour du design system sera souvent évolutive, tout comme l’équipe qui compose le projet, et les changements se feront naturellement d’un commun accord entre les collaborateurs.

Step #3 : l’inventaire

Après avoir déterminé la / les personnes qui prendront en charge le projet, il est impératif de faire un inventaire des composants de notre produit. Un audit de toutes les pages du site, dans toutes les résolutions, est nécéssaire. Il existe deux façons de procéder, la première consiste à relever les incohérences puis les regrouper afin de créer des composants homogènes, la seconde est de relever les composants bons et cohérents dans chaque parcours. Il suffit ensuite de les organiser, comme nous l’explique Andrea Hock dans “The what, how and why of design systems” : « Group them into different categories, such as navigations, dropdowns, headers, etc. Then group those into subcategories, such as button statuses ».

Il existe aussi des outils pour crawler toutes vos pages automatiquement. Wexperience l’explique d’ailleurs dans cette conférence, retransmise sur YouTube.

Après cet inventaire, on réunit donc ces composants dans un document, et on y ajoute les liens de téléchargement, les codes couleurs ou encore le dev associé. Le document peut être très simple, il est même possible de commencer avec un google doc, le tout est de garder en tête qu’il va évoluer. Votre première version devra être très simple, avec les composants les plus basiques.

Autre point primordiale pour un design system, garder un langage clair et compris par tous, c’est-à-dire que chaque personne de l’équipe doit pouvoir s’y retrouver (un développeur, un designer, mais aussi une personne chargée de la communication ou du marketing par exemple, qui peut éventuellement avoir besoin de certaines informations présentes dans le design system. Donc des personnes n’ayant potentiellement aucune connaissance en langages technologiques).

Step #4 : pensez à long terme

Enfin, pensez à la longévité du design system. En effet, des composants simples et facilement adaptables et réutilisables permettront de gagner du temps. Les technologies évoluent de plus en plus vite, il paraît donc fondamental de penser au design sur le long terme. Tout cela dans le but de garder une cohérence dans le parcours.

Classifiez et organisez vos éléments, documentez les et créez votre premier design system. Sur l'outil de votre choix, le plus simple pour vous et votre équipe. ce sera votre première version !

Next step –> comment mesurer l’efficacité du design system !

Ressources :

https://uxplanet.org/design-system-imposter-syndrome-10809da49f5f

https://xd.adobe.com/ideas/principles/design-systems/andrea-hock-design-systems-what-how-why/

https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

‍

‍

‍

Pour en savoir plus, j'ai créé un ebook avec tout ce qu'il y a à savoir sur le sujet ! N'hésite pas à aller voir si tu cherches un document contenant les fondations sur ce sujet. Il est disponible ici !