Escrito por Fernando Marar, Natalia Hazarian, Ariane Morganti, Dandara Hahn e Isadora Stevani

O Nubank é uma das maiores plataformas de serviços financeiros digitais do mundo. Com mais de oito mil funcionários, uma IPO recente e um rápido crescimento que conquistou mais de 70 milhões de clientes no Brasil, México e na Colômbia, o Nu alcançou um novo nível de maturidade de seu negócio. Com um detalhe importante: o crescimento constante como empresa traz novos desafios relacionados a como o Nubank manterá a consistência de sua marca.   

Clientes desejam comprar de marcas que conhecem e se relacionam. É isso que torna a consistência um elemento tão importante na construção de força e relevância da marca. Repetição leva a uma maior identificação, algo essencial para criar e manter uma conexão mais forte com nosso público.

Uma marca é um organismo vivo que evolui constantemente. Escolhida como a marca mais forte no Brasil em 2022 pela WPP, o Nubank sempre defendeu o foco no cliente e a luta contra a complexidade para empoderar as pessoas. Agora, em uma escala maior e no 10º  aniversário, a equipe de marca global desenvolveu uma ferramenta que expande as raízes e o propósito para um contexto maior, ajudando o Nubank a manter consistência e qualidade em todas as plataformas, países ou serviços.

Aqui estão alguns detalhes sobre o Sistema de Marca do Nu: 

Vídeo: Caso de uso do Sistema de Marca do Nu. Fonte: Equipe de Design de Marca do Nu

O problema: um pouco aqui, um pouco ali

Imagine uma equipe com centenas de profissionais de marketing e criatividade, além de parceiros externos e fornecedores, trabalhando na maior marca do Brasil, que lança continuamente novas campanhas e produtos para seus segmentos atuais e novos. Planejar toda a estratégia de marca, as diretrizes e os ativos em uma plataforma simples de encontrar, de fácil acesso e sempre atualizada para garantir que nenhum conteúdo seja perdido não é, digamos, algo trivial.

Nesta nova etapa de maturidade da marca, desenvolver uma nova forma de organização de todo o conteúdo de marca do Nubank era inevitável. A pergunta que devia ser feita, neste caso, era como ela ia ser desenvolvida.

Conheça nossas oportunidades

A solução: um playground de marca

Transformamos nosso Sistema de Marca do Nu em uma nova e interativa Ferramenta de Manual de Identidade do Nu, uma plataforma pública e online que pode ser acessada por todo mundo, para estimular a curiosidade e aderência no uso das diretrizes de marca. 

Ela também ajuda a desenvolver uma ótima experiência ao demonstrar nossos fundamentos de marca por meio de conteúdo e ferramentas interativas, onde todos os ativos de marca podem ser armazenados, entregues e baixados.

“A ideia era interromper o formato chato onde as diretrizes de marca são desenvolvidas, que normalmente são um PDF estático. Nosso objetivo era criar uma plataforma simples e chamativa que as pessoas gostariam de acessar, interagir e aprender por meio das diretrizes de marca.”
Fernando Marar, chefe sênior de design de marca – Equipe de Marca

Vídeo: Navegação na Ferramenta de Manual de Identidade. Fonte: Equipe de Design de Marca do Nu

Considerando que ela foi desenvolvida para acompanhar a expansão internacional do Nu, a Ferramenta de Manual de Identidade está atualmente disponível em inglês, português e espanhol.

Processo de Design

Ser simples é sempre o objetivo final, e a jornada até lá é divertida. Houve um longo processo de exploração de design da página inicial para entender como distribuir o conteúdo e a função de pesquisa, sempre pensando em uma navegação acessível. Abaixo, é possível ver a lógica das decisões tomadas no desenvolvimento da ferramenta.

Imagem: Ferramenta de Manual de Identidade – Evolução da página inicial. Fonte: Equipe de Design de Marca do Nu

Estrutura modular

Após a decisão de criar uma ferramenta online para centralizar e distribuir todo o conteúdo, o próximo passo era decidir o formato visual. As formas modulares foram usadas para criar uma estrutura mais flexível, expandindo para conteúdos futuros. Elas facilitam novos uploads e atualizações ao permitir que o Nubank altere ou inclua um novo módulo facilmente, sem interferir com os anteriores. Com a expansão da marca, isso era essencial. 

Cada bloco é dedicado a um elemento diferente de nosso Sistema de Marca. E todas as miniaturas se tornam animadas quando o usuário passa o cursor em cima delas, mostrando uma prévia do conteúdo que verá.

