Design System : Composez plus vite que la lumiere

Depuis déjà quelques années, la transformation digitale a bousculé nos modes de vie comme a pu le faire la révolution industrielle à l’époque. En effet, le digital étant omniprésent dans notre quotidien, il est normal que les entreprises prennent conscience qu’elles doivent être plus rapides et plus performantes dans leurs itérations produit afin d’augmenter leur retour sur investissement.

Aujourd’hui, il est possible de tout faire via son smartphone. On peut réserver ses vacances, remplir sa garde-robe, se commander à manger et même faire une demande de crédit.

A l’heure où j’écris cet article, de nombreuses fintech ont déjà vu le jour. Grâce à elles, plus besoin de se déplacer pour ouvrir un compte bancaire ou contracter une demande de crédit. Il vous suffit juste d’une connexion internet.

Mais avec autant d’acteurs et de concurrence, comment réussir à se démarquer ? Comment être sûr que l’on est vraiment efficace ?

L’une des réponses que l’on peut apporter est le design ! Plus particulièrement l’organisation de celui-ci : le Design System.

Lorsqu’on souhaite être présent de manière digitale tout en assurant une parfaite continuité de son identité de marque, il est fortement conseillé d’avoir préalablement réfléchi à un Design System.
Nous verrons donc ce qu’est un Design System, pourquoi il est important d’en créer un, pour qui il est utile et comment le mettre en place.

Qu’est-ce qu’un Design System ?

Avant d’aller plus loin, il est nécessaire de définir ce qu’est un Design System.

Comme l’explique très bien Audrey Hacq dans son article “Tout savoir sur les Design System”, il ne s’agit pas d’une librairie de composants, d’un Style Guide ou encore d’une librairie de patterns ; mais bien de tout cela en même temps. C’est un produit aussi bien destiné aux designers qu’aux développeurs.

“Un kit de composants d’interface utilisateur sans la philosophie, les principes, les lignes directrices, les processus et la documentation qui l’accompagnent, c’est comme jeter un tas de composants IKEA sur le sol et dire “Tiens, construis une commode !”. Les lignes directrices et la documentation qui accompagnent les composants de l’interface utilisateur servent de manuel d’instructions fourni avec les composants IKEA pour aider l’utilisateur à construire correctement et avec succès des meubles.”
- Brad Frost

On y retrouve des éléments tangibles, comme des outils pour les designers et développeurs, des patterns, des composants, des guidelines etc… Mais aussi des éléments qui le sont moins, qui vont guider l’usage, comme des valeurs de marque, une manière de s’exprimer aux utilisateurs, un état d’esprit, etc…

Un Design System est semblable à une boîte de Légo : on y trouve plusieurs petites pièces, de forme et taille différentes, ce qui correspondrait aux composants dit “atomiques” d’un Design System. On assemble ensuite ces petites pièces entre elles pour se retrouver avec des formes plus complexes comme un banc, un arbre, une table etc. Cela équivaut dans le Design System aux composants dits “moléculaires”. Puis lorsqu’on assemble ces éléments moléculaires entre eux, on obtient quelque chose d’encore plus grand : une maison, un jardin, un parc d’attraction, etc. Il s’agit ici des composants dit “organiques”. Vous l’aurez donc compris, un Design System se divise comme un système atomique. Mais cela ne s’arrête pas à la façon dont on assemble les éléments entre eux. Dans cette même boite, on trouve également une notice qui aide à la création. De manière identique, on retrouve dans un Design System des règles d’utilisation permettant de réaliser différents projets digitaux.

Le Design System est donc la combinaison améliorée d’une charte graphique et d’un UI Kit. Vous n’imaginez pas réaliser une affiche sans la charte graphique de la marque ? C’est pareil pour le web : on ne peut plus concevoir de site internet (ou d’application) efficacement sans avoir un Design System bien documenté.

Pourquoi est-il important de créer un Design System ?

