Como a Decagon usa IA para saturação de design systems

O atendimento ao cliente é o próximo setor a ser remodelado pela IA. A Decagon está construindo a plataforma para isso. Em apenas três anos, os agentes de IA da empresa abrangem voz, chat e e-mail, substituindo as filas de tíquetes e os tempos de espera que, por décadas, definiram o atendimento ao cliente. É assim que a Decagon entrou na lista CNBC Disruptor 50. No entanto, a empresa não chegou lá somente pelo que construiu, mas sim pela forma como construiu.

Construir um design system para qualidade em grande escala

Em uma empresa nativa de IA como a Decagon, o ciclo do design ao código avança rapidamente, mas está sujeito a falhas igualmente rápidas. Os agentes de programação precisam de informações precisas para gerar resultados confiáveis. No entanto, sem um design system, cada componente se resume ao uso de bom senso, um processo que não é escalável. Quando a designer de produto Jennifer Xu ingressou na Decagon, não havia um design system, mas apenas um produto em crescimento e uma equipe ágil o bastante para sentir essa lacuna. A inconsistência em toda a plataforma dificultava o refinamento necessário para atrair clientes de nível empresarial. Além disso, o grande número de iterações entre design e desenvolvimento exigia tempo e esforço adicionais. Para construir o Deco, o design system da empresa, designers e engenheiros trabalharam juntos desde o início. "Desde o início, conseguimos levar em conta a maioria dos casos extremos e o código já existente", explicou Jennifer. Isso significava lidar com questões que seria fácil adiar, mas teriam um alto custo quando retomadas mais tarde, como: O que acontece no modo de foco? Quais os estados necessários para cada componente, como desativado, somente leitura, erro, aviso? Com ou sem texto de apoio?

O resultado é uma biblioteca no Figma que abrange toda a organização, incluindo agora centenas de componentes, estilos e variáveis que cobrem a grande maioria dos casos de uso em toda a plataforma para várias equipes. De acordo com as análises da biblioteca do Figma, foram registradas dezenas de milhares de inserções em 30 dias, um sinal de que as pessoas a estão usando. “Com uma biblioteca bem estruturada, não estamos debatendo estilos ou implementação”, afirmou Jennifer. “Os engenheiros têm uma visão clara de qual botão ou tabela usar. Isso também significa que temos um vocabulário compartilhado. Como designer, posso me apoiar em primitivas muito semelhantes às dos engenheiros. Assim, quando estamos construindo um produto ou pensando em um fluxo, a comunicação fica muito mais fácil.”

O Deco é publicado para toda a organização, ajudando designers a montar novas telas a partir de componentes existentes, em vez de construí-las do zero. “Também é mais fácil para os desenvolvedores criar um trabalho alinhado aos nossos objetivos gerais de design”, disse Jennifer. “Como estamos tentando acelerar os lançamentos, queremos ter certeza de que todo o alinhamento seja preservado. Um design system é realmente uma maneira excelente de contar com uma única fonte de verdade.”

Como fechar o ciclo entre design e código

Agentes de programação não interpretam especificações da mesma forma que um desenvolvedor; eles trabalham apenas com as informações que recebem. Quando elas são inconsistentes, o resultado também será. Na Decagon, esse handoff costumava levar a interações já conhecidas: designers exportavam especificações, desenvolvedores as interpretavam, a revisão revelava inconsistências e o ciclo se repetia. Com o servidor do Figma MCP, tudo mudou.

A equipe de engenharia da Decagon moveu os componentes do design system para o Storybook e criou uma habilidade para que os agentes de programação usassem o componente exato na implementação de designs. Outra habilidade permite que designers adicionem novos componentes, mantendo o Figma e o código continuamente sincronizados. “O MCP do Figma está ativado para os agentes. Assim, todas as especificações, código e tela de trabalho permanecem em um único ciclo, sem necessidade de passar por inúmeras iterações”, comentou Jennifer.

