Comment Decagon utilise l'IA pour la saturation du système de design

Le service client est la prochaine industrie que l'IA est prête à remodeler, et Decagon construit la plateforme dans cette optique. Trois ans seulement après son lancement, les agents d'IA de l'entreprise couvrent la voix, le chat et l'e-mail, remplaçant les files de tickets et les temps d'attente qui définissaient le service client depuis des décennies. C'est ainsi que Decagon s'est retrouvé sur la liste CNBC Disruptor 50 – mais ce qui l'y a mené n'est pas seulement ce qu'il conçoit. C'est la manière dont il conçoit.

Concevoir un design system pour garantir la qualité à grande échelle

Dans une entreprise native de l'IA telle que Decagon, la boucle conception vers code avance rapidement, mais elle peut se défaire tout aussi rapidement. Les agents de codage ont besoin d'entrées précises pour produire des résultats fiables. Mais sans design system, chaque composant se résume à une décision subjective – et cette approche ne peut pas évoluer. Lorsque la product designer Jennifer Xu a rejoint Decagon, il n'y avait pas de design system, mais simplement un produit en expansion et une équipe se déplaçant suffisamment vite pour en ressentir l'absence. L'incohérence à travers la plateforme sapait le niveau de finition qu'il fallait apporter aux clients professionnels, et les allers-retours entre la conception et le développement coûtaient du temps et des efforts. Pour concevoir leur design system, appelé Deco, les designers et les ingénieurs ont travaillé main dans la main dès le début. « Nous avons pu penser à de nombreux cas particuliers et à ce qui existe déjà dans le code dès le départ », déclare Jennifer. Cela signifiait se pencher sur des questions qui auraient été faciles à différer et coûteuses à revoir plus tard : que se passe-t-il en mode focus ? De quels états chaque composant a-t-il besoin – désactivé, lecture seule, erreur, avertissement ? Substitut ou pas de substitut ?

Il en résulte une bibliothèque à l'échelle de l'organisation dans Figma, qui comprend maintenant des centaines de composants, de styles et de variables couvrant la grande majorité des cas d'utilisation sur toute la plateforme pour plusieurs équipes. L'analyse de données de la bibliothèque de Figma révèle que celle-ci a enregistré des dizaines de milliers d'inserts en 30 jours, ce qui montre qu'elle est utilisée. « Avec une bibliothèque bien fournie, nous ne débattons pas des styles ou de la mise en œuvre », déclare Jennifer. « Les ingénieurs ont une vue claire du bouton ou du tableau à utiliser. Cela signifie aussi que nous avons un vocabulaire commun. En tant que designer, je peux me baser sur des primitives très similaires à celles qu'un ingénieur utilise, donc lorsque nous créons un produit ou que nous réfléchissons à un flux, il est beaucoup plus facile de communiquer. »

Deco est publié dans toute l'organisation, aidant les designers à assembler de nouveaux écrans à partir de composants existants, plutôt que de les concevoir à partir de zéro. « C'est aussi plus facile pour les développeurs de créer un travail aligné sur nos objectifs de conception globaux », indique Jennifer. « Comme nous essayons d'expédier rapidement, nous voulons nous assurer que tout est toujours aligné, et un design system est un moyen vraiment excellent de disposer d'une source unique de vérité. »

Réduire l'écart entre conception et code

Les agents de codage n'interprètent pas les spécifications de la même manière qu'un développeur pourrait le faire ; ils ne travaillent qu'avec les données qui leur sont fournies. Si ces données sont incohérentes, le résultat le reflète. Chez Decagon, ce transfert signifiait auparavant un va-et-vient familier : les designers exportaient des spécifications, les développeurs les interprétaient, les incohérences étaient détectées lors des examens et le cycle se répétait. Le serveur MCP de Figma a changé la donne.

L'équipe d'ingénierie de Decagon a déplacé les composants du design system vers Storybook, puis a créé une compétence pour que ses agents de codage utilisent les composants exacts lors de la mise en œuvre des designs. Une autre compétence permet aux designers d'ajouter de nouveaux composants, ce qui permet à Figma et au code de demeurer continuellement en parfaite synchronisation. « Comme le serveur MCP de Figma est activé pour nos agents, l'ensemble des spécifications, du code et du plan de travail reste dans une seule boucle au lieu de devoir faire des allers-retours », explique Jennifer.

