Design System

Comment débuter un Design System ?

Les points clés à retenir :

  • Avant de commencer la création d'un Design System, il est judicieux de se documenter sur les composantes d’un tel projet, et de faire un benchmark des systèmes existants.
  • Il est crucial de comparer des Design Systems similaires en taille et en envergure pour avoir des références appropriées. Même si un design system apparait comme une référence, il ne convient pas forcément à toutes les organisations, et il ne faut pas nécessairement l'imiter aveuglément.
  • Avant d'initier le projet, il est primordial de comprendre le contexte de l'organisation, d'identifier le rôle du Design System, et d'interroger les utilisateurs potentiels. Cela permet de définir un périmètre de projet mesuré, évitant les écueils de périmètres trop vastes ou trop restreints.
  • Un audit du produit permet d’évaluer la dette design et est souvent une bonne manière d’identifier les chantiers prioritaires
  • L’un des objectifs du design système étant d’encourager une collaboration étroite entre designers et développeurs, il est essentiel d’avoir un représentant tech dans l’équipe. L’entente sur la création d'une roadmap claire intégrant les tâches design et développement permettra d’avoir une base saine pour guider le projet vers le succès.

Introduction

La création d'un Design System, est une entreprise complexe qui nécessite une compréhension approfondie du sujet, une planification minutieuse et une équipe dédiée. Dans cet article, nous vous guiderons à travers les étapes cruciales qui vous permettront de réussir la mise en place d'un Design System. De la recherche préalable à la construction de l'équipe, en passant par la définition d'un scope approprié, nous vous fournirons des conseils pratiques pour mener à bien ce projet passionnant.

Se renseigner au préalable

Se lancer dans la création d’un Système n’est pas une tâche anodine. Il vous sera demandé énormément de culture autour de ce sujet pour pouvoir débattre et vendre votre solution à vos stakeholders. Prenez donc du temps en amont du projet pour vous renseigner sur celui-ci. Il y a énormément de contenu sur le web qui peuvent vous aider à avoir une vision plus claire sur le sujet et également plusieurs formations spécifiques (comme la formation Design System Expertise de The Design Crew).

Il est aussi important d’effectuer un benchmark d’autres systèmes, à différents niveaux de maturité, regarder leurs structures, les différentes parties qui les composent.

Ces blogs regorgent de très bonnes informations essentielles pour comprendre l’historique et la mentalité à cultiver pour un tel projet.

https://polaris.shopify.com/

https://design.gitlab.com/

Comparer ce qui est comparable

Prenez du recul et n’oubliez pas de comparer ce qui est comparable : Polaris est un excellent design system mais il appartient à une entreprise de plusieurs milliers d’employés et l’équipe seule du design system Polaris comprend plusieurs centaines de personnes. C’est une excellente référence pour votre système mais pas toujours un modèle à suivre/imiter.

Un produit avant tout

Attention ! Le Design System est un sujet passionnant (notamment pour les “System People” cf. Cette article incroyable de Shopify) et est un excellent tremplin pour une carrière de Design Ops ou Product Design Lead. Néanmoins il est important de faire passer avant tout les intérêts de votre équipe Design & Tech et de ne pas forcer un DS qui existe seulement pour votre seul gain.

Comprendre son contexte

Dans un premier temps, vous devez identifier le rôle que votre DS va jouer dans votre organisation et quels problèmes il doit résoudre. Il est fondamental d’avoir une vision claire du périmètre du projet en amont, pour que l’effort soit mesuré et adéquat ; beaucoup de Design System échouent parce qu'ils se concentrent sur un scope beaucoup trop grand ou trop petit et peine à satisfaire les besoins de leurs utilisateurs.

La première tâche avant même d’initier de manière officielle le projet est d’aller interroger vos potentiels utilisateurs et/ou Stakeholders. Prenez des cafés avec les designers, les front-end, les Product Managers etc. Essayer d'identifier quels sont les pain-points dans l’exécution de leurs tâches quotidiennes et essayer d’identifier lesquels peuvent entrer dans le périmètre d’un Design System.

Cultiver une position de leader

Cette première étape est également le premier moment pour vous montrer en temps que Design System Leader, rôle qu’il vous faudra endosser qu’importe la taille du projet. Cette facette est importante pour la bonne santé de votre Design System. Même si vous êtes passionné de systématisation de composants sur Figma, ce n’est qu’une petite partie de votre rôle et négliger votre rôle de Project Leader, vous causera beaucoup de problèmes par la suite.

Une fois ce premier état de l’art fait vous devrez normalement avoir une vision claire des différents problèmes que rencontre votre production et une bonne compréhension du contexte de votre équipe produit. C’est le moment de poser ses problèmes sur la table et de voir lesquels sont résolvables par un Design System. C'est un excellent outil de communication et permet de faciliter les workflow de production mais comme tout système il ne résoudra pas tous les problèmes de votre organisation.. et il faut être très clair avec ça (exemple : un design system ne remplace pas l’investissement continue pour promouvoir une culture design et meilleure compréhension de l’impact des designers).