Contrairement à ce que l’on pourrait penser, le Design System n’est pas apparu en même temps que l’air du numérique et l’effervescence des sites internet ou applications. En effet, l’invention du dispositif de la presse typographique a permis d’être beaucoup plus efficace qu’une centaine de moines dupliquant page par page un livre. On peut aussi faire le parallèle entre nos composants et l’ensemble des caractères gravés, prêt à l’emploi, utilisés pour l’impression.

Machine à écrire en vu éclatée

Vous l’aurez compris, un Design System est là pour accélerer la production en uniformisant et rendant cohérente l’expérience, du début à la fin. Grâce à la mise en place de celui-ci, la SNCF a constasté une économie d’environ 30 à 35% du temps passé sur la partie intégration. Quant à la société Thelus au Canada, elle dit économiser environ 6500h/an sur la création des maquettes.

A qui sert le Design System ?

A tout le monde.

Un Design System se doit d’être accessible et optimisé pour que l’ensemble de votre entreprise puisse s’en servir. Principalement, il sert aux designers et aux développeurs pour la conception et réalisation des maquettes, mais également aux différents chefs de produit.

C’est grâce à ces différents intervenants que votre Design System est ainsi implémenté et mis en pratique. Il est utilisé afin de réaliser des présentations, de se projeter et estimer plus facilement le temps de production. Il permet de gagner en autonomie et en assurance sur les différents projets.

Il est aussi très utile au pôle des Ressources Humaines, souvent négligé. En effet, il s’en sert d’élément de vente visant à démontrer l’adaptation de l’entreprise aux nouvelles méthodologies.

Il n’est pas rare de travailler avec de nombreux prestataires ou sur un produit “marque blanche”. Là encore, le Design System permet de garantir la cohérence de marque.

Vivant dans une société de consommation, il sert aussi au public, pour aider l’utilisateur à s’imprégner de votre identité. Grâce à lui, il peut en apprendre d’avantage sur votre marque et ses valeurs.

Comment mettre en place un Design System ?

Il est important de comprendre qu’un Design System n’est pas un simple livrable mais plutôt une suite de livrables. Il s’agit d’un produit à part entière, en constante évolution au gré des nouvelles technologies. Il nécessite une équipe composée d’UX/UI Designer, de développeurs, d’un responsable Design System, etc… Le design System possède son propre planning.

A mon arrivée chez Younited, nous ne disposions pas d’une telle structure. D’autre part, l’entreprise était en plein rebranding (réalisé par l’agence Saguez) ! Nous avons donc saisi l’opportunité de ce rebranding pour passer sur Figma afin de repartir sur une base nouvelle offrant plus de possibilités telles que la fonction de librairie extérieure ou de travail collaboratif.

Mon travail chez Younited s’est divisé en plusieurs étapes menant à la mise en place du Design System Orion :

Etape n°1 : Il a fallu dans un premier temps faire un état des lieux de l’existant. L’une des contraintes de conception chez Younited est qu’il existe plusieurs produits : Pay, Credit et Coach. En faisant le tour de tout ces produits j’ai pu remarquer plusieurs problèmes :

Aucune librairie transverse n’a été créée côté design ;
Les éléments live étaient différents des maquettes produites ;
Chaque produit traite un même élément de manière différente.

Ce manque de formalisme engendre donc deux problèmes : une perte de temps lors de la création des maquettes et une perte de cohérence sur le produit dans sa globalité. Par exemple, l’obligation à chercher les composants sur les maquettes déjà existantes était assez chronophage. J’ai donc listé les différents éléments afin de recencer les besoins actuels de l’entreprise.

Etape n°2 : Comme l’a exprimé l’écrivain et historien américain Henry Brooks Adams, “le chaos donne naissance à la vie, et l’ordre à l’habitude”. Après avoir listé les besoins, une vue d’ensemble se dessine. Celle-ci permet de recréer et d’uniformiser les éléments donnant naissance à un UI Kit, première brique du Design System. Ce dernier est fait de composants simples, tel qu’un bouton primaire ou un champ texte. On y retrouve aussi les styles de texte ou encore les couleurs. Mais il était trop tôt pour parler de guideline. Une fois cet UI Kit en main, il était plus facile de réaliser les maquettes aux nouvelles couleurs de Younited.

