Qu'est ce qu'un Design System ?

La conception de Design System est au coeur de mon travail depuis plusieurs mois. Et, à en croire les nombreuses discussions que je vois ou j’entends, je ne suis clairement pas la seule à me pencher sur le sujet ! Pour ce premier article sur le sujet, j’ai pensé intéressant de commencer par le commencement : Qu'est ce qu'un Design System ?

Qu’est-ce qu’un Design System ?

Il n’existe pas de définition “officielle” du design system, mais à mesure que se propage cet outil, une constante se dessine :

Un Design System est une collection de composants réutilisables et interchangeables, régis par des principes UX et graphiques clairs, formant un langage commun.

Le Design System est au coeur du processus de conception puisqu’il se veut le point de contact unique entre les designers et les développeurs de produits et services numériques. C'est un éco-système proposant une approche systémique et cohérente du design et du développement — qui comprend, entre autre, des guidelines, des principes designs UI et UX, et du code, surtout !

L’importance du Design System

Une problématique pas si nouvelle que cela

Malgré la tendance du moment, les Design System existent depuis longtemps. Du moins, la systématisation du design n’est pas quelque chose de nouveau. Les chartes graphiques et autre brand guidelines dans le domaine du print, sont en quelque sorte les ancêtres de nos Design Systèmes actuels. Il y a 10-20 ans, les problématiques étaient différentes et surtout le digital n’était pas aussi répandu qu’aujourd’hui. Pour autant, la création d’une identité visuelle était la mise en place d'un langage graphique réutilisable sur de multiples supports, permettant ainsi une cohérence visuelle et une identité de marque forte.

Aujourd’hui, les marques, les produits et les services sont de plus en plus digital, (voir parfois uniquement en ligne), et les méthodes de travail pour nous, designers et développeurs, ont grandement étaient bouleversées par l’avènement du numérique et des nombreuses évolutions technologiques. La systématisation du design ces dernières années est devenue une problématique centrale dans nos processus de conception.

Mais, pourquoi les Designs Systèmes sont-ils si populaires tout à coup ?

Il y a plusieurs raisons selon moi :

• Tout d’abord, la volonté d'une expérience utilisateur unifiée sur toutes les plateformes – Il y a désormais autant d’expériences et parcours utilisateurs qu’il y a de points de contacts avec les utilisateurs. Les entreprises réalisent de plus en plus l’importance d’une expérience intégrée et continue entre chaque plateforme - Et cela passe par l’utilisation d’un langage visuel cohérent et partagé entre toutes ces plateformes ; la cohérence et la prédictibilité étant deux aspects clés dans le Product Design.
• Ensuite, la volonté aussi de “scaler" le design et le développement — Les méthodes “traditionnelles” de conception ne sont plus nécessairement en adéquation avec la volonté de croissance des entreprises. Il faut pouvoir faire grandir un produit sans détériorer la qualité de l’expérience utilisateur proposée, ni même la qualité du code écrit.
• Enfin, le développement des frameworks basés sur des bibliothèques de composants — Les évolutions technologiques ont permis la mise en place d’architectures web basées sur des composants, de même que les designers ont vu leurs méthodes de travail elles-aussi bouleversées par l’arrivée des librairies de symboles et du concept de UI Kit.

On comprend alors très bien pourquoi les Design System semble prendre tout leur sens aujourd’hui et ils semblent êtres la solution à “tous nos problèmes” !

Concevoir un design System

Concrètement, de quoi est fait un Design System ?

Tout d’abord, mettons les choses au clair.

• Un Design System n’est pas un UI Kit.
• Un Design System n’est pas une bibliothèque de composants React.
• Un Design System n’est pas une charte graphique ou un brandbook.
• C’est tout à la fois et bien plus que ça.

Un Design system se compose d’éléments tangibles et intangibles, mélanges des trois piliers de la conception de produits et de services numériques: le design, le développement et la stratégie.

Le Design :

Un Design System définit et décrit le language visuel d’un produit digital dans son ensemble. À quoi ressemble un produit et quels sont ses caractéristiques principales ? La typographie, les couleurs, l’iconographie etc… Mais aussi, le contenu. Quel type de texte ? Quelles images ? Et enfin, comment cela fonctionne-t-il ensemble ? Quelles sont les règles d’utilisations ? Quelles sont les principes UX qui raisonnent ces choix visuels ?

Cela se traduit souvent par la mise en place d’une bibliothèque partagée et régulièrement mise à jour de composants et de patterns dans Sketch ou Figma, par exemple.

Le Développement :

Une bibliothèque de composant dans Sketch ne serait rien sans son cousin en code. Grâce aux différents framework Javascript, un Design System est aussi un ensemble de composants en code, qui, à l’instar de pièces de Légo, s’assemblent pour créer des interfaces. Chaque module peut-être isolé tout en restant fonctionnel, ce qui permet de développer et de documenter une interface durable et testable en tout point.

L’idée n’est donc pas de recréer à chaque fois mais bien de réutiliser !

La Stratégie :

Enfin, et c’est souvent la partie la plus abstraite, un Design System décrit aussi des éléments tels que les valeurs d’une marque, les façons de travailler au sein des équipes, la mission d’un produit, un état d’esprit etc... Bref, toute la stratégie qui gravite autour d'une plateforme de marque. On pourrait même imaginer y intégrer une partie plus analytique et "growth" ou bien même des processus de recherches utilisateurs.

--

À cela, s’ajoutent deux caractéristiques intrinsèques aux Design System :

La documentation :