Choisissez un scope raisonnable en fonction de votre bande passante personnelle et ambition. Il vaut mieux avoir un petit DS qui aide vraiment les gens plutôt qu'un produit gigantesque et mal maîtrisé qui peut occasionner plus de friction qu’il en résout.

La Phase d’Audit

Afin d’avancer dans les meilleures conditions, la première étape est de faire un Audit de votre périmètre produit. L’objectif est d’estimer la dette design. Un audit peut prendre plusieurs formes mais il doit comporter des informations telles que : La liste de tous les états de chaque composants, les styles de textes, les couleurs, les composants inutiles et/ou inaccessibles, les composants similaires mais différents etc.

Un extrait de l’audit du produit D’Algolia

La forme de l’Audit importe peu mais ne négligez pas le pouvoir de cet artefact pour montrer de manière extrêmement simple et visuelle l’étendu de la dette. C’est un très bon outil pour aligner vos stakeholders sur le besoin de systématiser l’interface.

À cheval entre l’audit fonctionnel et l’analyse du contexte, n’oubliez pas de prendre un temps pour analyser le tooling des équipes et la production. Votre design system doit s'intégrer dans un écosystème existant pour maximiser son efficacité et adoption. Par exemple, si la documentation interne de votre produit est sur Confluence ou Notion, il est plus judicieux d’intégrer votre documentation dans ces outils plutôt que de forcer un autre outil.

Construire une équipe

Maintenant que votre vision est claire sur les différents problèmes que vous allez essayer de résoudre, il est temps de construire votre équipe projet. Cette équipe peut prendre le format d’une Taskforce (équipe pluridisciplinaire avec des gens d’équipe différente sur un temps limité) ou statique si l’entreprise décide d'investir lourdement dans le design system.

Le cœur d’une équipe c’est la collaboration Designer & Developer. Un design system n'existant que si il est matérialisé en production il est important d’avoir un développeur dédié au projet. Le reste de l’équipe sont des satellites : ce sont des gens qui soutiennent le développement du projet et facilitent la collaboration avec les stakeholders et le reste de la production. Il est important de construire des rituels autours de ces personnes pour s’assurer de leurs collaborations et soutiens.

La DS Taskforce à Algolia

Cette collaboration Design / Développeur est indispensable, beaucoup de Designer débutant en Design System se concentrent beaucoup trop sur des problématique de Design sur figma et néglige les coups de refactoring de la production. C’est une tâche qui est de plus en plus complexe en fonction de la taille de votre produit.

D’ailleurs, comme nous l’avons donc évoqué, un design system peut partir d’un UI Kit mais ne s’arrête surtout pas qu’à Figma. Pour aboutir à l’impact réel de ce type de projet, il est essentiel que la logique de composants, fondations et specs créés par le/les designers soit également implémenté côté technique, afin que le produit et les utilisateurs finaux puisse bénéficier de ces bienfaits.

La bonne vision

Une grosse erreur de beaucoup de Design System est de créer des choses beaucoup plus complexes qu’elle ne le sont à la base. Cela arrive quand l’équipe Design System est trop déconnectée de la réalité de l’implementation. À l’opposé on peut observer des Design System avec des solutions trop ciblées sur des usages d’équipes qui peinent à se déployer dans la totalité de l'écosystème.

Pour ne jamais perdre de vue les besoins de vos utilisateurs il est important de garder un contact proche de vos équipes par le biais de rituels que vous devez instaurer. Cette proximité vous permettra d’aider les équipes à construire les bonnes habitudes nécessaires à l’usage de votre Design System.

La worms eye view

La birds eye view

Roadmap

La dernière étape est de d’utiliser toutes les ressources des étapes antérieures et construire la roadmap de votre projet. Elle n’a pas à être extrêmement précise mais elle doit intégrer les tâches design ainsi que development. C’est également sur cette roadmap que vous allez communiquer avec les membres satellite de votre équipe.

Il sera important de tenir informé les membres de votre équipe sur le progrès des tâches en cours, les milestones atteint et les prochains composants à prioriser.

La première roadmap du Design System d’Algolia

Conclusion

En suivant ces étapes clés, vous serez bien préparé pour lancer votre projet de Design System et contribuer de manière significative à l'amélioration de l'efficacité et de la cohérence de vos produits et services. N'oubliez pas de communiquer efficacement avec votre équipe et de maintenir une proximité avec les utilisateurs tout au long du processus pour garantir le succès continu de votre Design System.

Nous pouvons vous accompagner sur ce type de problématique.

Notre design studio propose expertise en product design & brand pour construire avec vous des produits mémorables à fort impact.

Voir nos projets

Envie d'évoluer vers un poste de design lead/manager ?

💪 Découvrez notre formation experte Design Leadership & Management

Voir la formation

Envie d'apprendre à construire et maximiser l'usage de votre design system ?

✨ Découvrez notre formation experte Design System Expertise

Voir la formation

Envie d'apprendre à cadrer votre Product Discovery et maîtriser les techniques de recherche utilisateur ?

🔍 Découvrez notre formation experte Advanced Product Discovery

Voir la formation

Nous vous recommandons aussi :

Nous n'avons pas d'autres articles sur ce sujet (pour le moment :))