Se connecter à Deco via le serveur MCP de Figma a accéléré le rythme des itérations. Désormais, les agents de codage peuvent lire directement à partir de Figma pour créer des points de départ haute fidélité. « Avec MCP, je peux simplement copier-coller un lien de mon instance Figma dans l'agent de codage, et ce dernier va non seulement récupérer le contexte du design, mais aussi le mapper aux composants de notre design system », explique Jennifer. « Il peut créer des choses vraiment haute fidélité et proches de notre design sans avoir à faire beaucoup d'itérations minutieuses. »

L'obsession du client, rendue tangible

Environ 70 % de la roadmap produit de Decagon provient directement des clients. Ce n'est pas simplement sa philosophie : c'est la clé de son mode de conception. « Nous organiserons des sessions pratiques de planification de roadmap avec l'équipe d'un client pour nous assurer que les fonctionnalités que nous livrons répondent à ses besoins », déclare Bihan Jiang, directrice produit chez Decagon. Être en mesure de présenter des mock-ups et des prototypes fonctionnels dans Figma est central à ce processus. « Des outils tels que Figma Make et les connecteurs à tous les systèmes qu'on utilise nous permettent de repousser les limites de ce qu'on peut concevoir », continue-t-elle.

Au lieu de recueillir les exigences et de présenter un produit final, l'équipe peut désormais créer 10 prototypes différents et les montrer à 10 clients différents. « Il en résulte un meilleur produit conçu beaucoup plus rapidement », indique Bihan.

Les tableaux de bord interactifs, les métriques et les informations basées sur l'IA sont au cœur de ce que Decagon offre à ses clients qui ont besoin de comprendre à la fois les données quantitatives et qualitatives, telles les scores de satisfaction client et les sentiments dans les conversations à travers les canaux. Un PM de Decagon utilise Make pour créer les prototypes de nouveaux graphiques et reconcevoir des pages afin d'afficher différents jeux de données en fonction des demandes des clients. « Le PM peut rédiger le prompt « Je veux que tu le fasses dans le style de cette page » et coller une capture d'écran Figma, et cela nous permet de réfléchir à l'outil et au graphique dans le contexte de la plateforme globale », explique Jennifer. « Nous pouvons alors discuter avec notre équipe d'ingénierie et notre équipe orientée client pour voir si le changement a été ou non réellement utile avant de commencer à lui consacrer une quantité de ressources en ingénierie et en conception. »

Le même principe s'est appliqué lorsque l'équipe a voulu repenser un graphique interactif pour qu'il soit plus clair et plus convivial. Le PM a intégré le graphique d'origine dans Make, a décrit les modifications souhaitées, puis l'a envoyé au développeur. « Ça a été beaucoup plus simple que le processus où ceci est traduit pour un designer, un designer crée une maquette, puis un ingénieur la développe. Cela a réduit le temps de développement » indique Jennifer.

Les prototypes haute fidélité permettent à l'équipe de travailler sur un support visuel dès le départ, plutôt que de traduire les idées des documents vers les wireframes. « En tant que designer, je pense visuellement, et quand vous travaillez sur des analyses de données, le problème est visuel », dit Jennifer. « Je l'observe comme une image, pas comme un document. Donc commencer à penser directement dans la modalité du produit final, dès le départ, est utile. » Cet instinct de rendre les choses concrètes – et de les présenter rapidement aux clients –fait désormais partie de l'ADN de Decagon : « Utiliser Figma dans le cadre de notre brainstorming fait vraiment partie de notre culture. Cela permet de collaborer plus rapidement et à un niveau de fidélité bien plus élevé qu'avant. »

Decagon centre l'IA non seulement dans la plateforme qu'il offre, mais aussi dans la façon dont il la construit. Le design system maintient la qualité constante à mesure que l'équipe évolue. Le serveur MCP maintient le design et le code alignés, de sorte qu'aucune donnée n'est perdue dans la traduction. Et Figma Make met la pensée visuelle à la portée de tous ceux qui ont une idée à tester. « Ce nouveau monde du design est vraiment captivant », indique Jennifer, « et je pense que nous en sommes vraiment à l'avant-garde. Cela nous permet d'expédier des produits de haute qualité très rapidement. » Pour Decagon, gagner en vitesse sans sacrifier la qualité est le véritable avantage.