Itaú Unibanco
Redesign da Plataforma de Guias de Identidade Visual do Itaú
Contexto
O projeto consistiu na reestruturação do Guia de Identidade Visual do Itaú dentro da plataforma Bynder. O objetivo central foi democratizar o acesso a ativos de marca e guias de redação para colaboradores internos e agências parceiras, garantindo consistência global e autonomia no fluxo de trabalho.
O Desafio
Atualmente, o acesso aos materiais de marca enfrentava barreiras técnicas e operacionais que geravam ruídos na entrega:
Barreira de Acesso:
A necessidade de login corporativo impedia que parceiros externos (agências e freelancers) acessassem os assets de forma autônoma.
Gargalo Operacional:
Funcionários perdiam tempo enviando arquivos manualmente por e-mail ou canais de chat.
Falta de
Contexto Visual:
As diretrizes de tom de voz (UX Writing) careciam de exemplos práticos, dificultando a aplicação real.
Defasagem
de Versão:
Dificuldade em garantir que todos estivessem utilizando a última versão da marca.
Processo de Pesquisa
Benchmarking de Design Systems
Para entender as melhores práticas de distribuição de marca, analisei grandes players globais:
Foco em composição e flexibilidade.
Referência em documentação técnica e acessibilidade.
Excelência em diretrizes visuais
e animação.
Entrevista com Usuários
Realizei sessões de escuta com os stakeholders para identificar dores no fluxo atual:
Pontos de dor
Complexidade na navegação e "burocracia" para downloads simples.
Oportunidade
Integrar o material visual ao verbal (tom de voz) em um único ecossistema.
Estratégia e Definição
Como poderíamos...
facilitar o acesso seguro a materiais com e sem restrições?
otimizar a entrega de assets para redatores e diretores de criação?
garantir a atualização em tempo real de todos os arquivos?
Ideação e Prototipação
Desenvolvi wireframes de média fidelidade focados na arquitetura de informação. O foco inicial foi a página de onboarding ("Como usar este guia"), além das seções core:
-
Como usar este guia
-
Logotipos e aplicações
-
Cores e tipografia
Design System
Para garantir que a reestruturação no Bynder fosse escalável e visualmente alinhada à marca Itaú, estabeleci um Design System simplificado, focado em componentes de documentação. O objetivo foi criar uma interface funcional que desse total protagonismo ao conteúdo do guia.
Tokens
Cores
Paleta principal
PMS® Orange 021C
HEX #FF6300
PMS® 000C
HEX #FFFFFF
PMS® Black C
HEX #000000
Paleta base
PMS® Cool Gray 1C
HEX #F1F2F4
PMS® Cool Gray 2C
HEX #E3E5E8
PMS® Cool Gray 3C
HEX #CFD1D3
PMS® Cool Gray 5C
HEX #B3B3B3
PMS® Cool Gray 6C
HEX #999999
PMS® 423C
HEX #6E6E6E
PMS® 424C
HEX #4C4C4C
PMS® 425C
HEX #3B3B3B
PMS® 426C
HEX #262626
PMS® Black C
HEX #000000
Paleta complementar
PMS® 109C
HEX #FFCC00
PMS® 137C
HEX #FF9C00
PMS® 151C
HEX #FF7D00
PMS® 2766C
HEX #000D3C
PMS® 2748C
HEX #000066
PMS® 286C
HEX #0131FF
PMS® 375C
HEX #A6CF2E
PMS® 2426C
HEX #008717
PMS® 357C
HEX #0A3B00
ERROR
HEX #B71C1C
Tipografia
Espaçamento
Sistema de grid baseado em 8px para garantir ritmo vertical e consistência entre as páginas de diretrizes.
Componentes de Documentação
Criei componentes específicos para facilitar a absorção do conhecimento e agilizar o fluxo:
Cards de Download Inteligentes
Componentes que exibem metadados claros (formato, tamanho e versão) logo abaixo da miniatura, permitindo que o usuário identifique o arquivo correto sem precisar abrir várias abas.
Blocos de Do’s & Don'ts
Padronização visual usando ícones e core semântica (vermelho) para orientações rápidas de "o que evitar". O que pode ser feito ja esta aplicado em todo o conteúdo do material.
Iconografia
Ícones são imagens ou símbolos que representam ações ou ferramentas específicas em uma interface. Para alcançar harmonia em uma família de ícones, precisamos manter as mesmas regras estilísticas em todos eles: traço centralizado de 2px e grade para ícones de tamanho 24x24.
Border Radius
O contorno escolhido tem como objetivo manter a consistência da marca que hoje tem o formato do próprio logo nos seus materiais.
4px é usado para botões
10px é usado para imagens/formas
Botão
Os botões são geralmente links estilizados para atrair usuários e direcioná-los para uma página específica. Os nossos botões tem como maior foco o download de nossos ativos e direcionamento para outras páginas.
Default
Hover
Disable
Testes de Usabilidade e Métricas de Sucesso
Para validar a solução, realizei testes moderados com 5 participantes de diferentes áreas (Branding, CX, Marketing) e personas distintas, entre junho e agosto de 2022.
Métricas Quantitativas
Os dados extraídos via ASQ (After-Scenario Questionnaire) confirmaram a eficiência da plataforma:
Na taxa de sucesso na conclusão de tarefas.
Foi a média de satisfação geral.
Foi a nota para a facilidade de uso.
Foi a nota pela rapidez na execução.
Nota dada na qualidade da informação do material
Perfomance por Tarefa
Em média para localização do ativo de Modelos de Apresentação.
Em média para buscar pela página de Tipografia e Cores
Insights Qualitativos
Curva de Aprendizado
Descrita como rápida e intuitiva.
Percepção de Valor
Usuários relataram que o layout ensina sobre o uso dos elementos.
Navegação
Um dos participantes comparou a fluidez à lógica de arquivos do Mac.
Interação e Melhorias Implementadas
Com base nos feedbacks, apliquei melhorias imediatas na experiência:
Hierarquia de Conteúdo
O conteúdo prático (downloads) foi movido para o topo para facilitar o acesso rápido.
Redução de Ruído
Removi menus internos duplicados para uma navegação mais limpa.
Didática
Inclusão de vídeos e animações para explicar o uso da marca em movimento.
Próximos Passos e Evolução
O projeto agora foca em transformar o repositório em um Hub de Marca completo:
Expansão de Assets
Inclusão de diretrizes fotográficas, ilustrações e modelos de assinatura de e-mail.
Ajuste de Glossário
Refinar as literais de navegação para distinguir claramente "História da Identidade" de "História do Itaú".
Conclusão
A reestruturação transformou o Guia no Bynder na "única fonte da verdade" da marca. O resultado foi uma redução drástica nas solicitações de arquivos via suporte, maior autonomia para agências parceiras e uma consistência visual impecável em todos os pontos de contato do Itaú.