A conexão ao Deco por meio do Figma MCP acelerou as iterações. Agora, os agentes de programação conseguem ler diretamente do Figma para criar pontos de partida de alta fidelidade. “Com o MCP, posso simplesmente copiar e colar um link do Figma no agente de programação. Além de usar a habilidade de obter contexto de design, ele também cria o mapeamento para os componentes do design system”, afirmou Jennifer. “Ele pode criar coisas com uma fidelidade realmente alta e alinhada ao nosso design, sem precisar de muitas iterações detalhadas.”

Obsessão pelo cliente em forma tangível

Cerca de 70% do roteiro de produtos da Decagon vem diretamente dos clientes. Além de ajudar a definir a filosofia dos produtos, esse feedback é central para a forma como eles são construídos pela equipe. "Fazemos sessões práticas sobre o roteiro com a equipe dos clientes para garantir que os recursos que entregamos atendam às necessidades deles", comentou Bihan Jiang, diretora de produto da Decagon. A capacidade de apresentar mockups e protótipos funcionais no Figma é fundamental para esse processo. “Com ferramentas como o Figma Make e conectores para todos os sistemas que usamos, podemos elevar o nível dos produtos que construímos”, concluiu Bihan.

Em vez de coletar requisitos e apresentar um produto final, a equipe agora pode criar 10 protótipos diferentes e mostrá-los a 10 clientes diferentes. Segundo Bihan, “O resultado é um produto melhor, construído em muito menos tempo.”

Painéis interativos, métricas e insights de IA são fundamentais para as ofertas da Decagon aos clientes que precisam entender dados quantitativos e qualitativos, como pontuações de satisfação e sentimento dos clientes em conversas nos mais diversos canais. Um dos gerentes de produto da Decagon usa o Make para prototipar novos gráficos e remodelar páginas a fim de realçar diferentes conjuntos de dados de acordo com as solicitações dos clientes. "O gerente de produto pode criar um prompt como 'Faça isso no estilo desta página' e colar uma captura de tela do Figma. Com base nisso, podemos pensar sobre a ferramenta e o gráfico no contexto da plataforma geral", explicou Jennifer. "Além disso, podemos conversar com a equipe de engenharia e a equipe voltada para o cliente para confirmar a utilidade da alteração antes de começarmos a investir nela muitos recursos de engenharia e design."

O mesmo princípio foi aplicado quando a equipe quis renovar um gráfico interativo para deixá-lo mais simples e fácil de usar. O gerente de produto alimentou o gráfico original no Make, descreveu as mudanças desejadas e enviou tudo para o desenvolvedor. Nas palavras de Jennifer, “Foi muito mais simples do que o processo de traduzir as alterações para um designer, que criaria um mockup e o enviaria para desenvolvimento por um engenheiro. Reduziu o tempo de desenvolvimento.”

Prototipagens de alta fidelidade permitem que a equipe trabalhe em um meio visual desde o início, em vez de traduzir ideias de documentos para wireframes. "Como designer, penso visualmente. Quando você trabalha com análises, o problema é visual", disse Jennifer. "Visualizo isso como uma imagem, não como um documento. Assim, é útil começar a pensar na modalidade do produto final desde o início." Esse instinto de concretizar as ideias e apresentá-las aos clientes desde cedo passou a fazer parte do DNA da Decagon: "Usar o Figma como parte do nosso brainstorming é uma característica fundamental da nossa cultura. Isso permite agilizar a colaboração com uma fidelidade maior do que era possível antes.“

Além de posicionar a IA na plataforma que oferece, a Decagon também a aplica nos processos de construção. O design system mantém a criação consistente conforme a equipe cresce. O MCP mantém o alinhamento do design e do código para evitar que algo se perca no processo. E o Figma Make coloca o pensamento visual nas mãos de qualquer pessoa que tenha uma ideia com potencial suficiente para ser testada. “Esse novo mundo do design é realmente empolgante”, afirma Jennifer, “e acho que estamos realmente na liderança dessa evolução. Podemos entregar coisas de alta qualidade com muito mais agilidade.” Para a Decagon, ganhar velocidade sem sacrificar a qualidade é a verdadeira vantagem competitiva.