Como a Customer.io simplifica a transferência de design com variáveis e Dev Mode

Tempo de leitura: 4 minutos

Resumo: A funcionalidade sempre foi um foco principal no mundo da tecnologia de marketing (MarTech). Customer.io revolucionou o setor com uma abordagem diferente—design e experiência do usuário são seus princípios orientadores na criação de produtos para seus clientes. Fundada em 2012, a empresa cresceu para impulsionar campanhas de mensagens automatizadas para marcas líderes como Notion, Clearbit e IMAX.

Como parte do plano Organização do Figma, a Customer.io melhorou suas entregas de Design para desenvolvimento usando variáveis e o Dev Mode, permitindo que a equipe entregue o trabalho mais rapidamente.

Desafio: Bibliotecas de componentes desconectadas criam atrito entre design e desenvolvimento

Embora a Customer.io tenha usado o Figma por algum tempo, eles chegaram a um ponto de inflexão onde a falta de governança do design system e componentes ad hoc começaram a afetar seu trabalho. Aiden Bordner, da Customer.io Diretor Sênior, Chefe de Design de Produto, explica: "Chegamos a um ponto onde nem todo componente tinha uma representação canônica no Figma. Não havia continuidade compartilhada entre Design e Dev porque as especificações não eram facilmente mapeadas para a intenção no design system."

Essa desconexão criou desvios no trabalho que havia sido lançado. Embora o impacto fosse sutil à primeira vista—um botão com a borda errada; um divisor muito escuro; espaços que estavam fora por alguns pixels—essas discrepâncias de Design e desenvolvimento rapidamente se transformaram em sérios problemas e uma experiência do usuário desarticulada.

"Quando vemos esses erros, alguém da QA tem que marcá-los, então um ticket é feito, e depois reconstruímos o front-end," observa Aiden. "Esse tempo e os custos de troca para corrigir os problemas têm um impacto real sobre o que podemos entregar aos clientes em termos de criar novos recursos."

Com fluxos de trabalho incertos e atritos aumentados entre as equipes, Aiden sabia que uma mudança tinha que ser feita antes que essas negligências afetassem a experiência do usuário em uma escala maior.

Solução: variáveis e Dev Mode entram em cena

A Customer.io adotou os recursos mais recentes do Figma enquanto começaram a atualizar seu design system. "O tiro de largada foi a Config 2023— o Dev Mode e as variáveis foram lançados e eu pensei, 'Este é o ferramental que eu estava esperando'", disse Aiden. A equipe de design de produto configurou variáveis no Figma para dar suporte a cores, espaçamento, tamanho de tipo, raio de borda e estilos de tipografia. Agora, os desenvolvedores não precisam mais adivinhar para descobrir o número preciso de pixels para um canal ou o código de cor correto.

Com variáveis, a equipe foi capaz de padronizar propriedades de design desde a base. "Um desenvolvedor não precisa se preocupar em fazer sua própria interpretação de um design. "Isso vai ajudar os novos desenvolvedores a traduzir uma simulação em implementação quando a especificação estiver 60–70% pronta diante deles", diz Aiden. Com esses frameworks uniformes agora em vigor, os desenvolvedores estão experimentando menos erros e podem trabalhar em seu processo de forma mais rápida.

Além disso, a adoção do Dev Mode tem sido um divisor de águas para o fluxo de trabalho da Customer.io. "Pode ser muita coisa, em termos de descobrir o que está pronto para ser construído," diz Aiden. "Com o Dev Mode, anotações permitem que um designer destaque uma seção específica para que um desenvolvedor possa começar a trabalhar imediatamente."

Impacto: As equipes de Design e Dev estabeleceram um novo padrão de eficiência

A renovação na transferência de design para o desenvolvimento trouxe dividendos para a produtividade da equipe. Com os arquivos de design agora anotados, os desenvolvedores podem facilmente inspecionar, entender a estrutura subjacente e imediatamente começar a implementação.

Este ganho de velocidade fecha o círculo para a equipe de design também. "Os designers estão adotando essa mentalidade de crescimento," diz Rennie Abraham, Chefe de Estúdio de Marca na Customer.io. "Eles podem iterar, testar e ajustar em vez de passar seis meses trabalhando em duas ou três grandes páginas de destino e não saber se isso vai atingir nossos objetivos de negócios. Não há muitos lugares com a colaboração e o espírito de inovação que o Figma nos permite alcançar."

Aproveitando as variáveis e o Dev Mode, a equipe da Customer.io não apenas melhorou seus processos internos, mas também se posicionou como líder focada em Design na indústria de MarTech. Os designers facilitam o rastreamento de pequenos detalhes e revisões quando marcam seus arquivos como Pronto para Dev, alcançando um grau maior de acabamento no que entregam em parceria com os desenvolvedores. O compromisso da empresa com esse nível de refinamento permite que seus usuários confiem que o produto pode transformar suas comunicações com os clientes.

"Estamos focados em oferecer um nível de refinamento em UX e UI de nível de consumidor aos nossos clientes," diz Aiden. "Estas são as bases, em termos de conectar nossos ambientes de design e engenharia, que nos dão uma vantagem competitiva."

Customer.io é um ótimo exemplo dos resultados positivos quando as equipes simplificam suas transferências de design para desenvolvimento. O resultado final não apenas promove eficiências e uma melhor experiência do usuário, mas apresenta novas oportunidades para a inovação criativa. Com essa abordagem colaborativa, a equipe continuará construindo soluções centradas em design que capacitam seus usuários com dados perspicazes para engajar seus clientes.