Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

‍

Le sujet n’est pas nouveau, certes. Mais il est l’objet de toutes nos sollicitations, de toutes nos conversations (ou presque). Les choses s’accélèrent, et le Design System semble être au coeur de toutes les convoitises - il était temps que nous fassions le point sur cet outil que tous s’arrachent, mais dont le contenu et les objectifs restent obscurs pour la grande majorité.

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

Il n’existe pas de définition “officielle” du design system, mais à mesure que se propage cet outil, une constante se dessine : le design system s’apparente à une bibliothèque de principes UX, d’éléments d’interfaces visuelles, de composants au code réutilisable. Accessible en ligne (donc facile à diffuser et à maintenir), il se veut le point de contact unique pour les designers et les développeurs de produits et services numériques.

Cet écosystème cohérent a donc pour ambition de garantir d’une part une meilleure expérience pour les utilisateurs et d’autre part de faciliter le travail des concepteurs : ces derniers peuvent en quelque sorte venir piocher des composants prêts à être utilisés et écrits dans un langage commun.

Avec une telle définition, on est vite tenté de penser “cela ne me concerne pas : je ne suis ni designer, ni développeur” (Si d’aventure vous l’êtes, mon collègue UX Designer a écrit un article pour vous)

Laissez-moi vous convaincre que là n’est pas la question. Quel que soit votre métier, le Design System est LE produit sur lequel investir pour garantir des expériences de qualité et permettre le passage à l’échelle du design. Le tout dans une approche de conception plus durable.

Vous vous êtes peut-être déjà posé l’une de ces questions ou vécu l’une de ces situations :

• "Mes expériences sont compliquées, décousues ; je perds des utilisateurs en cours de parcours. Comment changer la donne sur l’ensemble des parcours ?”
• “J’ai de plus en plus de points de contacts avec mes utilisateurs, qui sont tous conçus par des équipes différentes, qui font appel eux-même à des acteurs à la culture et avec des approches diverses de conception. Comment faire en sorte que cette complexité ne se ressente pas dans les expériences délivrées ?”
• “Je n’arrive pas à recruter, je n’ai jamais assez de designers et de développeurs pour suivre le développement des projets et les roadmap ambitieuses.”

La solution ? Vous vous en doutez : concevoir un Design System.

Car le Design System est l’une des réponses - probablement la meilleure - aux nouveaux enjeux du design : la cohérence, l’organisation et la montée en compétences des équipes, l’optimisation des coûts et du time to market. Aucun doute : le design, dont vous avez fait un levier de transformation, doit s’adapter et entrer dans une logique d’industrialisation.

Le Design System : à quoi ça sert ? Les principaux bénéfices

Nous avons identifié 3 raisons principales pour lesquelles il est grand temps pour la plupart des entreprises de lancer un Design System :

1. Il sert de cadre de conception pour des expériences plus cohérentes de bout en bout et un langage unifié quel que soit le support - et il n’a jamais été aussi important de veiller sur cette cohérence
2. Il est un formidable moyen d’engager les équipes sur une mission de passage à l’échelle de l’approche centrée utilisateur
3. Enfin, il est un démonstrateur qui vous permettra de rayonner (en interne et en externe), en apportant la preuve tangible de votre approche de transformation par le design

1. Un cadre de conception

(vs. Une charte graphique)

Au départ il y a la charte graphique, un document PDF dense qui définit les grandes règles d’utilisation de la marque et de son identité graphique :

• Peu interactif souvent complètement statique, il est naturellement peu consulté par les équipes digitales. Au mieux, il est survolé.
• Orienté print, les règles ne sont pas adaptées à la conception d’expériences numériques, laissant la voix libre à l’interprétation par les designers UX-UI.

Résultat ? Au mieux, la marque est reconnaissable d’un produit ou service numériques à l’autre. Au pire, et bien souvent, de nombreuses incohérences et traitements visuels différents viennent polluer les interactions.

L’arrivée de Bootstrap en 2010 a amorcé un virage complet par la proposition d’un outil réellement centré/orienté concepteurs : co-conçu par le designer Mark Otto et le développeur Jacob Thornton de Twitter, l’outil prenait la forme d’une bibliothèque unique d’éléments visuels et interactifs au code “clé en main”, suffisamment modulable pour répondre à des besoins divers. Il est devenu en quelques années un standard, placé sous license open source et utilisé dans la conception de tout type d’expériences.

Chaque équipe de conception s’est alors mise à développer son propre “UI Kit” plutôt à l’échelle d’un projet.

Le Design System répond à ce même besoin, mais s’inscrit dans une dimension plus globale et transverse : il rassemble des composants et des outils utilisables “clés en main”. Et, quel que soit le support (web, mobile, sms, print…) et la cible utilisateurs (B2B; B2C,...), ces éléments sont suffisamment flexibles pour s’adapter à tout contexte et utiles pour toutes les fonctionnalités de bases.

Ainsi, il permet de gagner du temps et de garantir la cohérence à moindre effort permettant aux designers et développeurs de se concentrer sur les tâches à plus forte valeur ajoutée et laisser libre court à leur créativité : des usages nouveaux à adresser, de nouvelles fonctionnalités à développer.

