En 2014, Google sort le Material Design, prémisse du design system.

En 2016, je participais à une conférence de Brad Frost dans laquelle il introduisait son Atomic Design.  A ce moment là, j’étais convaincu qu’à l’avenir, toutes les marques et entreprises auraient un design system, même basique. Et pourtant, nous voilà 3 ans plus tard, et il m’arrive encore de discuter avec des équipes projet qui ne voient pas l’intérêt de cet outil et ni en quoi il diffère d’une charte graphique, d’un styleguide ou d’une librairie de composants.  

J’ai eu envie d'écrire cet article car j’aimerai mettre en avant l'importance de l'implémentation du design system au sein d'une entreprise.

C'est quoi un design system ?

Un design system est un ensemble de composants réutilisables, guidés par des normes claires, qui peuvent être assemblés pour créer plusieurs applications.

• Les normes : Elles définissent la structure des fichiers, les conventions de nommage, l’utilisation des composants ou encore les interactions. Elles peuvent s'appliquer à tous les métiers.
• Les composants : Les composants sont des parties réutilisables dans votre système et servent de blocs de construction à l'interface de votre application. Un composant peut être inclu dans un autre composant.

Voici quelques design systems que j'apprécie :

• Uber
• Polaris de Shopify
• Atlassian
• Carbon Desing System de IBM
• Audi
• U.S Web Design System : Ce n'est pas le plus complet, mais je trouve intéressant de voir qu'un gouvernement ait mis en place un design system pour améliorer l'UX de son public.

Design System de SAP

Dans son Design System, Uber donne des principes à respecter pour les casting photo. Les sujets ne doivent pas ressembler à des mannequins; Ils doivent transmettre une forte personnalité et refléter la diversité dans leur région.

Finalement, quelle est la différence entre un design system, un styleguide ou une librairie de composants ?

Un design system est bien plus qu’un ensemble de composants que vous utilisez pour créer vos applications métiers.  Pour faire simple, le design system comprends tous les aspects du styleguide, du language visuel et des libraires. Il comprend un guide pour que tous les métiers puissent utiliser des éléments valides.

Voici un petit exemple pour imager mon propos  :

Nous plaçons une boite contenant 100 briques Lego® devant 1 personne et lui demandons de créer une voiture uniquement avec ces Lego®.

Nous réitérons l'expérience avec une autre personne.

Puis nous comparons les 2 voitures. Il est sûr à 100% que ces 2 personnes auront créé une voiture différente.

Pourtant elles avaient toutes les deux les mêmes composants à disposition (100 briques Lego®).

Maintenant, nous faisons le même test en ajoutant une documentation.  Celle-ci va préciser que les pneus doivent être bleus et les phares jaunes. Les feux arrières peuvent être rouges pour indiquer que la voiture freine.

Si la documentation est claire et si les 2 personnes la comprennent, alors nous sommes sûrs que la voiture aura des pneus bleus et des phares avant jaunes. Nous saurons même si la voiture est en train de freiner ou non.  La boite de briques Lego, accompagnée de nos instructions et du guide d’utilisation forment un Design System.  

Ce dernier est perfectible puisque nos deux protagonistes pourraient gagner du temps avec plus d’informations (la taille d’un pneu, le type de brique nécessaire pour un phare, la couleur de la voiture...).

Les valeurs ajoutées du design system

En 8 ans d'expérience en tant que chef de projets, j'ai côtoyé à la fois des équipes qui n'étaient pas du tout familières avec l'outil, et d’autres qui l'avaient complètement intégré. Le design system leur ont permis de fournir des produits cohérents, pragmatiques et de qualité.

Un design scalable

En integrant un design system, on pourra proposer un accès à une source de directives et bonnes pratiques validées.

Qu'une équipe grandisse ou soit remaniée, tout le monde est sur la même longueur d’onde. Les différents styles graphiques restent cohérents, le travail en équipe est alors agréable et intelligent.

Un Design homogène / cohérent

Le design system permet d’avoir une interface prévisible et plus facile à comprendre. C’est un plus pour les utilisateurs et également pour les développeurs. Ces derniers peuvent ainsi se concentrer sur la production d’une fonctionnalité et sa performance sans se soucier du style.

Une conception graphique rapide

Lorsqu'une équipe travaille avec un design system, le lancement d’un nouveau produit devient assez rapide. Le designer pourra prototyper plusieurs variantes de composants et les retours de son équipe seront plus concrets. Il pourra réaliser des tests, analyser des comportements utilisateurs et de ce fait, proposer une interface plus qualitative.

Des évolutions faciles à mettre en place

Si le style d’une interface doit évoluer, le design system permet de réduire considérablement l’effort des développeurs et intégrateurs. Les itérations sont rapides et aucun conflit CSS ou Javascript n'est causé. L’équipe peut passer plus de temps sur l’expérimentation d’un produit plutôt que sur sa conception.

Les idées reçues du design system

Malgré tous ses avantages, le design system ne fait pas toujours l'unanimité dans une équipe. Certains membres pourraient craindre d'avoir trop de restrictions, trop peu de travail, ou une perte de créativité.

L'ajout d'une nouvelle fonctionnalité peut affecter plusieurs composants. Prendre en considération tous les éléments qui en sont impactés est très intéressant et relève de beaucoup de créativité.

En effet lors de la conception graphique, notre équipe sera amenée à créer des composants qui devront parfaitement s'adapter au design system. Les designers auront à prendre en compte l'existant et à faire en sorte que le résultat soit homogène et fonctionnels dans plusieurs situations.

Imaginez que votre nouvelle application nécessite une multi-search qui n'existe pas encore dans votre design system. Le designer va commencer par faire des recherches sur l'usage de ce composant (qui sont les utilisateurs ? Comment et pourquoi ils utilisent la multi-search ?). Il proposera un design cohérent avec d'autres composants. Il testera le bon fonctionnement du composant dans diverses situations. Et il le documentera pour que les développeurs puissent l'intégrer facilement.

En conclusion, pourquoi mettre en place un design system ?

Les méthodologies de développement ou d’ingénierie ont évoluées rapidement. Le design system est un moyen d'élever les méthodes de conception graphique à la même hauteur que celles du développement web. Il apporte des avantages considérables. En voici 4 qui justifient pourquoi mettre en place un design system :

• Il permet de créer une cohésion au sein d’une équipe.
• Il améliore nettement l’expérience utilisateur de vos outils.
• Il renforce l’image de l’entreprise. A titre d’exemple, un visuel bichrome est immédiatement associé à Spotify. Cela est dû au respect du design system sur toutes les application de la marque.
• Le coût de mise en place de nouvelles features est nettement plus faible avec un design system.