Les design systems : l'affaire de tous

Les fonctionnalités mentionnées dans cette publication nécessitent un forfait Organisation Figma. En savoir plus.

Cet article est le premier d'une série en 3 parties qui détaillera l'expérience de Workday lors du développement, de la mise en production et, finalement, de la sortie publique de leur design system.

Le design est vital pour tout grand produit, il influe souvent sur le succès ou l’échec d'une entreprise. Les plus grandes mettent l'accent sur sa qualité, pas uniquement au sein de leurs équipes de design, mais également auprès des développeurs, des chefs de produits, de la direction et bien plus encore. Parfois, elles rendent même leurs outils publics pour établir leur présence comme leader en matière de design sur le marché. Cependant, encourager et soutenir cette mentalité à cette échelle peut devenir un véritable défi quand on parle d'un tel investissement en ressources. La valeur pour les créateurs de produits est indéniable pour de nombreuses personnes, mais elles ne réalisent pas l'impact qu'un design system peut avoir sur ce public plus large.

J'aime insister sur le fait qu'en concevant un design system, vous ne mettez pas seulement en place une ressource pour créer un produit. Vous mettez en place un outil qui, associé aux bons publics, met en avant le design au sein de toute l'entreprise et peut même faciliter l'embauche et l’intégration des nouvelles recrues. Les design systems n'affectent pas seulement le design de produits, ils révolutionnent toute la dynamique et le processus de création et de commercialisation.

Il faut partager en plusieurs phases, selon les publics spécifiques, le déploiement d'un design system. Chaque phase présente des avantages cumulatifs. Imaginez les publics potentiels de votre design system comme des cercles concentriques, chacun étant associé à l'une de ces phases tout au long du déploiement. Votre équipe design system se trouve au centre de ces cercles : elle crée les fondements de votre système et itère constamment grâce au feedback continu des publics environnants. Le premier groupe au-delà de votre équipe design system est l'équipe de design de produits. De là, il s'étend pour inclure soit les autres équipes de design de l'entreprise, soit les équipes de développement de produits. La taille et la structure organisationnelle de votre entreprise détermineront par quoi commencer.

Pour les grandes entreprises disposant d'équipes de design distinctes (marque, marketing, produit, etc.), nous avons conclu qu'elles devaient être incluses le plus tôt possible pour tendre vers une marque et une vision du produit unifiées avant de commencer à intégrer le design system dans le code. Ce n'est pas la norme dans le secteur et cette démarche peut même sembler un peu contre-intuitive. Pourtant l'intégration de toutes les équipes de design à votre design system avant le développement offre de nombreux avantages majeurs. Les équipes isolées sont ainsi impliquées et peuvent s'approprier le système dès son ébauche. Son adoption s'en trouvera d'autant plus simple si vous l'avez conçu ensemble. Si vous donnez l'impression d'imposer votre design system, mettre tout le monde sur la même longueur d'ondes se révélera être un processus long et chaotique qui nécessitera des remaniements, des changements radicaux et des conversations pénibles. D'après notre expérience, si tout le monde s'approprie le sujet dès le début, le processus apparaît bien plus simple et les relations plus saines. Ces efforts dès les premières phases assureront également un marketing externe bien plus cohérent (utilisation du même style visuel sur le site du marketing par rapport aux captures d'écran sur ce site, par exemple).

Ensuite, votre design system atteindra les équipes produit au sens plus large, permettant aux chefs de produit et aux développeurs de s'en servir et d'y contribuer. Puis, ayez pour objectif de partager cette nouvelle philosophie design avec le reste de l'entreprise (direction, commerciaux, etc.). À ce stade, vous devriez avoir les ressources et les données pour faire part des avantages de votre système et convaincre toutes les parties prenantes d'aborder tous les aspects business sous l'angle d'un bon design. Enfin, il ne vous restera plus qu'à partager votre système avec le reste du monde ! 🌏

Phase 1 : les équipes de design de produits

Quoi de mieux que d'éprouver votre design system avec vos équipes de design de produits ? Le premier effet majeur constaté est l'amélioration et la simplification des flux de travail des designers. Que vous utilisiez les bibliothèques Sketch ou un outil plus robuste (chez Workday, nous adorons Figma), les systèmes de ce type favorisent la cohérence et offrent des avantages tels que les mises à jour automatiques des composants et la gestion des versions. La documentation du design qui les accompagne encourage le partage des connaissances, réduit le nombre de questions et contribue à éliminer les silos de design. Lorsque nos mêmes ressources, méthodologies et philosophies sont la base d'un langage de design unifié, nous pouvons nous attaquer à des problèmes de design passionnants sans nous soucier des connaissances exclusives à certaines équipes, l'identité de la marque, la position des pixels et autres.