2. Un moyen d’engager les équipes : le design system est collaboratif et évolutif.

(vs. une liste d’outils imposée, immuable et qui risque d’être rapidement obsolète)

Le Design System définit donc l’ensemble des règles de conception et fournit les outils de base nécessaires à tout projet de conception, permettant un gain de temps considérable pour les équipes : un fichier Sketch pour les designers avec tous les composants et règles pour concevoir des écrans, une bibliothèque pour les développeurs, etc.

S’il est un investissement au départ (il va mobiliser une équipe pour réaliser la première version), il se révèle vite être un formidable outil pour libérer vos équipes de conception.

"By focusing on the methods of working across disciplines, building better tools, and creating a unified system, we can use our time to apply creativity to solve bigger challenges" Alex Schleifer, VP Design, AirBnb

Au-delà de la hausse de productivité (et de créativité), l’un des principaux bénéfices observés est la montée en compétences des équipes : non seulement les expériences montent en gamme, les designers et développeurs eux aussi “s’améliorent” grâce aux nombreux outils mis à disposition. Le Design System fédère autour de lui une véritable communauté d’experts qui partagent leurs bonnes pratiques et se tirent mutuellement vers le haut. L’utilisation du Design System demande rigueur, exigence et de véritablement comprendre et savoir utiliser ce socle de base. Mais grâce à lui, les équipes ont enfin le moyen de le faire.

De plus - et surtout - les équipes de designers et développeurs sont invités à contribuer : Après utilisation et appropriation de l’outil, leur feedback est précieux. En tant que principaux utilisateurs ils sont les premiers concernés. Cet outil est le leur.

3. Un démonstrateur, la preuve tangible de votre approche design

Surtout ne vous contentez pas de faire du Design System un outil réservé à vos concepteurs. Il s’agit aussi d’un support de communication très puissant, puisqu’il se fait la vitrine de la vision design de l’entreprise.

Et elles sont nombreuses à l’avoir compris : Watson d’IBM avec Carbon, Google avec Material Design mais aussi Axa ou la BBC ou le pionnier GOV.UK, dont l’un des principes de conception est “ouvert par défaut”, naturellement appliqué à son Design System. La liste est longue et ne cesse de se rallonger : la large diffusion de ces Design Systems brandés et marketés comme un véritable produit deviennent un élément différenciant pour l’entreprise, et une preuve tangible de son engagement design et de son positionnement centré utilisateur. Tout le monde le dit - il s’agit ici de le démontrer.

Ouvrir et diffuser son Design System est le meilleur moyen de garantir la qualité, de conserver un niveau d’exigence et de se confronter à ses pairs pour monter en gamme.

Une fois sorti, soyez-en fiers. Non seulement pour exposer votre travail et votre vision, mais pour permettre à vos équipes de rayonner et de partager votre fierté.

Comment se lancer ?

Pour vous lancer, quatre premières étapes à suivre pour vous engager dans la bonne direction :

1. Il s’agit dans un premier temps de réaliser un diagnostic de votre ou vos expérience(s) actuelle(s), de l’ensemble de vos points de contacts digitaux, des ressources à disposition. L’objectif est ici de commencer le référentiel commun, d’identifier les fondamentaux sur lesquels s’appuyer
2. En parallèle, des interviews sont à mener avec les concepteurs pour comprendre leurs besoins
3. Troisième étape : constituer une équipe pour la conception, la meilleure méthode étant un sprint en chambre pour faire des choix et accélérer. En parallèle débute la réflexion sur le contenant : le site qui va accueillir votre Design System et permettre la diffusion, le partage et les évolutions continues.
4. Et finalement choisir un ou deux sites pilotes pour le tester, récolter du feedback et mettre à jour la roadmap de développement.

Les challenges qui vous attendent sont nombreux. La première version partagée en ligne est une étape importante - mais ce n’est que le début du travail. Le plus important reste de l’installer durablement.

Pour ce faire, il s’agit de :

• Mesurer l’impact à la fois sur les équipes et sur les produits conçus
• Mettre en place une organisation qui va faire vivre le Design System : constituer une équipe ou a minima désigner un garant sur le long-terme. On parle ici du DesignerOps : fascinés par la façon dont le design fonctionne, leur rôle est de s’investir pour faire en sorte que le design passe à l’échelle, comme l’explique dans cet article Adrian Cleave au sujet d’AirBnb

En conclusion :

Le Design System est à considérer comme un produit avec 3 ingrédients/caractéristiques clés :

• vivant : contrairement à une charte graphique, il est conçu pour s’adapter facilement au contexte et au besoin de l’entreprise et de ses utilisateurs, en constante évolution.
• universel : il s’appuie sur des standards d’expériences et des bonnes pratiques éprouvés donc facile à prendre en main par tous les types d’utilisateurs, quelque soit leur maturité technologique et leur contexte d’utilisation et vous garantissant in fine une montée en gamme des expériences proposées
• agnostique : C’est le design (les besoins des concepteurs pour construire des expériences) qui drive la conception du Design System. Et, pour ne pas contraindre le design et être diffusé largement, les choix techno doivent être réaliser pour permettre une utilisation facile par les développeurs et une adaptation à tous les contextes (Technologies, devices, etc.).