Resumo

O National Australia Bank (NAB) estabeleceu uma meta clara: tornar-se a empresa com mais foco no cliente na Austrália e na Nova Zelândia. Em escala empresarial, com mais de 8,5 milhões de clientes e mais de 200 designers em várias divisões, o NAB enfrentava a complexidades de cerca de 65 vias de integração, várias bibliotecas de componentes e atualizações manuais que exigiam vários dias para implementar cada alteração.

As regulamentações também passaram a exigir mais coerência e controle. Em resposta, o NAB criou o Elevate, um design system unificado no Figma que permite que as equipes projetem uma vez e reutilizem em qualquer lugar.

Os resultados: integração simplificada para os clientes e mais eficiência para o NAB.

• Cadastros 50% mais rápidos com uma integração simplificada
• 70% menos campos de formulário, reduzindo o atrito para o cliente
• Duplicações removidas, com componentes publicados e pré-aprovados
• Facilitação das entregas do design para o desenvolvimento, centralizando tudo no Figma

Desafio: quando o crescimento gera fragmentação

Conforme a equipe de design do NAB cresceu, as experiências dos produtos divergiram. As equipes de produto de toda a organização resolviam problemas idênticos dos clientes de formas muito diferentes. É possível haver várias versões de um cadastro para cartão de crédito, cada uma com perguntas semelhantes, mas variações na redação, ordem e interação. "É um problema comum em grandes empresas, mas a ambição do NAB é ser a melhor, então só ficaremos satisfeitos quando oferecermos o máximo de simplicidade e foco no cliente", comenta Daniel Fisher, líder de design do NAB.

Havia bibliotecas de componentes separadas em circulação, algumas com quase dez anos de idade. Qualquer alteração simples podia afetar várias bibliotecas e arquivos. Mesmo atualizar um indicador de progresso em várias telas e rastrear todas as suas variações podia levar dias.

Vias de integração separadas criaram disparidades e riscos, gerando complicações em análises de conformidade e auditorias. As ferramentas anteriores não permitiam colaboração segura em grande escala. Os arquivos eram compartilhados por e-mail, os envolvido não tinham como fazer revisões contextualizadas, e os controles de acesso não acompanhavam as necessidades da empresa.

Solução: criar um design system que funcionasse em todos os lugares

O NAB defendeu um princípio simples do diretor de design Lance Thornswood: fazer cada coisa de uma só maneira. Essa clareza gerou o Elevate, um design system unificado construído no Figma Enterprise que permite criar padrões uma vez só e reutilizá-los em qualquer lugar.

As “máquinas” são importantes para que a reutilização funcione em grande escala. Elas são componentes inteligentes e reutilizáveis, desenvolvidos com todas as possíveis variações em mente. Cada uma incorpora lógica de validação, estados de erro e responsividade. Com isso, estão prontas para serem integradas a qualquer produto.

As bibliotecas publicadas do Figma fazem o modelo funcionar em escala. Quando a equipe atualiza um componente central, todos os arquivos consumidores recebem a alteração. Somente no ano passado, essas bibliotecas foram usadas mais de 100.000 vezes em toda a instituição.

A uniformidade do design com o Figma Enterprise também reduz riscos de conformidade. Cada interação no Elevate é pré-aprovada, padronizada e auditável em todos os produtos e marcas. Funções e permissões controlam tarefas sensíveis. O histórico de versões e a publicação em biblioteca criam um registro claro de mudanças, com datas e autores.

Design atômico expandido com o Figma Enterprise

Inspirado pela metodologia de design atômico de Brad Frost, o NAB usou blocos reutilizáveis para criar experiências uniformes, depois escalou ainda mais com um sistema de componentes inteligentes e adaptáveis chamados “máquinas” e “fábricas”. O design atômico foi a base do Elevate da NAB. Mas ele sozinho não foi suficiente para unificar todas as interações com clientes da empresa. A equipe precisava de componentes funcionais adaptáveis a todos os casos de uso, em jornadas de usuário externas e internas, caminhos de erro, variações de marca e estados de UI.

