fran
ITAÚ UNIBANCO · ESTUDO DE CASO
Redesenhando a plataforma de guia de marca
Funcionários e agências externas tinham dificuldade para encontrar e baixar materiais da marca. Nos testes de usabilidade, os usuários concluíram 90% das tarefas e avaliaram a satisfação com 4,6 de 5.
Resumo
FUNÇÃO
Designer de UI/UX
PLATAFORMA
Bynder
TIME
Projeto solo
PROBLEMA
Funcionários e agências externas tinham dificuldade para encontrar e baixar materiais da marca.
DURAÇÃO
1 ano
RESULTADO
Nos testes de usabilidade, os usuários concluíram 90% das tarefas e avaliaram a satisfação com 4,6 de 5.
Contexto
Redesenhei o Guia de Identidade Visual do Itaú dentro do Bynder, a plataforma onde o banco guarda seus materiais de marca. O objetivo era dar a funcionários e agências parceiras acesso fácil aos materiais e às diretrizes de escrita, para que todos seguissem as mesmas regras de marca e trabalhassem com autonomia.
O desafio
A experiência anterior tinha barreiras técnicas e operacionais:
Barreira de acesso: Era preciso ter login corporativo, então parceiros externos (agências e freelancers) não conseguiam baixar os materiais sozinhos.
Gargalo operacional: Os funcionários perdiam tempo enviando arquivos por e-mail ou chat.
Falta de contexto visual: As diretrizes de tom de voz (UX writing) tinham poucos exemplos práticos e eram difíceis de aplicar.
Versões desatualizadas: Era difícil garantir que todos usassem a versão mais recente da marca.
Pesquisa
Benchmarking de Desing Systems
Para aprender boas práticas de compartilhamento de materiais de marca, estudei três design systems globais:
Composição e flexibilidade.
Entrevistas com stakeholders
Conversei com stakeholders para entender as dores do processo atual.
Dor: Navegação complexa e muita "burocracia" para downloads simples.
Oportunidade: Reunir diretrizes visuais e verbais (tom de voz) em um só lugar.
Documentação técnica e acessibilidade.
Diretrizes visuais e movimento.
Definição
COMO PODEMOS...
dar acesso seguro a materiais restritos e abertos?
ajudar redatores e diretores de criação a conseguir os materiais mais rápido?
manter todos os arquivos atualizados em tempo real?
Ideação e prototipação
Criei wireframes de média fidelidade com foco na arquitetura da informação. Comecei pela página de onboarding ("Como usar este guia") e depois passei para as seções principais: Logos e aplicações, e Cores e tipografia.
Sistema de projeto
Para tornar o redesign escalável e coerente com a marca Itaú, criei um design system simplificado, focado em componentes de documentação.
O objetivo era uma interface clara e funcional, que deixasse o conteúdo em primeiro plano.
FUNDAMENTOS
CORES
O laranja #FF6300 lidera a marca. Os cinzas apoiam o conteúdo. O vermelho é reservado para erros.
COMPONENTES
CARDS DE DOWNLOAD INTELIGENTE
Cada card mostra formato, tamanho e versão abaixo da miniatura, para o usuário escolher o arquivo certo sem abrir várias abas.
TIPOGRAFIA
Uma escala clara para títulos, texto e legendas deixa as páginas longas de diretrizes fáceis de ler na diagonal.
BLOCOS DE FAÇA E NÃO FAÇA
Ícones e um vermelho semântico orientam rapidamente o que evitar.
ESPAÇAMENTO E FORMA
Grid de 8px para um ritmo vertical consistente. Raio de 4px nos botões e de 10px em imagens e formas, ecoando o formato do logo do Itaú.
BOTÕES
Estados padrão, hover e desabilitado, construídos em torno da ação principal: o download.
Testes de usabilidade
Entre junho e agosto de 2022, conduzi testes moderados com 5 participantes de Branding, CX e Marketing, cobrindo diferentes personas. Coletei os dados com uma versão adaptada do ASQ (After-Scenario Questionnaire), em escala de 5 pontos.
RESULTADOS QUANTITATIVOS
Taxa de conclusão das tarefas
Satisfação geral
Facilidade de uso
Rapidez na execução das tarefas
Qualidade da informação
TEMPO POR TAREFA (MÉDIA)
Para encontrar o material de Modelos de apresentação
Para encontrar a página de Tipografia e cores
INSIGHTS QUALITATIVOS
Curva de aprendizado: Descrita como rápida e intuitiva.
Valor percebido: Os usuários disseram que o próprio layout ensina a usar os elementos da marca.
Navegação: Um participante comparou com a lógica de arquivos no Mac.
Melhorias
Com base no feedback, fiz estas mudanças logo em seguida:
Hierarquia de conteúdo: Movi o conteúdo prático (downloads) para o topo, para acesso mais rápido.
Menos ruído: Removi menus internos duplicados para uma navegação mais limpa.
Ensino: Adicionei vídeos e animações para mostrar como usar a marca em movimento.
Resultado
O guia redesenhado virou a fonte única de verdade da marca Itaú no Bynder. As agências parceiras agora encontram os materiais sozinhas, e os usuários concluíram as tarefas rápido e avaliaram bem a experiência.