Toutes les guidelines, recommandations UX, explications détaillées de chaque composant, bref, tous les éléments précédemment cités doivent être tous centralisées dans une documentation partagée et facilement accessible, qui répond au concept de Single Source of Truth. Cette documentation est souvent accessible en ligne, parfois même ouverte au public et surtout, elle est mise à jour très régulièrement à mesure que le ou les produits reliés évoluent eux aussi.

Les gens :

Enfin, un Design System ne peut exister fondamentalement seul, et la mise en place d’un modèle de “gouvernance” pour contribuer à son évolution est aussi important que le Design system en lui-même. Un Design System est avant tout fait de personnes, dont les rôles ont été définis en amont. Il y a des “end-user” du produit, mais aussi les utilisateurs du design système, les acteurs et contributeurs, et même les Stakeholders. En faite, un Design Systèm n’est pas un projet mais est bien un produit au service d’un produit. Et comme tout produit, il est voué à évoluer s’il veut continuer à survivre et à se développer.

Finalement, c’est avant tout un état d’esprit, une vision commune auquel chaque personne — designers, développeurs, PO — doit adhérer et contribuer.

Un Design System est un peu comme l’étoile du berger, celle qui nous guide à travers les méandres de la conception et de développement de produits.

Les bénéfices du Design System

Pourquoi devrions-nous investir dans un Design Systèm ?

Si vous n’êtes pas encore totalement convaincus des avantages qu’offrent le Design System ou bien, si vous êtes, au contraire, en pleine mission pour convaincre vos managers d’investir du temps (et de l’argent) dans un tel projet, voici une petite liste non exhaustive de bénéfices qui peuvent leur être attribuables :

Des interfaces cohérentes

Grace à l’utilisation de bibliothèque de composants réutilisables, la volonté d’une expérience utilisateur unifiée sur toutes les plateformes est rendue possible grâce à l’implémentation d’un Design System au sein des équipes d’un même produit, peu importe sa complexité.

Une dette design réduite

Il en résulte des interfaces plus faciles à maintenir et à évoluer. À noté qu'il en est de même pour le développement.

Une expérience utilisateur delightful

Le Design System prône la cohérence pour améliorer l’utilisabilité des interfaces de produit. L’expérience utilisateur n’en est que renforcée et réussie.

Un gain de temps considérable ...

Réutilisable, répétable sont les maitre-mots des design system. Plus vite est-il possible de créer et prototyper une interface, plus vite il est possible de la tester, plus vite est-elle implémentée.

... Et donc, un gain d’argent

En fin de compte, rien n’est fait gratuitement, et la caractéristique profitable d’un produit est fondamentale pour sa survie. La scalabilité des Design System vont en ce sens, en permettent le déploiement de nouvelles features rapidement, sans pour autant détériorer la qualité du produit.

Une meilleure collaboration d'équipe

Enfin, et surtout, le Design System a vocation de réduire les cloisons entre les acteurs d’un projet et donc de renforcer l’esprit d’équipe. La communication et la collaboration entre designer et développeur est facilitée. En outre, l’intégration de nouvelle personne est beaucoup moins chaotique puisque toutes les informations sont centralisées et “prêtes à l’emploi”.

Cette collaboration permet ainsi aux équipes un meilleur partage des connaissances et apprentissages, d'éviter le double-travail et de se concentrer davantage sur les problèmes d'expérience utilisateur (UX) plutôt que sur les problèmes d'interface utilisateur (UI).

Quelques références de Design System

Pour finir, voici une sélection personnelle de Design Systems matures que je trouve soit très complets, très bien réalisés ou bien qui sont souvent de très bonnes références à consulter régulièrement. N'oublions pas en revanche que chaque produit est unique, et donc chaque design system aussi. Certains points seront plus importants chez l'un que chez l'autre. Il ne s'agit donc pas de recopier mais bien de s'inspirer pour comprendre comment structurer et communiquer son Design System.

Material Design

Material Design de Google. Sans doute le design system le plus connu, je trouve toujours très pertinent la manière dont Google documente son framework design.

Atlassian

Atlassian est l'un des design system les plus complets et aboutis puisqu'il englobe Produit, Brand & Marketing. C'est un idéal, très exhaustif, qui demande du temps et beaucoup de collaboration pour l'atteindre.

Spectrum

Spectrum de Adobe est l'un de mes favoris. D'une part, je le trouve très bien structuré et conçu. D'autre part, j'aime beaucoup leur approche de "design scale" pour décrire les différente usages selon les device. Une bonne référence lorsque le produit est à la fois sur web, mobile et/ou une app.

Enfin, pour d'autres références, UXPin repertorie un très grand nombres sur sa plateforme Adele.

---

En résumé, un Design System, se compose de trois grands pilliers : design, développement et documentation. Il est souvent très facile de construire le premier, la partie Design étant sûrement la plus rapide en matière d'éxecution. Le second peut être plus complèxe à mettre en place car le temps de développement alouer aux développeurs n'est parfois pas suffisant pour concevoir des composants de manière plus abstraite. En le troisième pillier, la documentation, est souvent celui qui demande le plus d'investissement et surtout qui doit être maintenu regulième !

N'oublions pas qu'un Design System est un produit au service d'un autre produit. Et, comme tous les produits, cela veut dire qu'il possède son propre backlog, sa roadmap et son équipe ! Un Design System n'est pas un projet ayant une fin en soi, mais bien un outil qui évolue, change et grandi au fil du temps.

---

J'espère que cet article vous aura éclairé davatange sur la notion de Design System.Je suis persuadée que les Design System vont avoir une places de plus en plus centrale dans notre métier. Nous n'en sommes qu'au début !

Et vous, qu'en pensez-vous ?