Por exemplo, utilizando as variáveis, modos e instâncias aninhadas do Figma, o NAB criou um componente de número de telefone que se adapta a cada contexto. Quando 25 designers reutilizam este componente em vez de reconstruí-lo, são cerca de 25 dias de trabalho de designer ganhos. Se calcularmos o mesmo para dezenas de componentes, a economia chega a milhões de dólares.

“Em vez de perder tempo recriando o que já existe, agora conseguimos aplicar melhoria contínua dar atenção a tarefas mais criativas”, diz Daniel.

Temas e marca branca em escala com Variáveis

As variáveis expandem o Elevate para vários produtos e marcas sem duplicar o trabalho. Cada máquina analisa um pequeno conjunto de tokens para cor, tipo e raios de canto, apresentando o mesmo fluxo em marcas como NAB, Kogan Money, Qantas Money ou Bank of Queensland com uma simples troca de token. As equipes visualizam a mudança no arquivo, publicam uma vez, e cada fluxo de consumo é atualizado onde está.

Como as variáveis residem em bibliotecas publicadas, a governança está incorporada. Funções e permissões controlam quem tem permissão para editar. O histórico de versões registra o que foi alterado, quando e por quem. As áreas de design e desenvolvimento revisam cada token em seu contexto, reduzindo idas e vindas e mantendo o cronograma dos lançamentos de marca branca.

Integração mais rápida e simples com o Dev Mode

Antes do Figma, as entregas do design para desenvolvimento atrasavam as equipes. Os designers enviavam arquivos por e-mail em anexos, com especificações em documentos separados. Não era difícil deixar passar um caso mais complexo. Cerca de 50% da capacidade da equipe era gasta para conferir se cada versão estava de acordo com o design e registrar falhas.

Com o processo transferido para o Figma, temos um arquivo de fluxos de ponta a ponta onde estão todas as informações, e até 80 pessoas podem trabalhar nele ao mesmo tempo. Os desenvolvedores abrem o mesmo arquivo, revisam ramificações e inserem feedback contextualizado. No Dev Mode, eles inspecionam espaçamentos, tokens e propriedades de componentes passando o mouse, e copiam valores prontos para programar. Estados de erro, casos problemáticos e caminhos condicionais ficam ao lado do design e são atualizados conforme o trabalho evolui.

Assim, foi possível reformular o onboarding da jornada do cliente do NAB. Agora, a jornada começa pela verificação de identidade. Uma cópia de passaporte ou carteira de motorista é escaneada para preencher o formulário com os dados do cliente a partir de uma fonte confiável, que o banco pode verificar.

Se um documento do estado de Vitória mostrar apenas iniciais, o formulário solicita o nome completo. Componentes compartilhados permitem aplicar melhorias instantaneamente. Por exemplo, um seletor internacional para números de telefone pode reconhecer números locais que começam com 04 e formatá-los automaticamente.

Com o Figma, o NAB agilizou a integração e aumentou a produtividade da equipe com:

• Redução do número de campos de formulário em até 70% e o tempo de integração em até 50%, criando uma experiência mais rápida e contínua.
• Fortalecimento da segurança, com leitura facial e escaneamento de documento de identidade, provando que velocidade e segurança podem funcionar juntas.
• Remoção de duplicatas, usando componentes pré-aprovados que podem ser copiados e aplicados em diferentes produtos, de modo que os desenvolvedores trabalham a partir de dados centralizados.

Design promovendo a obsessão pelo cliente

O design system do NAB continua evoluindo. Com recursos como Code Connect e Figma MCP, a equipe está conectando design e desenvolvimento, ligando os componentes ao código, otimizando os ciclos de feedback e acelerando entregas baseadas no feedback real dos clientes. O Figma Make e as ferramentas com apoio de IA também são usados para identificar atritos em fluxos importantes.

“Poder gerar um prompt que diz: ‘contabilize a fricção desta experiência aqui’ e receber uma pontuação precisa é fantástico”, diz Daniel. “A automação de tarefas manuais é incrível.”

Com o Figma totalmente incorporado ao processo, o NAB demonstra como estrutura e criatividade podem trabalhar juntas. Em um setor altamente regulamentado e que depende de confiança, o banco está estabelecendo novos padrões de obsessão pelo cliente em grande escala.