On aurait tort de penser que le Design System n’est qu’une affaire de design. Cet outil clé de la collaboration des équipes en charge d’un produit digital va bien plus loin que les aspects purement graphiques ou d’utilisabilité. C’est un référentiel commun pour les équipes et plus encore, pour l’entreprise. On refait le Design System dans cet article, sa définition, ses atouts, et quelques conseils pour se lancer…

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

Le Design System est un véritable référentiel pour toutes les équipes impliquées dans la  conception d’un produit : design, développement, Product management… Lors d’un précédent article réalisé suite au dernier Design System Summit, nous vous en proposions une définition claire, avancée par les meilleurs experts du sujet : « c’est un point de contact unique qui regroupe tous les éléments qui vont permettre aux différents acteurs d’un projet de le concevoir, de le réaliser et de le faire évoluer ».

Souvent comparé aux chartes graphique et ergonomique, le Design System intègre ces deux dimensions, mais va beaucoup plus loin. Au-delà de l’identité graphique de l’interface telle que les couleurs, les formes utilisées, le logo, la typo, ce référentiel introduit des notions d’interaction et d’identité de marque, auxquelles viennent s’ajouter les aspects fonctionnels et techniques des composants. En un mot : il s’agit de l’ensemble des principes et règles utiles à la fabrication d’un produit digital ou d’un site web. On peut y retrouver notamment (non exhaustif) :

• un guide de style graphique
• une librairie de composants
• les valeurs et l’identité de marque/du produit
• des bonnes pratiques (d’accessibilité par exemple)
• éventuellement, une charte éditoriale

À l’origine du Design System, l’Atomic Design.

Revenons aux sources pour bien comprendre. Le Design System est né en 2013 des travaux du web designer Brad Frost qui a conçu la méthode de l’Atomic Design. Cette approche vise à rationaliser la conception d’une interface utilisateur en la décomposant en différents éléments standards. L’idée : construire sa page web ou son interface produit à l’aide de ces composants identifiés et réutilisables. Un mode de conception modulaire structuré autour de cinq types de composants clés.

L’atome
Ce sont les éléments de base qui composent l’interface tels que les boutons, champs de saisie, labels, icônes… Ces éléments sont les plus petits dénominateurs communs à l’ensemble des pages ou modules composant le produit ou le site web. 

La molécule

Plusieurs atomes sont assemblés pour former un autre composant : la molécule. Elle a toujours une fonction ou un objectif précis. La barre de navigation ou le champ de recherche, fréquemment utilisés en design web, sont des molécules.

Les organismes
Ce sont des éléments d’interface plus complexes comprenant à la fois des atomes et des molécules. Ils peuvent recouvrir plusieurs fonctions, à l’image du header d’un site web qui peut par exemple permettre de faire une recherche ou d’accéder à une page spécifique.

Le template
Il intègre les trois éléments précédents pour former la structure de l’interface utilisateur. En résumé, il permet de répartir les composants dans l’espace et d’en spécifier la nature et la fonction. Un template produit définit par exemple l’architecture d’une future page produit.

Les pages
C’est le résultat final, le template auquel on a intégré le contenu texte et image finalisé. La page est la représentation fidèle de ce qui sera affiché lors de l’utilisation du produit digital ou de la navigation sur le site web.

Les grands principes du Design System.

Cet outil clé de la conception produit répond à cinq grands principes qui fondent son efficacité et sa pertinence pour les équipes :

Vivant
Le Design System est un outil vivant qui évolue dans le temps. Il peut être ajusté, affiné ou enrichi en fonction des besoins évolutifs de l’entreprise ou du produit digital concerné.

Agnostique
Il doit être pensé indépendamment d’une technologie spécifique. Il doit être compatible avec les différentes technologies de l’entreprise ou du moment, ou à minima, pouvoir s’y adapter.

Atomique
Comme nous l’avons vu, il ne doit pas être pensé en termes de « page à designer » mais repose sur une série de composants identifiés, selon les principes de l’Atomic Design.

