Comment faire un design system ?

Tu te demandes comment garantir la cohérence visuelle et fonctionnelle de ton entreprise à travers tes supports ? C'est normal, beaucoup d'organismes éprouvent des difficultés à maintenir une identité de marque uniforme tout en optimisant la collaboration entre leurs équipes. Et si le design system était la solution ?

Souvent confondu avec un UI kit, le design system vise à lier une organisation dans un objectif de performance du produit et du travail collaboratif. Intégré au sein de ton entreprise dès le départ, il est un garant d'efficacité et de clarté pour ta communication.

Nous allons te faire découvrir ce qu’est un design system, pourquoi il est indispensable pour toute entreprise, petite ou grande, et comment le mettre en place  sur mesure pour qu'il puisse évoluer avec ton entreprise.

Prêt(e) àoptimiser la collaboration entre tes équipes ? Alors ze parti !

‍

Qu’est-ce qu’un design system ?

Un design system se compose de différents éléments. C’est comme le séquençage ADN d’une entreprise dans lequel on retrouve : les valeurs de la marque et son pourquoi, le logo, les couleurs, les typographies, l’iconographie, la charte vocale, la charte rédactionnelle, les différents supports prints, les composants, la documentation de ces derniers, la charte ergonomique, sur quelle stack est développé le site et/ou l’application, les variations des composants d’une stack à une autre.

‍

Maintenant tu sais que le design system n’est pas qu’une simple bibliothèque de composants. Il est l’ensemble des expertises métiers qui se regroupent afin de créer un langage commun pour servir les objectifs business de l’entreprise.

‍

‍

Alors comment fait-on tout ça ?

‍

Comment construire son design system ?

‍

Quand faire un design system ?

Pourquoi pas dès le début ? Un design system t’accompagne du début jusqu'à la fin de ton entreprise (s’il y en a une, bien sûr), il grandira en même temps que ton entreprise.

Au fil du temps, on a souvent envie d’en rajouter beaucoup et c’est là que la cohérence se perd. Reprendre et tout mettre à plat l’existant est beaucoup plus long et coûteux que de le faire petit à petit.

‍

Bien sûr, tu peux le faire plus tard, une fois que tu as trouvé ton market fit, seulement ne tarde pas trop car le faire trop tard peut coûter cher, très cher. 😰

Pour te donner un ordre d’idée, faire le design system d’un MVP où l’on va simplement documenter les composants va prendre 2 jours alors que créer un design system afin de redonner de la cohérence et documenter des composants va prendre entre 5 à 10 jours. Oui car le risque est là, perdre la cohérence de toute ton image de marque.

Nous allons désormais voir quelques éléments qui te permettront de mettre en place une cohérence dès le début.

‍

Définir son pourquoi

Cet exercice peut être fait à la création de ton entreprise. Parfois, lorsqu’il est réalisé ultérieurement, il permet de se reconnecter au pourquoi profond de l’entreprise. Il est utile également pour accompagner un moment pivot de la marque.

La définition du pourquoi de ton entreprise est essentielle, c’est ce pourquoi qui va être le métronome de ton design system. Il va te permettre de mettre en place les éléments de ta charte graphique, la mise en avant des valeurs, le ton employé pour t’adresser à tes utilisateurs, etc.

Prends 5 minutes à chaque étape du cercle pour définir un maximum d’idées qui te viennent à l’esprit. Si tu as déjà effectué ce travail tu peux passer à l’étape d’après.

‍

‍

Mettre en place des objectifs

Avant de te lancer dans la construction d’un design system, il faut lui donner un objectif SMART : Spécifique, Mesurable, Atteignable, Réaliste, Temporel.

Il peut y avoir plusieurs objectifs, qui dépendent de la situation de ton entreprise. En voici quelques-uns :

• Apporter de la cohérence.
• Gagner en productivité au sein de l’équipe.
• Pouvoir travailler avec différents collaborateurs extérieurs.
• Mettre en place des process et mieux communiquer en asynchrone.
• Accompagner la transformation de l’entreprise.

‍

Pour que tes objectifs soient atteignables, nous te conseillons de faire un atelier avec toutes les parties prenantes. Si tu veux en savoir plus à ce sujet : Design Sprint : c’est quoi ?

‍

Faire une roadmap et ritualiser

Une fois les objectifs mis en place, tu peux débuter en réalisant une roadmap. Son but est de ne pas perdre de vue les objectifs à mettre en place en faisant des groupes de travail avec les différents pôles impliqués (Développeurs-Designers, Marketeux-Développeurs, Designers-Marketeux, etc.).

Ensuite, il est important de mettre en place des points ritualisés, sous forme d’échanges ou d’ateliers. Sans l’organisation de ces rituels, la procrastination peut te guetter et peut entraîner une diminution de la productivité à long terme.

‍

Mettre en place un tracking

Il est indispensable d’instaurer un système de tracking. Évolutif en permanence, il te faut traquer ce qui doit être mis à jour ou jeté à la poubelle.

‍

Quel outil pour regrouper tous ces éléments ?

Figma est un incontournable pour créer les composants, c’est sûr. Cependant, il n’est pas toujours le plus pratique car tout le monde dans ton équipe ne l’utilise pas au quotidien. Adosser un autre outil à Figma peut être bon compromis, le nec plus ultra c’est la synchronisation de cet outil et de Figma.

En voici quelques-uns :

• Notion
• ZeroHeight
• Storybook

‍

En combien de temps faire un design system ?

Le design system doit être considéré comme un produit, c’est-à-dire qu'on peut le concevoir par le biais de méthodes agiles, qu’il est scalable et itératif. Ton entreprise évolue au fil du temps, sa vision, ses objectifs évoluent également.

‍

S’inspirer des grands : des exemples de design system

N’hésite pas à t’inspirer des grands qui ont fait leur design system. Voici notre top 3 qui met en avant la collaboration entre les différentes équipes, ce qui est, nous te le rappelons, essentiel à la constitution d’un design system.

‍

Decathlon

‍

‍

Le design system de Decathlon met en avant la pluridisciplinarité des supports. En numérique on retrouve les informations IOS, Android et Web. En physique on y retrouve les informations sur le merchandising, la construction des magasins et les supports print.

‍

Atlassian

‍

‍

Exclusivement digital, le design system d'Atlassian met en avant une documentation simple et claire à disposition de ses développeurs et développeuses.

‍

GiffGaff

‍

‍

Une petite touche particulière pour le design system de Giff Gaff, qui change de style et se détache du traditionnel flat design. Aussi la charte rédactionnelle et l’UX writing y sont travaillés avec profondeur.

‍

Découvre notre Agence de Design

‍

Conclure avec un zoom sur la conception des composants pour le NoCode

Comme avec n’importe quelle stack, un bon design system dépend d’une bonne communication entre les équipes. Que ce soit avec Bubble, Weweb, Weblfow ou autre, les designers doivent prendre soin d’être à l’écoute de leurs équipes de développement pour produire des composants pensés pour la stack.

‍

Chaque outil possède ses contraintes et il est bon de concevoir des composants qui facilitent le travail de nos collègues adorés. ❤️

‍

‍