Cette phase lance également votre processus d'intégration intensif. Un design system est un écosystème en constante évolution, pas seulement un ensemble de composants et de couleurs. Il s'agit d'un référentiel de lignes directrices et une véritable façon de penser. La documentation et les ressources que vous fournissez doivent représenter plus de la moitié de votre design system (le reste sera votre ensemble de composants). Ces artefacts, s'ils sont extrêmement utiles aux équipes produit de votre entreprise, sont également d'excellents outils pédagogiques. Quand un nouveau designer ou développeur peut parcourir une liste des composants disponibles, accéder rapidement aux consignes d'utilisation et de contenu, retrouver les bonnes pratiques relatives au design, les lignes directrices liées aux couleurs ou encore les méthodologies de recherche, il se sent instantanément plus proche de l'entreprise, du produit et de ses collaborateurs. Pouvoir accéder facilement à ce contenu lui permet d'éliminer l'écart des connaissances et de créer un produit pertinent et cohérent avec votre design system en un rien de temps.

Phase 2 : les équipes de design transverses

À ce stade, vous pouvez présenter votre design system à tous les designers de l'entreprise. Dans les grandes structures avec plusieurs équipes de design au sein des départements, ces dernières commencent naturellement à diverger. En effet, elles se spécialisent et collaborent plus étroitement au sein de leurs propres équipes (ça arrive même aux meilleurs 😉). Cette tendance peut mener à des silos de design, composés d'équipes issues de diverses branches produits comme le marketing, la stratégie de marque, l'expérience client, etc. C'est en tenant compte de ces nouveaux contextes que votre design system commence vraiment à se transformer et, selon la taille de votre entreprise, il sera réellement mis à l'épreuve. C'est également l'occasion pour l'équipe design system d'obtenir un feedback concret, d'améliorer le flux de travail et de résoudre les problèmes majeurs. Si le travail de ces équipes est crucial à ce stade, c'est aussi le début d'un changement fondamental. Au fur et à mesure que les designers utiliseront les nouvelles ressources disponibles, ils s'investiront et commenceront à demander comment ils peuvent contribuer à la maintenance du système ou l'améliorer.

Cette étape lors du déploiement de votre système est l'occasion parfaite pour réunir les équipes qui travaillent dans ces silos (la plupart du temps les équipes produit et marketing/marque). Si ce processus sera sûrement lent, il est bon que tout le monde s'investisse pour faciliter l'adoption et l'unification de la vision de la marque et du produit avec un style et des composants partagés.

Les équipes de design au sens large en profiteront aussi puisque les améliorations de votre processus d'intégration du design (mentionnées en Phase 1) s'étendent à tous les designers rejoignant votre entreprise.

S'il est utile pour vos équipes de design de collaborer et d'avoir leurs cas d'utilisation dans votre design system, faites attention à ne pas devenir trop normatif avec les équipes qui rejoignent le projet plus tard. Par exemple, n'imposez pas de composants produit dans les designs marketing s'ils n'y ont pas leur place. Dans ce genre de situation, j'aime citer l'article de Bruno Bergher, Coherent, Not Consistent : « La cohérence, c'est s'assurer que chaque élément de votre produit donne l'impression qu'il y a sa place, et non pas essayer d'en faire des copier-coller. »

Phase 3 : les équipes de développement

L'étape suivante consiste à inviter le reste de chaque équipe produit à consommer et à contribuer. Il s'agit ici d'inviter les développeurs, les chefs de projets et de produit. La technologie design doit faire partie intégrante de votre entreprise pour simplifier les workflows des designers et faciliter l'adoption de votre design system par les équipes de développement. Dans le cadre de vos efforts en matière de technologie design, votre équipe doit être prête à créer, contrôler et maintenir des versions codifiées des primitives visuelles qui constituent les éléments de base de votre design system pour les développeurs. Ces versions incluent des jetons tels que les couleurs, les icônes, la typographie et des composants simples comme les boutons, les entrées et les menus. Ils constituent une source unique agréée et simplifient considérablement le processus de lancement et de transfert aux développeurs. Notre Workday Canvas Kit en est le parfait exemple : récemment mis en libre accès, il fournit des composants React et CSS (davantage de frameworks/plateformes seront pris en charge bientôt).

