Travailler de façon cohérente et organisée grâce au Design system

Vous vous en doutez, de nombreuses personnes peuvent travailler sur votre produit digital tout au long de son cycle de vie. Mais comment peut-on s’assurer que notre site web ,notre application, et leurs héritiers présentent une expérience utilisateur et un design cohérent, indépendamment des personnes qui se sont succédées pour développer et faire vivre votre projet ? C’est tout l’enjeu du design system, un outil collaboratif qui sert à la fois de référentiel et de guide à la création de votre produit digital. 

Qu’est-ce qu’un Design system ? 

Le Design system est un référentiel qui regroupe tous les composants permettant de construire les interfaces d’un projet digital. Ces éléments sont partagés avec toutes les personnes impliquées dans le développement de votre produit. Le but d’un Design system est triple : 

• Il permet de conserver la cohérence de votre produit à travers ses différentes évolutions et mises à jour. En effet, le Design system référence l’intégralité des éléments composant votre produit, avec leurs règles d’usages et leur signification. Pour schématiser, il s’agit de la combinaison d’une charte graphique, d’une bibliothèques d’éléments, d’une charte rédactionnelle, d’un guide de style et d’un branding kit en un seul espace. 
• Il permet aussi d’aligner tous les membres d’une équipe de production autour d’un objectif commun. Il s’agit d’un support sur l’univers du projet qui définit les éléments qui structurent à la fois le fond et la forme du produit, le tout pour aider les intervenants sur un projet à mieux communiquer entre eux. De plus, il s’agit d’un outil collaboratif qui évolue à mesure que votre produit digital évolue. Chacun peut enrichir le design system d’un produit avec ses éléments, une fois ces derniers validés par le commanditaire du produit. 
• Enfin, il fait gagner en efficacité toute une équipe qui va capitaliser sur l’existant pour gagner en productivité dans les tâches quotidienne. Le temps libéré peut par conséquent être réalloué à d’autres activités à plus forte valeur ajoutée. 

Que trouve-t-on exactement dans un Design system ? 

On trouve dans un Design system tout ce dont une équipe de production a besoin pour construire un produit digital, en dehors des outils techniques et de son savoir-faire ! 

Plaisanterie mise à part, un Design system comprend au minimum :

• Une bibliothèque de composants design accompagnés de leur documentation et de modèles de fonctionnement;
• Un ensemble de normes pour les utiliser ;
• Un espace de connaissance et de partage de l’information, pour faciliter la collaboration entre les différents membres de l’équipe de production. 

Concrètement, ce sont les palettes de couleurs de votre produit, les logos, les banques d’iconographie, les grilles de structure, les typographies utilisées, des composants (boutons, design de formulaires…), des design d’interfaces spécifiques… avec leurs règles d’utilisation et des exemples de code à copier directement dans le code source du produit digital. 

En plus de cette base design et technique, le Design system intègre également : 

• Des éléments pour contextualiser le produit et sa valeur ajoutée: les objectifs, la marque à laquelle il appartient, ses valeurs et principes… Ces derniers se situent souvent dans la catégorie Fondamentaux (Foundations en anglais) et rappellent en quelques lignes ou pages l’intérêt du produit digital pour l’entreprise qui le construit ;
• Une charte éditoriale (ton de la marque, vocabulaire employé ou proscrit…), pour les créateurs de contenus rédactionnels et vidéo ; 

Et d’éventuels contenus annexes qui peuvent aider les équipes de production à améliorer leur utilisation du Design system.

Comment est né le concept de Design system ? 

Le concept de Design system est mentionné pour la première fois par le designer Brad Frost, dans son livre intitulé Atomic Design . Dans ce livre, Frost imagine une méthode de design inspiré du monde vivant qui, à partir d’atomes identiques, va créer des êtres vivants radicalement différents. 

L’Atomic design consiste à découper le design d’une interface en petites unités, réutilisables et ageançables de multiples façons pour créer de nouvelles interfaces. Par exemple, les micro-animations, les couleurs, les textes sont considérés des « atomes ». 

En combinant ces éléments basiques, on obtient des « molécules », des groupes d’éléments comme des boutons CTA, ou des barres de recherche par exemple.

L’agencement de différentes « molécules » permet d’obtenir des « organismes », un composant d’interface comme un header par exemple…

…et ainsi de suite, jusqu’à la construction de mises en pages complètes pour l’intégralité du produit. 

Chaque « atome » est catégorisé et répertorié dans le Design System du produit, avec ses règles d’utilisation, et les combinaisons déjà réalisées. Et comme dans la nature, si un « atome » ou une « molécule » est modifié, l’ensemble des éléments dans lesquels ils sont utilisés sera également modifié. C’est pourquoi l’utilisation d’un Design system demande une certaine rigueur de la part des intervenants qui y ont accès et qui vont l’alimenter. 

Quels sont les avantages et les inconvénients d’un Design System ?

Le gain d’efficacité dans la collaboration entre les différentes parties prenantes est l’avantage principal apporté par l’utilisation d’un Design system. Tous les collaborateurs partage une seule et même « boite à outils » dynamique, et mise à jour en temps réel. Cela génère une meilleure communication avec les équipes de production qui sont toutes au même niveau d’information (designers et développeurs), des prises de décision plus rapides, et donc, une meilleure productivité. 

 En outre, l’utilisation d’un Design System permet de garantir la cohérence de l’expérience utilisateur du produit sur le long terme, indépendamment des personnes qui interviennent sur le projet. Il facilite le onboarding de nouveaux intervenants sur le projet, et permet de ne pas perdre « l’historique » de ce dernier, à chaque évolution de l’équipe. 

Toutefois, une telle organisation, avec son lot de de consignes très précises, peut être ressentie comme une restriction de leur créativité par les Designers, les Product Owners, les Développeurs, les services Marketing, Communication et les Designers. En effet, une simple modification d’une fonctionnalité ou d’un élément graphique peut avoir un impact fort sur l’ensemble des composants du Design system. De fait, les marges de manœuvre peuvent paraître minces au premier abord pour les personnes qui n’ont pas l’habitude de travailler avec ce cadre.

Est-ce que tous les projets digitaux ont un Design system ? 

Pas nécessairement. Dans les faits, cela dépend de l’ampleur du projet et du nombre de personnes qui interviennent dans la production, car construire un Design cela demande un peu de temps et de nombreux ateliers de conception dédiés à cet outil.

Un Design system permet de gagner en temps et en efficacité dans un projet sur le long terme. Néanmoins, il impose aussi aux équipes « d’apprendre » de nouvelles façons de concevoir un produit et de collaborer. De plus, l’utilisation d’un Design system requiert un petit peu de travail additionnel de la part des personnes qui vont l’alimenter. Il ne s’agit pas uniquement de créer un nouvel élément, mais également d’en documenter l’utilisation et éventuellement le faire valider avant de le rendre accessible à l’ensemble des équipes. 

C’est pourquoi le Design system est souvent réservé aux projets au long cours, avec potentiellement de nombreux intervenants en conception, comme en production.