Design Systems ROI : Interview de Thomas Vimare
Si vous commencez à mettre en place un design system, ou si vous en avez un et que vous devez démontrer sa valeur à votre organisation, vous vous êtes probablement déjà demandé quel pouvait être le retour sur investissement d’un design system.
Partager Design Systems ROI : Interview de Thomas Vimare
Les design systems peuvent être plus ou moins matures, étendus et complexes. Nous avons voulu interroger des leaders français du design afin de comprendre comment s’était passé le processus de construction de leur design system.
Thomas Vimare, head of design chez Free, nous explique comment lui et son équipe ont mis en place leur design system.
Découvrez les design systems, ce qu'ils sont, comment ils fonctionnent et comment ils peuvent changer votre façon de concevoir. Lisez la première partie : Qu’est-ce qu’un design system ?
Comment s’est passée la mise en place du design system de Free ? Comment les équipes travaillaient-elles auparavant ?
Nous avons migré vers Figma pour que l’ensemble des équipes design l’utilisent en avril 2021, au moment où j’ai rejoint Free. Avant cela, les parcours web étaient réalisés sur Adobe XD, d’autres directement sous forme de wireframes avec des outils comme Keynote. La volonté était de centraliser l’ensemble des produits de l’entreprise dans un seul outil pour mieux industrialiser la conception. Nous avons dans un premier temps démarré un chantier de création d’UI Kit à destination des designers. L’idée était d’uniformiser et de moderniser l’ensemble des composants des interfaces progressivement, comme nous n’avions pas des maquettes pour l’ensemble des parcours utilisateurs. Six mois plus tard, après avoir travaillé sur les fondations et les composants principaux au fur et à mesure que la dette design se réduisait, nous avons convié les développeurs des différentes équipes afin de converger vers une roadmap, un processus de développement et des normes de nomenclatures communes.
Qu'est-ce qui a motivé la mise en place d’un design system chez Free ?
L’équipe design s’est agrandie à partir de 2021 (deux product designers dans le pôle digital web contre 11 aujourd’hui), ce qui a nécessité plus de structure et une organisation qui favorise la collaboration des équipes. L’expérience utilisateur sur les différents canaux comportait de nombreuses incohérences visuelles et comportementales, ce qui nuisait à l’image de marque et à la performance de certains parcours.
Nous recevions également des feedbacks négatifs de la part des développeurs qui se retrouvaient régulièrement à devoir coder des composants en doublon.
Mettre en place un design system est aussi un bon moyen de transformer structurellement l’entreprise et de sensibiliser les différents pôles aux sujets design. Cela a permis à Free d’ouvrir un nouveau chapitre pour les métiers design et de partir sur des bases solides et accessibles à tous.
Comment avez-vous obtenu l’accord pour la mise en place du design system ? Avez-vous dû le pitcher ?
Comme j’ai de la liberté et de l’autonomie au sein de Free, j’ai opté pour une approche proactive en travaillant sur les premières bases, avec pour objectif de démontrer la valeur ajoutée concrète aux parties prenantes. Une fois le projet suffisamment avancé, j’ai fait une présentation au top management (Xavier Niel et Camille Perrin) pour expliquer l’intérêt et l’impact futur à l’échelle de l’entreprise. L’initiative a tout de suite été comprise et valorisée.
Quand le DS était proche d’une version 1.0 (liste de fondations et composants que nous avions définis avec les développeurs), j’ai fait une présentation à l’ensemble du pôle marketing pour expliquer le fonctionnement, les avantages et les limites d’un design system. Cette présentation avait aussi pour but d’approfondir sur nos métiers et la manière de concevoir les produits.
Mettre en place un design system est aussi un bon moyen de transformer structurellement l’entreprise et de sensibiliser les différents pôles aux sujets design.
Aviez-vous besoin d’un budget pour construire ce design system ? Comment avez-vous quantifié son impact potentiel ?
Il n’y a pas à proprement parler de budget alloué à ce stade car nous n’avons pas d’équipe dédiée au design system. Celui-ci est décentralisé et les équipes design et développement y contribuent de manière asynchrone, en parallèle de leurs sprints d’équipe. Il est possible que ce fonctionnement évolue à l’avenir, mais comme pour tous les sujets chez Free, nous essayons d’adapter notre façon de travailler progressivement et en fonction des besoins, better done than perfect!
Qui a participé au processus, et combien de temps a-t-il pris ?
L’ensemble des designers web et les développeurs des différentes product teams ont contribué au design system. Cela a représenté environ un an de travail de fond, à raison de 5% de temps sur nos sprints.
Quels compromis avez-vous dû faire ?
Une erreur que nous avons faite au début était de vouloir prévoir tous les cas sur les différents composants. Nous pensions qu’il était nécessaire de répondre à tous les besoins sauf que cela retardait beaucoup les mises en prod. Nous avons pris la décision d’être plus efficaces et de nous focaliser sur les besoins réels (afin d’éviter les usines à gaz ou les cycles trop longs). Une meilleure priorisation et un découpage plus itératif nous a permis d’éviter les développements interminables.
Une des évolutions majeures de ces derniers mois a également été de séparer certaines librairies afin de gagner en performance et en productivité. En effet, historiquement nous avions un seul fichier regroupant l’ensemble des fondations : tous les éléments liées à la marque, les grands principes de design, les espacements, les typographies, les layouts, les icônes, les illustrations, les assets partenaires, les chartes graphiques des différents produits du groupe, les design tokens… et un fichier nommé Components, qui regroupe un grand nombre d’éléments d’interface.
Avec l’ajout progressif de nouveaux éléments, les fichiers master sont devenus lourds et compliqués à utiliser par les équipes, nous avons donc découpé en plusieurs fichiers pour gagner en efficacité.
Quels services ont bénéficié de l’arrivée du design system ? Pourquoi ?
Les collègues du marketing peuvent récupérer des éléments de la marque (assets, couleurs…), par exemple pour la conception d’e-mails par les équipes CRM.
Le Brand Studio contribue au design system et centralise les assets (illustrations, bannières marketing, icônes…), ce qui permet de tester les éléments graphiques en contexte réel, dans les maquettes Figma, plutôt que sur Illustrator comme précédemment.
Grâce aux styles et assets des librairies du design system, le service social/paid digital peut concevoir, les différentes campagnes (avec le Brand Studio) et faire des A/B tests.
Et côté développement, certaines équipes n’ont pas la chance d’avoir des designers, mais grâce au design system, elles peuvent bénéficier d’une base solide pour les aider à concevoir des parcours fonctionnels et accessibles.
Mettre en place un design system n’est qu’un premier pas ; quelles sont les ressources nécessaires pour l’entretenir ?
Nous avons mis en place un fonctionnement asynchrone pour que le design system puisse évoluer de manière continue. Chaque mois, un référent design et un développeur sont élus aléatoirement lors de notre DS Meeting. Le référent s’occupe d’organiser l’ordre du jour, de noter les évolutions sur la librairie…etc. Cela permet de rendre tout le monde responsable et de se partager les tâches.
Le backlog des besoins est fait via un board Jira. Il contient deux typologies de tickets :
- L’amélioration d’un composant existant (peut concerner par exemple l’ajout d’un état manquant, une nomenclature qui a évolué au cours du développement, ou encore un composant qui n’est pas optimal en termes d’accessibilité).
- La création d’un nouveau composant (plus rare, essentiellement dans le cas d’un nouveau besoin non comblé par un composant déjà existant).
Les tickets sont traités par les équipes à mesure des besoins dans les produits. Nous tenons à jour un changelog de toutes les évolutions dans un channel Slack dédiée au design system et la fonctionnalité threads de Slack nous permet d’échanger sur les éventuels retours pour chaque version. Nous utilisons Chromatic pour faire la recette UI des composants, et une fois validés, ils sont publiés dans notre Storybook et utilisables par l’ensemble des développeurs web.
Quels outils utilisiez-vous avant ? Qu’est-ce qui a déclenché le passage à Figma ?
Avant Figma, il n’y avait pas de design system à proprement parler. Il y avait des UI Kits dans certaines équipes, essentiellement sur Adobe XD, mais rien de partagé ni de développé techniquement. Nous avions également les icônes et les illustrations sur Adobe Illustrator, ce qui ne facilitait pas l’usage des équipes de product designers. Nous avons donc créé des librairies d’assets dédiées avec des accès partagés pour le marketing, le Brand Studio, les développeurs, et les product designers.
Quelles fonctionnalités de Figma liées aux design systems utilisez-vous, et comment (ex : Analytics, les variables) ?
Nous utilisons la feature Analytics pour déceler les composants les plus souvent « détachés », c’est souvent un bon indicateur qu’ils ne répondent pas à un besoin, qu’ils ne sont pas assez simples d’utilisation ou pas assez flexibles dans leur configuration. De notre côté, les variables sont majoritairement utilisées pour une meilleure harmonisation de la nomenclature et dans l’utilisation des couleurs et des différentes propriétés de style utilisées en code (radius, spacings, shadow…).
Pouvez-vous nous raconter quelques exemples de réussite? Quels sont vos grands succès ?
Au-delà du gain de temps lors de la conception (en design comme en développement), cela a permis d’améliorer considérablement la communication et les interactions avec les développeurs des différentes équipes. Du point de vue de la nomenclature, ou encore du fonctionnement technique des composants, cela a permis aux designers de progresser, de mieux comprendre et de s'aligner sur les contraintes techniques de développement.
Comment mesurez-vous les performances de votre design system ?
La fonctionnalité Analytics nous permet de suivre l’adoption des librairies dans les différentes équipes. Ce sont des chiffres que nous suivons de près pour nous assurer que nous proposons une vraie valeur ajoutée aux équipes qui l’utilisent. Il est important aussi que les équipes s’approprient les librairies et fassent des feedbacks sur les composants afin d’améliorer le design system en continu.
Ana Boyer, Designer Advocate, brise six idées reçues qui freinent l'adoption des design systems.
Quels sont vos indicateurs ?
D’un point de vue qualitatif :
En terme de perception de qualité par l’utilisateur, le fait d’avoir des parcours harmonisés améliore l’expérience et par conséquent la perception de la marque dans sa globalité. Les canaux web ont vu leurs notes attribuées par les utilisateurs progresser (89 % de satisfaction sur le parcours de souscription mobile récemment refondu) et plusieurs recherches, comme celles de McKinsey ou The Nielsen Norman Group, ont trouvé que les marques qui proposaient des expériences cohérentes et de qualité augmentaient la conversion et les revenus.
D’un point de vue quantitatif :
Le temps nécessaire pour les modifications des éléments de styling a été réduit de plus de 200 %. Aujourd’hui, quelques minutes suffisent pour modifier la valeur d’un radius ou d’un padding sur des dizaines de pages de notre site vitrine, là où cela pouvait prendre des heures précédemment.
La mise en production de nouvelles pages pour des sorties de produits ou services nous prenait a minima 2 à 3 semaines avant la mise en place du design system. Nous arrivons maintenant à être très réactifs et à sortir des landing pages en quelques jours.
Concernant la QA, le temps a été divisé par 3. Sur des parcours existants avant le design system, lorsque nous faisions une review, nous passions souvent plus d’une journée pour vérifier les comportements des différents éléments de la page. Le fait d’utiliser des composants accessibles et testés en amont a simplifié le travail des product owners, des développeurs et des designers.
Rien que sur le tunnel de souscription Free Mobile sur nos bornes Simbox, nous comptons 224 composants divers utilisés en prod (boutons, inputs, cards, modal, select, spinner, dropdown, chips…)
Comme le temps de delivery est drastiquement réduit, nous avons plus de temps disponible pour la recherche et les explorations.
Quels conseils donneriez-vous à quelqu’un qui essaye de persuader sa hiérarchie d’investir dans un design system ou de l’étendre ?
Aujourd’hui, il est indispensable d’industrialiser le design lorsque l’entreprise atteint une certaine taille et un certain degré de maturité. Le design system est un moyen d’accélérer la conception et la mise en production de nouveaux services ou fonctionnalités. Dans les secteurs où la vélocité et le time-to-market doivent être optimisés, le retour sur investissement d’un design system est vertueux pour l’ensemble des pôles. L’important est d’y aller progressivement et de construire le design system comme un produit, c’est-à-dire en itérant grâce aux retours des utilisateurs et en évitant de tomber dans des cycles trop chronophages avec la création de multitudes de composants qui ne sont pas utilisés par les équipes.
Dans les secteurs où la vélocité et le time-to-market doivent être optimisés, le retour sur investissement d’un design system est vertueux pour l’ensemble des pôles.
Merci à Benjamin, Alexandre et Loïc pour leurs idées et leurs contributions à cet article.
Vous comptez passer à Figma ? Consultez l'article « Guide destiné aux initiés pour une migration optimale vers Figma » de Clara Ujiie, Designer Advocate, pour obtenir plusieurs ressources, conseils et outils facilitant la transition vers Figma.