Navegação e pesquisa

Há quatro formas diferentes de navegar na Ferramenta:

  • Quadros infinitos: eles dão a sensação de que o trabalho inserido no quadro está em constante expansão, o que é exatamente o caso da marca Nu. Combinado com a  estrutura modular, a página inicial infinita (horizontal e verticalmente) da nossa Ferramenta oferece a todos os usuários outra forma de visualizar a marca Nu e os ativos criativos de uma forma mais orgânica e fluida.
  • Barra de pesquisa: um campo de pesquisa que acelera a pesquisa de tópicos ou visitas a seções específicas, eliminando distrações.
  • Menu de índice: um índice que organiza todas as nossas seções principais em uma lista simples, dando aos usuários a possibilidade de acessar nossas diretrizes de um jeito mais prático. Assim como os blocos na página principal, miniaturas animadas aparecem ao colocar o cursor nos títulos.
  • Seção de login: há também uma seção de login no canto superior esquerdo, que pode ser acessado apenas por Nubankers e parceiros externos que trabalham próximos à nossa marca. A Ferramenta desbloqueia conteúdo confidencial quando o usuário está logado, como nosso posicionamento de marca, sistema de design (NuDS) e recursos dedicados a Nubankers. 

Imagem: Ferramenta de Manual de Identidade – Tela inicial. Fonte: Equipe de Design de Marca do Nu

“Começamos pensando na melhor forma de pesquisar e invariavelmente criamos a barra de pesquisa. Mas não foi suficiente para chamar a atenção. Por isso, decidimos criar um quadro modular com miniaturas que chamam a atenção e um menu de lista, cobrindo todos os hábitos diferentes.”
Ariane Morganti, designer sênior de marca – Equipe de Marca

Conteúdo e ferramentas

O conteúdo de cada seção é organizado em abas. Elas foram criadas para consultas online e offline, tanto no site quanto em uma versão em PDF. Na versão online, todas as seções também possuem um vídeo explicativo sobre a importância e o uso correto do ativo da marca exibido na tela.

Há diversas seções interativas com ferramentas para ajudar colaboradores em suas rotinas de design. Aqui estão alguns exemplos:

  • Selecionador de cores: ao navegar e passar o cursor do mouse nas cores primária e secundária do Nubank, o usuário descobre mais informações sobre cada uma e, com apenas um clique, pode copiar automaticamente o código HEX.
  • Gerador de grades: a “Ferramenta Grade” ajuda o usuário a produzir e fazer o download de grades de acordo com as especificações necessárias. É possível mudar os valores de altura e largura e clicar na seta para atualizar a forma, fazendo o download depois.
  • Configurações de tipografia: o “Testador de Tipografia” permite que o usuário teste a fonte Gellix do Nu em diferentes cenários. É possível escolher o tipo de fonte que você deseja, modificar o tamanho dela para ver o espaçamento correto entre as linhas e caracteres e testar no modo noturno, por exemplo.

Miniaturas que chamam a atenção

As miniaturas foram animadas para serem visualmente atraentes e chamar a atenção do usuário. Nossa equipe de design criou ícones específicos com ciclos de animações que claramente expressam a essência do conteúdo.

“Decidimos usar movimento não apenas pela questão estética, mas principalmente para ajudar os usuários a entender o que estão procurando. As animações adicionam um elemento de surpresa e ajudam a distinguir os conteúdos de cada seção.”

Isadora Stevani, designer sênior de movimento – Equipe de Marca


Illustration

Brand Positioning

Brand Prisma

Brand Verbal Expression

Icons

Templates

Lições aprendidas e conclusões

Consolidar o Sistema de Marca do Nu e torná-lo disponível por meio da Ferramenta de Manual de Identidade do Nubank é um passo importante para um novo momento de maturidade da marca. Já que o Nubank tem como pilar a luta contra a complexidade para empoderar as pessoas, a forma como promovemos nossas diretrizes também precisam mostrar este propósito e ambição. 

Desenvolver a Ferramenta foi definitivamente uma experiência de aprendizado para a equipe sobre o que significa criar ferramentas simples e amigáveis não apenas para clientes no “lado de fora”, mas também internamente, ajudando todos os colaboradores e parceiros a encontrar os ativos da marca Nu de uma forma fácil e acessível.

Venha ajudar a desenvolver esta jornada com a gente!

Conheça nossas oportunidades