Etape n°3 : Une fois que les maquettes ont été réalisées, je suis retourné sur mon UI Kit afin de l’enrichir. Qu’il s’agisse de Credit, de Pay ou de Coach, le parcours est essientiellement constitué de formulaires. J’ai alors commencé à établir des systèmes de grille et d’espacement me permettant de créé des templates communs aux trois produits. Cela permet d’avoir une certaine cohérence mais également de gagner du temps lors de la conception. Il s’en suit tout un tas de création de règles : comment utiliser un bouton primaire, ou bien détailler les différents états d’un champ texte. Petit à petit, nous nous rapprochions de ce qu’est un Design System : la source de verité unique de l’entreprise.

Etape n° 4 : Une fois tous les petits éléments rassemblés sur le fichier Figma, il a fallu rendre cela accessible à tous. Je me suis donc orienté vers la plateforme ZeroHeigh afin de mettre en ligne toute ma documentation. C’est grâce à cet outil que tous les corps de métier cités précédement acquièrent plus d’autonomie. On y retrouve l’essence d’un Design System : des éléments téléchargeables comme les typographies utilisées, composants principaux et leurs règles d’utilisation ou encore le système de grilles cité précedemment. A terme, on pourrait même imaginer des “starter packs”, en libre accès, à destination des différents produits pour leur permettre de créer encore plus facilement leur visuel.

Etape n°5 : Une fois le ZeroHeigh parachevé, il manque l’étape la plus importante : celle du passage du fictif au réel. Je me suis alors rapproché des personnes qui font vivre notre Design System : les développeurs. C’est effectivement important de faire des maquettes, mais si l’existant n’est pas aligné, cela ne sert à rien. Dans un premier temps il a été question de revoir la structure et les fondations. A l’aide de mon ZeroHeigh ainsi que de l’inventaire de l’existant, nous avons pu prioriser les éléments à modifier et comment ils le seront grâce au Design System.

Il est important de prendre en considération que la méthode de travail varie d’une entreprise à une autre. Ce qui est sûr, c’est que très peu d’entreprises vous attribueront 6 mois de production design, accompagnés de 6 mois de travail sur le développement consécutifs .

Conclusion

Pour conclure, je dirais qu’il est important d’être confiant dans ce que vous produisez, quitte à vous affranchir de l’opinion de certaines personnes au commencement. Mais il faut également prendre le temps de communiquer tout en étant pédagogue afin d’évangeliser le Design System au sein d’une entreprise comme Younited Credit. Cela permet de faire comprendre son utilité, de le considérer comme un produit et utile à tous.

Il permet aussi de libérer du temps pour innover et réfléchir. En effet, il va permettre d’évaluer plus facilement le temps de production global en identifiant les composants déja disponibles ou non.

Et enfin, contrairement à ce que l’on pourrait croire, un Design System ne bride en aucun cas la créativité de ceux qui vont l’utiliser. Il permet d’automatiser les éléments récurrents, afin de libérer du temps pour réfléchir à de nouveaux comportements. Mais également de réaliser plusieurs versions d’une même maquette afin de l’”AB tester” et constater la plus impactante.

Vous l’aurez donc compris, un Design System est quelque chose de long, fastidueux et compliqué à mettre en place dans une entreprise n’étant pas familiarisée avec l’utilisation de celui-ci.

Mais une fois bien en place, il permet de faire gagner un temps considérable sur la production et le développement des écrans, tout en gardant une cohérence tout au long du parcours. Il est également important d’échanger régulièrement avec les différentes équipes, comme les développeurs, mais aussi les différents chefs de produit pour acter sur des composants communs afin d’avoir la même identité d’un produit à un autre.