Naviguer jusqu'au contenu principal

Comment Adyen réinvente le processus de design — avec l'IA au cœur de son approche

Une personne tient un terminal de paiement par carte Ingenico affichant un montant de 75,98 sur un comptoir en bois, avec un ordinateur portable à côté d'elle.
Adyen est une fintech néerlandaise qui propose une plateforme de paiement unique permettant aux entreprises d'accepter des paiements en ligne, via une application et en magasin, partout dans le monde.

Avec la généralisation des grands modèles linguistiques, les designers d’Adyen ont suivi la même voie que leurs homologues du monde entier : ils se sont lancés dans des expérimentations, convaincus que l’IA allait bouleverser en profondeur le mode de conception des produits. Au début, l’enthousiasme était au rendez-vous, mais la coordination faisait défaut ; l’équipe UX d’Adyen a donc adopté une approche réfléchie. Une structure a été mise en place, et ce très rapidement.

« Nous considérons l’IA comme un outil destiné à aider les spécialistes de l’expérience utilisateur, et non à les remplacer », affirme Sergii Polkovnikov, Designer principal, Expérience produit et membre de l'équipe Design System chez Adyen. Cette conviction sous-tend l’un des programmes d’adoption de l’IA les plus méthodiques dans le domaine de la conception fintech.

Du cloisonnement à une orientation commune

Hong Zou, qui dirige la division Expérience produit chez Adyen, a reconnu que l'exploration fragmentée avait ses limites. Elle a réuni un groupe de professionnels motivés et volontaires afin d’explorer ensemble, de manière systématique, les capacités de l’IA. Le groupe a cartographié de bout en bout le processus de création existant chez Adyen, puis a testé des outils d’IA à chaque étape, en les évaluant selon un modèle cohérent : les éléments intégrés, les résultats obtenus et leur réutilisation éventuelle par le designer dans un projet concret. Les résultats ont ensuite été synthétisés, permettant de dresser un tableau collectif des domaines dans lesquels l’IA s’avérait réellement utile et de ceux où elle démontrait ses limites.

Cette équipe a également organisé des réunions internes pour remettre en cause l’idée du remplacement par l'IA, un acte délibéré de leadership culturel qui a défini l'orientation pour la suite.

Une diapositive de webinaire indiquant « Comment Adyen transforme le processus de développement de produit avec Figma Make et MCP », avec Laura Fehre, Designer Advocate chez Figma, parlant dans une fenêtre vidéo adjacente.
Regardez l’intégralité du webinaire dans lequel Adyen explique la refonte complète de son processus de développement de produit.

Leurs expérimentations ont mis en évidence une opportunité plus vaste : un univers où, en tirant parti des atouts de l’IA, les trois métiers liés à l’expérience utilisateur (UX) chez Adyen — concepteur de produit, chercheur UX et rédacteur UX — pourraient évoluer vers une fonction unique d’expérience produit alimentée par l’IA. S'appuyant sur les données recueillies par le groupe, Hong Zou a dirigé cette évolution organisationnelle.

Le véritable goulot d'étranglement

Avant de procéder à toute refonte, Adyen devait identifier où se situaient réellement les principaux points de friction dans le processus de conception.

« L'IA peut nous aider à créer des choses à une vitesse incroyable », observe Hong Zou. « Mais cela signifie également qu'elle peut nous aider à créer très rapidement quelque chose qui ne convient pas. C'est ce que nous voulons éviter. »

Le goulot d’étranglement ne résidait pas dans la production créative, mais dans le cycle de clarification. Dans un flux de travail linéaire, de type chaîne de montage, un designer reçoit un cahier des charges et se retrouve face à deux options tout aussi coûteuses l’une que l’autre : organiser plusieurs réunions de mise au point pour clarifier les intentions avant de commencer, ou émettre des hypothèses, passer une semaine à élaborer un concept, puis découvrir lors de la session de révision que le chef de projet envisageait tout autre chose. Les outils d’IA qui accélèrent la phase d’idéation ne résolvent pas ce problème. Ils ne font que vous mener plus rapidement à la mauvaise réponse.

La solution d’Adyen a consisté à modifier en premier lieu le modèle de collaboration. L’entreprise a mené une petite expérience — un « sprint d’innovation optimisé par l’IA » — au cours de laquelle des product managers et des designers ont travaillé physiquement côte à côte pendant une semaine sur des projets à faible risque, créant ensemble des solutions en temps réel. La rapidité s'est améliorée sans sacrifier la qualité. L’équipe a ainsi gagné en confiance pour passer à l’échelle supérieure.

Design Sprint 3.0

