Programa de Relacionamento Itaú — Case

Contato

Itaú Design Language

Criando uma linguagem única para um ecossistema multi produtos.

EMPRESA E ATUAÇÃO

EMPRESA E DURAÇÃO

Itaú Unibanco

Staff Product Design

~2 anos

DURAÇÃO

~2 anos

RESPONSABILIDADES

Estratégia de Design

Governança

Workshops

Documentação

Workshops

Mentoria

Documentação

Mentoria

Overview

Um sistema não basta se ninguém sabe por que usá-lo

O Itaú já tinha um Design System, componentes prontos, regras documentadas. Mas na prática, isso não resolvia o problema real: times não sabiam por que um componente funcionava melhor que outro para determinado tipo de conteúdo ou contexto. Faltava critério, não ferramenta.

O Itaú Design Language nasceu para preencher essa lacuna, indo além dos componentes, para definir pilares de experiência que orientam decisões de tom de voz, comunicação, acessibilidade e estrutura de interface em todo o ecossistema digital do banco.

Itaú Design Language

Linguagem de design do Itaú Unibanco

O desafio

Consistência não se resolve apenas com componentes, mas também com critério e adoção

O desafio não era aplicar os componentes nos produtos. Precisávamos criar uma identidade, linguagem capaz de atender todo o ecossistema do banco, e suprir uma dor central: como criar padrões de experiência que funcione para todos

Negócio

Inconsistência entre produtos gerava retrabalho e experiências fragmentadas

Inconsistência entre produtos gerava retrabalho e experiências fragmentadas

Falta de padrão dificultava escala para novos produtos e squads

Necessidade de uma identidade de marca coerente em todos os pontos de contato

Falta de padrão dificultava escala para novos produtos e squads

Necessidade de uma identidade de marca coerente em todos os pontos de contato

Times/Squads

Design System existia, mas faltava critério claro de quando e por que usar cada componente

Design System existia, mas faltava critério claro de quando e por que usar cada componente

Decisões de UI eram tomadas de forma isolada, sem alinhamento entre squads

Falta de clareza sobre como os pilares de experiência se traduziam em decisões do dia a dia

Decisões de UI eram tomadas de forma isolada, sem alinhamento entre squads

Falta de clareza sobre como os pilares de experiência se traduziam em decisões do dia a dia

Experiência do usuário

Experiência do cliente

Tom de voz, comunicação e acessibilidade variavam entre produtos

Tom de voz, comunicação e acessibilidade variavam entre produtos

Ausência de templates padronizados por tipo de segmento (conversacional, transacional, consulta)

Experiência pouco previsível ao transitar entre diferentes produtos do banco

Ausência de templates padronizados por tipo de segmento (conversacional, transacional, consulta)

Experiência pouco previsível ao transitar entre diferentes produtos do banco

Ponto de virada

Uma nova direção

Antes, cada produto falava uma língua diferente

Vários produtos com múltiplas linguagens

Vários bancos em um só

Antes do Design Language, não existia uma linguagem única de design no Itaú, cada produto resolvia sozinho questões de navegação, tom de voz e estrutura de interface, gerando soluções desconexas para problemas parecidos.

Itaú Design Language

Novo posicionamento

Um só Itaú

A virada começou com a construção de pilares de experiência, que nos guiou e serviu de base para unificar nossas experiencias.

Com essa decisão, foi possível compreender como estávamos juntos em um mesmo ecossistema, porem dividos por varias linguagens.

A partir desse momento, iniciamos a construção de uma so linguagem para alimentar e suprir todo o banco. Com ela ajustamos componentes, endereçamos onde e quando utilizar, disponibilizamos templates por tipo de segmento, conversacional, transacional, consulta, pensados com variações flexíveis o bastante para atender praticamente todos os produtos do banco, sem abrir mão de uma identidade única.

A virada começou com a construção de pilares de experiência, que nos guiou e serviu de base para unificar nossas experiencias.  

Com essa decisão, foi possível compreender como estávamos juntos em um mesmo ecossistema, porem dividos por varias linguagens.

Itaú Design Language

Ponte de conexão

Atuação Cross

Da definição dos pilares à adoção no dia a dia

Definição de Princípios

Estruturação dos pilares de experiência que orienta o tom de voz, comunicação e acessibilidade em todo o ecossistema.