En plus d'une bibliothèque de composants, créer un endroit pour conserver toutes vos ressources et votre documentation peut s'avérer utile. La première étape pour favoriser l'adoption en dehors de l'équipe de design consiste à réaliser le site web Workday Design. Avec toutes ces ressources, sans oublier la documentation de votre design system, vous donnez les moyens aux chefs de produit et aux développeurs d'être opérationnels immédiatement et donc de créer des expériences cohérentes qui respectent la voix de votre produit, les standards UI et les lignes directrices relatives aux composants. Cette base de référence promet une atmosphère plus détendue lors des design reviews. Votre documentation servira de référence constante pour les développeurs, pour qu'ils aient moins besoin d'interroger les designers. Ces pratiques améliorent l'efficacité et assurent que les équipes produit utilisent les bons composants au bon moment. C'est le moyen le plus simple d'élargir l'audience de votre design system et de votre langage design. Je conseille fortement cette approche.

Phase 4 : la direction, les commerciaux et tous les autres

Jusqu'à cette phase, les seuls destinataires de votre design system sont les personnes qui créent vos produits. C'est très bien, mais que se passe-t-il si vous voulez que l'ensemble de votre entreprise aborde ses problèmes quotidiens en gardant à l'esprit la qualité du design ? Et si vous vouliez donner aux commerciaux les informations et les ressources nécessaires pour vendre votre entreprise, pas seulement comme un produit avec une bonne UX, mais comme une entreprise qui s'efforce d'être leader en matière de design ? C'est à ce moment-là que vous devez inclure ceux qui n'ont pas encore expérimenté directement les avantages de votre design system. Faire des présentations aux équipes de votre entreprise (nous les appelons « roadshows » chez Workday) peut vous aider à atteindre cet objectif. Vous pouvez couvrir les principes fondamentaux, la philosophie et les ressources de votre design system en faisant des démonstrations qui peuvent être converties en arguments de vente précieux face aux clients. Si possible, proposez des exercices qui encouragent la réflexion sur le design afin de favoriser cette mentalité et de susciter l'intérêt. Vous trouverez des exemples d'exercices dans la section Playbook de notre site consacré au design. Un objectif fondamental de ce processus est d'encourager la prise de conscience de la valeur, de l'objectif et du potentiel que votre design system apporte à votre entreprise.

Phase 5 : le public

La dernière phase du déploiement de votre design system est probablement la plus intéressante. C'est à ce moment que vous pourrez partager tout votre dur labeur avec le public. Même si ce n'est pas une étape obligatoire pour tous les design systems, je pense vraiment que les plus grandes équipes de design devraient y songer. Avant de passer à cette étape, assurez-vous d'avoir suffisamment de documentation et de composants à disposition en comparant votre bibliothèque aux plus populaires comme Material UI et Bootstrap.

L'accès international à votre design system stimulera automatiquement l'adoption et la sensibilisation (en interne comme en externe) à mesure qu'il sera repris par d'autres sites et points de vente. Encore une fois, la documentation de votre design jouera un rôle majeur ici. Si votre entreprise propose aux utilisateurs de créer des expériences personnalisées dans votre application (comme Workday Cloud Platform), votre design system sera une prodigieuse ressource pour aider les clients et les exécutants tiers à créer des expériences cohérentes et agréables dans votre écosystème. Enfin et surtout, dévoiler votre design system au monde aura un impact significatif sur votre processus de recrutement. Rivaliser avec les grandes entreprises du secteur en matière de design attirera des talents de haut niveau et attisera la curiosité des candidats orientés design, notamment en matière d'évolutivité du design.

Ces phases exécutées dans cet ordre sont idéales, mais il ne faut pas nécessairement les suivre de manière isolée ou à la lettre. Comme nous, vous pourrez commencer naturellement une phase sur le tard ou en suivre 2 à la fois. Elles sont simplement une façon de conceptualiser les différents publics cibles et une suggestion de l'ordre approximatif dans lequel vous devrez présenter votre design system. Chaque phase doit être un processus continu et le travail réalisé précédemment doit se poursuivre à mesure que vous élargissez votre design system à un plus grand nombre d'utilisateurs.

L'objectif de notre équipe de design est de donner les moyens de créer des expériences plaisantes au sein de Workday tout en gardant toujours à l'esprit un design de qualité. Compte tenu de l'envergure de Workday, cette tâche peut parfois sembler insurmontable. Cependant, le fait de diviser nos étapes en phases nous a permis de progresser. Quelle que soit la taille de votre entreprise, la clé est de diviser le déploiement de votre design system en objectifs plus modestes et facilement réalisables. Adoptez cette approche et vous obtiendrez en un rien de temps le soutien de toute l'entreprise pour un design system fonctionnel et évolutif ! J'aimerais beaucoup connaître vos expériences lors de la mise en place de votre design system et son évolution par rapport aux publics mentionnés ci-dessus.