Decagon usa la IA para la saturación de sistemas de diseño
La plataforma de experiencia del cliente, en rápido crecimiento, explica cómo Figma MCP y Figma Make fueron clave para escalar su nuevo sistema de diseño y satisfacer las solicitudes de los clientes.
Compartir Decagon usa la IA para la saturación de sistemas de diseño
El servicio al cliente es el siguiente sector que la IA está a punto de transformar, y Decagon está creando la plataforma para hacerlo. Con solo tres años de trayectoria, los agentes de IA de la empresa ofrecen servicios por voz, chat y correo electrónico, sustituyendo las colas de tickets y los tiempos de espera que han caracterizado al servicio de atención al cliente durante décadas. Así es como Decagon entró en la lista Disruptor 50 de la CNBC, pero lo que les llevó hasta allí no es solo lo que crean, sino cómo lo crean.
Crear un sistema de diseño que garantice la calidad a gran escala
En una empresa nativa de IA como Decagon, el ciclo del diseño al código avanza muy rápido, pero puede fallar con la misma rapidez. Los agentes de programación necesitan datos precisos para generar resultados fiables. Pero sin un sistema de diseño, cada componente se reduce a una decisión subjetiva, y eso no es escalable. Cuando la diseñadora de producto Jennifer Xu se incorporó a Decagon, no había ningún sistema de diseño; solo un producto en crecimiento y un equipo que avanzaba tan rápido que ni siquiera notaba su ausencia. La falta de coherencia en toda la plataforma mermaba el aspecto pulido que necesitaban ofrecer a los clientes empresariales, y las idas y venidas entre diseño y desarrollo les costaban tiempo y esfuerzo. Para crear su sistema de diseño, llamado Deco, los diseñadores y los ingenieros trabajaron codo con codo desde el principio. “Pudimos pensar en muchos de los casos extremos y en lo que ya existía en el código desde el principio”, dice Jennifer. Eso supuso abordar cuestiones que habría sido fácil posponer y que habría resultado caro volver a tratar más adelante: ¿Qué ocurre en el modo de enfoque? ¿Qué estados necesita cada componente: desactivado, solo lectura, error, advertencia? ¿Con marcador o sin él?
El resultado es una biblioteca de Figma para toda la organización que ahora incluye cientos de componentes, estilos y variables que abarcan la gran mayoría de los casos de uso en toda la plataforma para varios equipos. Según los datos analíticos de la biblioteca de Figma, se registraron decenas de miles de incorporaciones en 30 días, señal de que la gente la está usando. “Con una biblioteca bien desarrollada, ya no discutimos sobre estilos ni sobre la implementación”, dice Jennifer. “Los ingenieros tienen claro qué botón o tabla deben usar. Además, esto significa que tenemos un vocabulario común. Como diseñadora, puedo basarme en elementos básicos muy similares a los que usa un ingeniero, así que cuando creamos un producto o pensamos en un flujo, es mucho más fácil comunicarnos”.
Deco se publica para toda la organización, ayudando a los diseñadores a crear nuevas pantallas a partir de componentes ya existentes, en lugar de tener que crearlas desde cero. “Además, a los desarrolladores les resulta más fácil crear trabajos que se ajusten a nuestros objetivos generales de diseño”, dice Jennifer. “Como intentamos lanzar las cosas rápido, queremos asegurarnos de que todo siga estando en consonancia, y un sistema de diseño es una forma genial de tener una única fuente de verdad”.
Cerrar la brecha entre el diseño y el código
Los agentes de programación no interpretan las especificaciones como lo haría un desarrollador; solo trabajan con lo que se les da. Si lo que se les proporciona no es coherente, el resultado lo refleja. En Decagon, esa entrega solía suponer un ir y venir habitual: los diseñadores exportaban las especificaciones, los desarrolladores las interpretaban, las discrepancias se detectaban en la revisión y el ciclo se repetía. El servidor MCP de Figma cambió eso.
El equipo de ingeniería de Decagon trasladó los componentes del sistema de diseño a Storybook y, a continuación, creó una herramienta para que sus programadores utilizaran los componentes exactos a la hora de implementar los diseños. Otra habilidad permite a los diseñadores añadir nuevos componentes, manteniendo Figma y el código siempre sincronizados. “Nuestros agentes tienen Figma MCP activado, así que todas las especificaciones, el código y el lienzo se mantienen en un mismo ciclo, en lugar de tener que ir y venir constantemente”, explica Jennifer.
Nuestros agentes tienen Figma MCP activado, así que todas las especificaciones, el código y el lienzo se mantienen en un mismo ciclo, en lugar de tener que ir y venir constantemente.
Conectarnos a Deco mediante Figma MCP aceleró el ritmo de las iteraciones. Ahora, los agentes de programación pueden leer directamente desde Figma para crear puntos de partida de alta fidelidad. “Con MCP, solo tengo que copiar y pegar un enlace de mi Figma en el agente de programación, y este no solo utilizará la capacidad de obtener el contexto del diseño, sino que también lo asignará a los componentes de nuestro sistema de diseño”, dice Jennifer. “Puede crear elementos de muy alta fidelidad y muy cercanos a nuestro diseño sin tener que hacer un montón de iteraciones minuciosas”.
La obsesión con el cliente, hecha realidad
Aproximadamente el 70 % de la hoja de ruta de productos de Decagon proviene directamente de los clientes. No es solo su filosofía; es la base de cómo trabaja el equipo. “Hacemos sesiones prácticas sobre la hoja de ruta con el equipo del cliente para asegurarnos de que las funciones que lanzamos responden a lo que necesitan”, dice Bihan Jiang, directora de producto de Decagon. Poder presentar maquetas y prototipos funcionales en Figma es fundamental para ese proceso. “Herramientas como Figma Make y los conectores con todos los sistemas que usamos nos permiten elevar el listón de los productos que estamos creando”, añade.
En lugar de recopilar requisitos y presentar un producto final, el equipo ahora puede crear 10 prototipos diferentes y mostrárselos a 10 clientes distintos. Dice Bihan, “El resultado es un producto mejor que se crea mucho más rápido”.
Herramientas como Figma Make y los conectores con todos los sistemas que usamos nos permiten elevar el listón de los productos que estamos creando.
Los paneles interactivos, las métricas y los análisis basados en IA son fundamentales en la oferta de Decagon para aquellos clientes que necesitan entender tanto los datos cuantitativos como los cualitativos, como los índices de satisfacción del cliente y el tono de las conversaciones en todos los canales. Un gerente de producto de Decagon usa Make para crear prototipos de nuevos gráficos y rediseñar páginas con el fin de mostrar diferentes conjuntos de datos según lo que piden los clientes. “El gerente de producto podría decir: ‘Quiero que lo hagas al estilo de esta página‘ y pegar una captura de pantalla de Figma, lo que nos permitiría pensar en la herramienta y el gráfico en el contexto de la plataforma en su conjunto“, explica Jennifer. “Entonces podríamos hablar con nuestro equipo de ingeniería y con el equipo de atención al cliente para ver si el cambio era realmente útil antes de empezar a invertir muchos recursos de ingeniería y diseño en él”.
Se aplicó el mismo principio cuando el equipo quiso rediseñar un gráfico interactivo para que quedara más claro y fuera más fácil de usar. El gerente de producto puso el gráfico original en Make, describió los cambios que quería y se lo mandó al desarrollador. Jennifer dice: “Fue mucho más sencillo que el proceso de explicárselo a un diseñador, que este creara una maqueta y que luego el ingeniero lo desarrollara. Nos ahorró tiempo de desarrollo”.
Los prototipos de alta fidelidad permiten al equipo trabajar en un medio visual desde el principio, en lugar de tener que trasladar las ideas de los documentos a las retículas. “Como diseñadora, pienso de forma visual, y cuando trabajas en análisis de datos, el problema es visual“, dice Jennifer. “Lo veo como una imagen, no como un documento. Así que resulta útil empezar a pensar desde el principio de la misma forma en que se presenta el producto final”. Ese instinto de concretar las ideas —y mostrárselas a los clientes cuanto antes— se ha convertido en parte del ADN de Decagon: “Forma parte de nuestra cultura usar Figma en nuestras sesiones de brainstorming. Esto hace que la colaboración sea más rápida y más fiel a la realidad de lo que solía ser”.
Decagon no solo pone la IA en el centro de la plataforma que ofrece, sino también en cómo la desarrolla. El sistema de diseño mantiene la calidad del trabajo a medida que el equipo crece. MCP mantiene el diseño y el código alineados, para que nada se pierda en el proceso. Y Figma Make pone el pensamiento visual al alcance de cualquiera que tenga una idea que merezca la pena probar. “Este nuevo mundo del diseño es realmente emocionante”, dice Jennifer, “y creo que estamos realmente a la vanguardia. Nos permite lanzar productos de alta calidad muy rápidamente”. Para Decagon, ganar velocidad sin sacrificar la calidad es su verdadera ventaja competitiva.