Liderança Técnica (Visão Futura)

Conduzindo a evolução contínua da linguagem de design, antecipando necessidades futuras do ecossistema.

Templates & Componentização

Traduzindo os pilares em experiências reutilizáveis, templates conversacionais, transacionais e de consulta.

Facilitação & Workshop

Workshops com a liderança para demonstrar a importância dos pilares e sua traduzação na experiência do cliente.

Embaixador & Disseminação

Apoiando adoção entre diferentes times, conduzindo fóruns recorrentes e disseminando boas práticas.

Mentoria

Apoiando o desenvolvimento técnico da comunidade de designers na aplicação da linguagem.

Facilitação & Workshop

Workshops com a liderança para demonstrar a importância dos pilares e sua traduzação na experiência do cliente.

Embaixador & Disseminação

Apoiando adoção entre diferentes times, conduzindo fóruns recorrentes e disseminando boas práticas.

Mentoria

Apoiando o desenvolvimento técnico da comunidade de designers na aplicação da linguagem.

Processo

De princípios a padrões que escalam

Como chegamos em uma solução escalável

Definir princípios

Estabelecer os pilares que guiam toda decisão de experiência: simplicidade, relevância, agilidade e confiabilidade.

Estruturar padrões

Traduzir os princípios em componentes, templates e diretrizes de uso, não só o

"o quê", mas o "quando e por quê".

Validar com os times

Testar a aplicação dos padrões em contextos reais de produto, ajustando onde a teoria não se sustentava na prática.

Escalar e disseminar

Levar a linguagem para além do time central, via workshops, documentação viva e uma comunidade de embaixadores.

componentes

Centralizados, sustentando 4 pilhas tecnológicas diferentes

produtos

Receberam o novo padrão entre distintos segmentos do banco

80%

de adesão

Ao design system nos principais repositórios

mais rápido

Trabalho mais eficiente para times que adotaram os padrões

Processos ajustados

Criação de um grupo enxuto para representar o banco. Essa ação é necessárias para dar velocidade e controle a tudo que precisava ser validado. O mais importante foi ter incluído ao menos um representante de cada produto

29 produtos

Evolução necessária

A adoção geraria retrabalho real para os times, que precisariam readequar telas já prontas. Decisão consciente dentro de um movimento maior de modernização das jornadas do banco.

+200 times envolvidos

Evolução necessária

A adoção geraria retrabalho real para os times, que precisariam readequar telas já prontas. Decisão consciente dentro de um movimento maior de modernização das jornadas do banco.

+200 times envolvidos

Processos ajustados

29 produtos

Reuso VS Legado

O apego ao legado e a personalização 100% liberal aos produtos é algo natural de cada designer. Porém para manter um padrão de experiencia que funcione a todos, foi necessário priorizar a estrutura reutilizável

+100 telas padronizadas

Tradeoff

Decisões importantes

Algumas decisões definem a direção de um produto. Durante a a criação do Itaú Design Language, estas foram as escolhas que mais contribuíram para tornar a experiência mais clara, consistente e escalável para diferentes segmentos do banco

Solução

Transformando estratégia

em experiência

Transformando estratégia em experiência

Impacto

Experiências mais ágeis, consistentes

em menos tempo

Experiências mais ágeis, consistentes

em menos tempo

Para o cliente

Experiências mais ágeis e consistentes ao transitar entre produtos, com comunicação mais próxima e contextualizada, refletido no crescimento de NPS após a migração das jornadas.

Para o negócio

Aceleração no lançamento de novas soluções digitais, com redução de retrabalho e maior velocidade de entrega entre squads que adotaram os padrões.

Para o time

Redução de fragmentação e ganho de eficiência: menos tempo reinventando componentes, mais tempo resolvendo os problemas certos.

Aprendizados com

o projeto

“

Mais do que construir componentes e documentação, esse projeto me mostrou que um design system só funciona quando existe entendimento coletivo do porquê ele existe.

Construir uma linguagem única numa organização desse tamanho não é sobre impor um padrão, é sobre criar espaço pra que cada time se sinta parte da decisão, mesmo quando isso significa abrir mão de personalização em nome de algo maior.

Mais do que construir componentes e documentação, esse projeto me mostrou que um design system só funciona quando existe entendimento coletivo do porquê ele existe.