Universel
Le Design System s’appuie sur des standards d’utilisation et ne doit pas contraindre les utilisateurs d’une interface à acquérir de nouvelles habitudes pour utiliser le produit.

Inclusif
Il prend en compte les règles d’utilisabilité et d’accessibilité en vigueur pour adresser tous les types d’utilisateurs. Indépendamment de leur profil, de leur maturité sur le digital, ou de leur contexte d’utilisation.

Quels sont les avantages du Design System ?

Les atouts de cette approche sont nombreux tant pour les équipes de conception produit qu’en termes d’expérience utilisateur. Côté conception, en s’appuyant sur un référentiel commun, la collaboration et la communication entre les différents experts impliqués – designers et développeurs notamment – sont facilitées. Résultat : un meilleur alignement de la vision et une plus grande cohésion des équipes.

La production/réalisation du produit ou du site web est plus rapide et « scalable » (mise à l’échelle du produit moins coûteuse tout en maintenant le niveau de qualité), car elle repose sur des modèles et des composants préconçus et réutilisables. Et au-delà du gain de temps, la standardisation des éléments de design et fonctionnels réduit la survenue d’erreurs lors des sprints, et permet de tester le produit plus tôt.

Enfin, l’utilisateur est gagnant à l’usage. Les composants du produit ou site web sont identiques et cohérents sur l’ensemble de l’interface. Une fois l’utilisation du dispositif assimilée, il n’a plus à apprendre à utiliser le produit ou à adopter de nouveaux réflexes au cours de son expérience. Son utilisation de l’interface est facilitée.

Comment appréhender le sujet ? Se poser les bonnes questions.

Pour bien cadrer le sujet en amont de sa mise en place, quelques questions clés peuvent être utiles au moment de penser votre futur Design System :

• Pourquoi créer un Design System, quel est l’objectif ?
• Quels experts vont l’utiliser au sein des équipes (designers, dev, PO…) ?
• S’agit-il d’équipes internes, externes, les deux ?
• Quelles ressources temps/homme y consacrer ?
• Quel mode de gouvernance mettre en place ?
• Quels produits/services sont concernés ?
• Quelles technologies ou devices couvrir ?
• Quel process d’utilisation mettre en place ?
• Qui pour le mettre à jour et en assurer le suivi ? 
• Comment le mettre à disposition ?

Mettre en place un Design System est un projet d’envergure et une démarche qui s’inscrit dans le temps. La décision doit être prise au regard du besoin de l’entreprise d’industrialiser son approche design et de la pertinence de cet outil pour l’organisation. La taille de l’entreprise, le périmètre des projets/produits et l’atomisation des ressources design et développement sont des facteurs clés à prendre en compte.

Comment créer son Design System ?

Avant toute chose, pointer la problématique et bien identifier le besoin. S’agit-il de rationaliser le processus de conception/création, de faciliter la collaboration entre les équipes, de faire monter à l’échelle des produits qui ne répondent pas, ou pas assez vite aux besoins émergents des utilisateurs ? Un audit des ressources design existantes ou de l’organisation peut vous y aider.

Le cadrage stratégique de la démarche permet ensuite de fixer vos objectifs, définir les délais de mise en place, le budget, et ce qui va composer le futur Design System : guide de style, librairie de composants, identité de marque… Une composition à adapter aux besoins déjà identifiés en amont.

Lors de la construction du Design System, veiller à avancer sans brûler les étapes, par itération, jusqu’à obtention d’un résultat satisfaisant pour les équipes concernées. Répond-il au besoin de vos experts ? Les designs et composants définis sont-ils techniquement réalistes et faisables ? Correspondent-ils bien aux retours utilisateurs et répondent-ils aux painpoints constatés ?

Enfin, sa diffusion au sein de l’organisation est un point clé de la démarche. Une fois le Design System réalisé, il s’agit de le faire adopter. La communication autour de l’outil est décisive pour son appropriation par les équipes. Une étape qui peut prendre du temps, mais qui est aussi source d’opportunités. De son utilisation effective émergent des retours de ses utilisateurs et d’éventuelles erreurs, toutes sources d’amélioration potentielle de cet outil.