La version à plus grande échelle a pris la forme d’un « Design Sprint optimisé par l’IA » : 30 participants issus des différents services de technologie de l’entreprise ont travaillé sur 10 projets concrets de la roadmap lors d’un seul Makeathon de quatre heures. Ce qui prenait habituellement quatre à cinq jours a été condensé en un seul après-midi très intense, Figma Make se chargeant du travail de wireframing et de prototypage qui, auparavant, absorbait la majeure partie de ce temps.

Adyen a utilisé Figma Make comme principal outil de prototypage en raison de son intégration avec les workflows existants.

Les ingénieurs étaient présents. Non pas en tant que réviseurs, mais comme cocréateurs. Comme l'a expliqué Hong Zou : « Si vous n’invitez pas l’équipe d’ingénierie dès le début à la fête de la solution, elle finira par arriver plus tard pour couper la musique. »

Le sprint a reposé sur trois principes. Premièrement, la coordination avant l'exécution : les équipes devaient avoir défini le parcours et identifié la portée des problèmes avant de recourir à un outil d'IA.f Deuxièmement, la cocréation : les project managers, les designers et les ingénieurs endossaient tous le même rôle : celui de créateurs du produit qu'ils développaient. Troisièmement, l’application délibérée de techniques classiques de développement de produit — croquis sur papier, cartographie des témoignages d'utilisateur, cadres de hiérarchisation des priorités — afin de maintenir l’IA dans son rôle légitime : accélérer l’exécution, et non se substituer au jugement humain.

Les résultats ont été évalués dans trois domaines.

  • En termes de qualité, la satisfaction globale s'est établie à 5,44 sur 7 : les product managers et les ingénieurs ont attribué principalement des notes de 6 et de 7, tandis que les designers, dont les exigences en matière d'exploration de solutions sont naturellement plus élevées, ont accordé des notes proches de 5.
  • En termes de rapidité, les participants ont indiqué avoir accompli en quelques heures un travail qui leur prenait auparavant plusieurs semaines, soit une vitesse estimée entre 10 et 20 fois supérieure.
  • Concernant la collaboration, la note attribuée au travail d’équipe a atteint 6,17, la quasi-totalité des participants affirmant que ce format avait considérablement amélioré le travail collectif. Le sprint est désormais en cours de standardisation et de déploiement à grande échelle pour devenir le mode de travail par défaut chez Adyen.

Du canvas au code en quelques heures

Tandis que Hong Zou travaillait sur le passage du problème à la solution, le concepteur de produits Hanbin Chang se penchait sur l'étape suivante : le passage de la solution à la mise en œuvre. Pour la plupart des équipes de design, cette étape correspond au transfert : des heures d’annotation, des réunions de coordination, puis une phase de silence pendant laquelle les ingénieurs transposent manuellement les fichiers Figma en code. Arrivé au stade de l'assurance qualité, il reste généralement peu de temps pour corriger les incohérences visuelles relevées dans le design. Les équipes font alors des compromis. La dette de design s'accumule.

Hanbin Chang et ses collègues ont créé un nouveau workflow en utilisant l'intégration MCP de Figma aux côtés d'un assistant de codage IA et d'un sandbox local pré-chargé avec les composants et les tokens du design system d'Adyen. Un designer travaille dans Figma ; l'IA analyse les frames et les transpose en code conforme au design system ; les designers et les ingénieurs examinent ensemble le résultat avant de le mettre en production. Pas de séances d'annotation. Pas de réunions de coordination. Pas de phase de silence.

« Nous avons remplacé un processus qui prenait des semaines par un autre qui ne prend que quelques heures », explique Hanbin Chang. Le chiffre à retenir est une accélération de 90 % de bout en bout. Les développements d'UI qui prenaient deux à trois jours aux ingénieurs prennent maintenant environ deux heures de travail collaboratif. Le processus d'assurance qualité est considérablement réduit, car les designers peuvent valider immédiatement le résultat dans le sandbox local.

La qualité aussi s'améliore. Dans l'ancien workflow, les ingénieurs faisaient correspondre les fichiers Figma manuellement : ils lisaient les spécifications, interprétaient les valeurs d’espacement et sélectionnaient les composants de mémoire. C’est lors de cette étape d’interprétation que naissent les incohérences. Dans le nouveau workflow, l’IA analyse directement le design via une API structurée et recoupe trois sources : une cartographie des composants reliant chaque composant Figma à son équivalent exact en code, les définitions des tokens du design system, et les conventions de codage qui régissent les modalités d’application de ces composants et tokens. L’interprétation humaine, principale source de divergences entre la conception et le code, est ainsi éliminée du processus.

