Pourquoi adopter un Design System

Le Design System, qu’est-ce que c’est ?

On fait souvent l’erreur de dire que le Design System est une Librairie de composants, mais en réalité la librairie de composants n’est qu’une partie de ce qu’on appelle un Design System.

Most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.Emmet Connolly - Director of product design at Intercom

Understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding.Marco Suarez,Product designer at InVision

Design systems are always evolving, and the way you share and encourage adoption of new iterations will evolve along the way as well.Diana Mounter, design systems manager at GitHub

Comme le soulignent ces trois citations, un Design System ne se limite pas à une librairie de composants agnostiques, c’est en réalité une collection de composants réutilisables, guidés par des normes, qui peuvent être assemblés ensemble dans diverses applications tout en maintenant l’expérience utilisateur de votre marque.C’est également le langage commun entre les différents corps de métier (technique, design, produit …) et c’est aussi le fruit de réflexions communes et en phase avec les valeurs qui animent le groupe et le projet, car pour être efficace et adopté par tous, il doit faire l’objet d’un consensus.

Et donc concrètement, je dois retrouver quoi dans mon Design System ?

Dans la majorité des cas, il se présentera sous forme d’une plateforme ou d’un site internet disponible pour l’ensemble des contributeurs du projet et reprendra à minima les éléments suivants.

Les valeurs de l’organisation

Le Design System doit avant tout servir à l’expérience utilisateur. Même s’il est un outil pour les designers et développeurs, il doit être en phase avec le positionnement de l’organisation vis-à-vis de ses clients. Pour cela ses contributeurs, doivent s’imprégner de la culture de l’entreprise, de son positionnement et de ses spécificités.

En premier lieu, le Design System devra donc reprendre les valeurs qui animent votre organisation, sa personnalité, son histoire …

Règles de contenu

Découle de cette culture d’entreprise et de son positionnement, le ton qui devra être adopté pour présenter votre organisation, la manière de parler aux utilisateurs ainsi que les règles de formatage des dates, abréviation, ponctuation….

Guidelines design

Naturellement le Design System devra regrouper toutes les \“règles visuelles\”, on y retrouvera les règles d’espacement, de dimensionnement, de structuration, les palettes de couleurs, les typographies, les icônes …

Librairie de composants

Comme cité au dessus, il se composera également d’une librairie de composants, relevant souvent d’une architecture Atomic Design. Cette librairie sera disponible sous forme de composants ‘applicatifs’ à destination des développeurs, et de composants ‘design’ pour les équipes UI. Ces composants devront être accompagnés d’une documentation, expliquant comment les utiliser, dans quel contexte, quels sont les états qu’ils peuvent prendre…

A quoi ça sert ?

Le Design System répond à la problématique de maintenabilité, de scalabilité du projet et de cohérence en matière d’expérience utilisateurs.

Expérience utilisateur

Il va donc permettre de garantir un parcours client cohérent et une image de marque commune à l’ensemble des supports disponibles pour les utilisateurs.

Optimisation de la vélocité

La documentation centralisée, la librairie de composants pensés pour coller aux différents use-cases, la fluidité d’échanges entre les équipes (qui parleront le même langage), permettront de réduire les temps de développements et donc d’augmenter la vélocité des équipes. Grâce au Design System, les composants sont réutilisables, ce qui permet aux développeurs et aux designers de ne pas perdre de temps sur des taches répétitives.

Qualité

Le temps gagné par les équipes permettra de se consacrer à la qualité du code et des éléments de design, ce qui sera également facilité par l’approche Atomic Design, plus facile à maintenir et qui permet d’éviter les duplications de code.

Délivrer plus et réduire les coûts

Mécaniquement, en augmentant la vélocité, les équipes pourront délivrer plus ce qui aura un impact direct sur le budget du projet.

Pour conclure

Lors de mes dernières expériences, j’ai eu la chance de pouvoir participer à la création de Design Systems pour des projets ambitieux, j’ai donc pu en comprendre les mécanismes, les étapes de mise en place mais aussi les points de vigilances. Je suis convaincu que le Design System est un élément-clé et indispensable pour une organisation et il est important que nous procédions à un travail d’évangélisation pour en le faire adopter par tous.

Je ne pourrais malheureusement pas définir la marche à suivre pour créer un Design System dans cet article, notez cependant que le Design System est un organisme qui vivra en même temps que votre projet et dont la conception dépendra de votre organisation et de sa maturité. Je vous invite à vous inspirer de Design Systems existants, pour cela je vous conseille de visiter ce site.