Itaú BBA – Banco de Investimentos

Itaú BBA – Banco de Investimentos

Co-criando um novo portal de investidores para investidores.

Co-criando um novo portal de investidores para investidores.

Remodelando o portal do banco pensando na jornada de cada perfil de investidor.

Remodelando o portal do banco pensando na jornada de cada perfil de investidor.

Resumo

Projeto de atualização do site da área de Investimentos do Itaú, o Itaú BBA.

Pudemos nos apropriar da nova estrutura de módulos já utilizada nos ambientes digitais do Itaú Unibanco na época, portanto precisamos colocar o time de Itaú BBA no mapa digital e tirar o estigma de um site datado e muito complexo para potenciais investidores.


Miramos em um site sem segredos, sem informação escondida e pra ser o porta-voz do contato entre o BBA e seus clientes.

Meu papel

Atuei como facilitador de Workshop para criação da Landing Page e Brand & Ui Designer para adaptar os assets de marca do Itaú BBA para o mundo digital.

Produto

Landing Page itaú bba

Entregáveis

Landing page & Brand Assets

Ferramentas

Adobe Xd

Adobe Illustrator

Adobe photoshop

Adobe xd

adobe illustrator

adobe premiere

adobe after effects

Time

1 ux Designer

1 ui & Brand designer

1 brand strategist

Habilidades

Branding

workshop

wireframing

interface prototype

ux/ui design

Voltar

Voltar

Workshop.

Workshop.

Tivemos muita sorte de unir um time multidisciplinar durante um workshop de três dias. Unindo desde jornalistas, Investidores sênior até trainees do BBA.


Todos com perspectivas, objetivos e visões muito particulares do que um site para o Itaú BBA deve ter. E como esses perfis de usuários podem influenciar a arquitetura de informação que o site deve contemplar.


O novo site do Itaú BBA segue essa premissa, qualquer um que visitar a nova página, não deve se perder dentro de milhares de listas de PDF que não indicam de forma clara qual o papel do banco para os potenciais investidores.

E como dizia Steve Krug, seu visitante é como um motorista passando por um outdoor a 140 Km/h e como podemos fazer para reter esse usuário no nosso site e que ele entenda num piscar de olhos quais são suas oportunidades.

[wireframes]

Traduzindo as áreas e a dinâmica de Workshop.

Etapa para aterrizar as explorações feitas pela equipe e cuidar para que a navegação ficasse consistente em todas as páginas.

[cores]

Sofisticada e que conversa com o seu público.

Busquei na essência da marca uma paleta que trouxesse toda a elegância e seriedade do meio, para que seu público se identificasse e projetasse uma confiança na nova plataforma.

Sempre cuidando para não perder as cores características do Itaú e ainda assim delimitando o Itaú BBA como um ramo dentro do banco.

[fotografia]

Proprietária e elegante.

O filtro fotográfico utilizado deixa a identidade visual ainda mais consistente e proprietária em todos os pontos de contato, quando precisamos de fotos para contextualizar nossa informação.

[grafismos]

Sistema visual que dá recursos.

Pude resgatar da Identidade Visual de Itaú BBA alguns grafismos que entraram em desuso pela equipe, e consequentemente ressignificar seus usos para o novo site, abrindo mais possibilidades.

[look & feel]

Como tudo isso se combina?

Como traduzimos todas as etapas de hierarquia de informação diagnóstico de público, navegação e Identidade Visual para trazer um site que tem personalidade definida e conteúdo concreto.

Encontramos junto com o time, a nova cara para Itaú BBA.

Workshop.

Tivemos muita sorte de unir um time multidisciplinar durante um workshop de três dias. Unindo desde jornalistas, Investidores sênior até trainees do BBA.


Todos com perspectivas, objetivos e visões muito particulares do que um site para o Itaú BBA deve ter. E como esses perfis de usuários podem influenciar a arquitetura de informação que o site deve contemplar.


O novo site do Itaú BBA segue essa premissa, qualquer um que visitar a nova página, não deve se perder dentro de milhares de listas de PDF que não indicam de forma clara qual o papel do banco para os potenciais investidores.

E como dizia Steve Krug, seu visitante é como um motorista passando por um outdoor a 140 Km/h e como podemos fazer para reter esse usuário no nosso site e que ele entenda num piscar de olhos quais são suas oportunidades.

[wireframes]

Traduzindo as áreas e a dinâmica de Workshop.

Etapa para aterrizar as explorações feitas pela equipe e cuidar para que a navegação ficasse consistente em todas as páginas.

[cores]

Sofisticada e que conversa com o seu público.

Busquei na essência da marca uma paleta que trouxesse toda a elegância e seriedade do meio, para que seu público se identificasse e projetasse uma confiança na nova plataforma.

Sempre cuidando para não perder as cores características do Itaú e ainda assim delimitando o Itaú BBA como um ramo dentro do banco.

[fotografia]

Proprietária e elegante.

O filtro fotográfico utilizado deixa a identidade visual ainda mais consistente e proprietária em todos os pontos de contato, quando precisamos de fotos para contextualizar nossa informação.

[grafismos]

Sistema visual que dá recursos.

Pude resgatar da Identidade Visual de Itaú BBA alguns grafismos que entraram em desuso pela equipe, e consequentemente ressignificar seus usos para o novo site, abrindo mais possibilidades.

[look & feel]

Como tudo isso se combina?

Como traduzimos todas as etapas de hierarquia de informação diagnóstico de público, navegação e Identidade Visual para trazer um site que tem personalidade definida e conteúdo concreto.

Encontramos junto com o time, a nova cara para Itaú BBA.

1. Workshop

2. Wireframes

3. Cores

4. Fotografia

5. Grafismos

6. Aplicações

Juliano Gil.

Juliano Gil