« Le principal avantage de ce workflow ne réside pas seulement dans la rapidité », souligne Hanbin Chang. « Il permet à vos collaborateurs de concentrer leurs efforts sur les problèmes pour lesquels ils sont les plus qualifiés. »

Le workflow est particulièrement efficace pour trois types de tâches : les mises à jour de contenu, les modifications de l’interface utilisateur côté client et les migrations de design systems. Dans les trois cas, le résultat est conforme au design system et prêt à être validé en quelques heures au lieu de plusieurs jours.

Améliorer la lisibilité du design system pour les machines

Le troisième volet des travaux d’Adyen en matière d’IA se situe en amont de tout le reste : le design system lui-même. Bento, le design system d'Adyen,comprend 74 composants, est utilisé par 52 équipes et compte plus de 19 000 instances dans le code de production. Il est abouti, largement adopté et conçu pour les humains. C’est justement ce dernier point qui est devenu un problème.

Plus les agents de codage basés sur l’IA gagnaient en capacités et étaient utilisés par les ingénieurs d’Adyen, plus l’équipe chargée du design system découvrait des lacunes. Les noms de propriété ne correspondaient pas entre le design et le code. Les emplacements des composants n'étaient pas gérés de manière cohérente. Les agents IA rencontraient des difficultés car la documentation avait été rédigée pour être interprétée par des humains, et non traitée par des machines.

« Nous avons clairement pris conscience que notre design system avait été conçu pour les développeurs et les designers qui l’utilisent », explique Sergii Polkovnikov. « Mais il n’a jamais été conçu pour les machines. »

Aperçu détaillé des composants du design system Bento d’Adyen, comprenant notamment un tableau de données filtrable, des cartes, des boutons, des notifications toast, un calendrier et un panneau de code JSON.
Adyen a réalisé qu'un nouvel utilisateur était apparu pour son design system, Bento. L’entreprise devait s’assurer qu’il était adapté aux agents IA.

L'équipe a organisé un atelier interne, cartographié les principaux scénarios faisant appel à des agents IA et identifié le contexte dont chaque agent aurait besoin à chaque étape. Cet exercice a donné naissance à une architecture à quatre couches actuellement en cours de développement : un calque unique de référence (tokens de design au format YAML, composants Vue, bibliothèques Figma), une couche de connaissances lisible par les machines (manifestes de composants, manifestes de tokens, mappages CodeConnect, motifs de pages et modèles), une couche d’outils d’IA (le serveur MCP propre à Bento aux côtés du MCP de Figma), et une couche de saisie utilisateur accessible depuis n’importe quel environnement — CLI, IDE ou Figma lui-même.

Un parcours qui en vaut la peine

Les principes qui ont guidé le travail d’Adyen sont transposables : la coordination avant l'exécution ; l'implication des ingénieurs dès l’identification du problème, et non au moment du transfert de responsabilité ; la modification du workflow avant celle des outils ; et l'assurance que tout élément conçu pour les humains puisse également être lu par les machines. Les résultats sont concrets : une exploration des solutions 10 à 20 fois plus rapide, un délai de livraison du design au code réduit de 90 %, et un design system entièrement repensé pour un monde où les agents IA sont des consommateurs à part entière.

La leçon à tirer de l'expérience d'Adyen n'est pas que l'IA facilite le design. C’est que l'IA, utilisée à bon escient, permet de repenser le design lui-même, et que cette démarche mérite d’être considérée avec sérieux.

Découvrez comment Figma vous aide à faire évoluer le design

Contactez-nous pour découvrir comment Figma peut aider votre entreprise à accroître l'impact du design.

Contactez notre équipe

Découvrez comment Figma vous aide à faire évoluer le design

Un design d'exception peut aider votre produit et votre marque à se différencier. Et comme on ne crée de grandes choses qu'à plusieurs, Figma rassemble les équipes produit au sein d'un workflow de conception rapide et plus inclusif.

Contactez-nous pour découvrir comment Figma peut aider votre entreprise à accroître l'impact du design.

Nous verrons comment Figma peut vous aider à :

  • Centraliser chaque étape du processus de conception, de l'idéation à la création en passant par la mise en œuvre
  • Accélérer les workflows de conception avec des design systems partagés par toute l'entreprise
  • Favoriser l'inclusion au sein du processus de l'équipe avec des produits web accessibles et simples d'utilisation

Contactez notre équipe

En cliquant sur « Envoyer », vous acceptez nos conditions d'utilisation et notre politique de confidentialité.

Powered by Fruition