Itaú BBA
Sobre a Empresa
O Banco Itaú é uma das principais instituições financeiras do Brasil e da América Latina, desempenhando um papel crucial no setor bancário. Fundado em 1945, o Itaú Unibanco resultou da fusão entre o Banco Itaú e o Unibanco em 2008, formando uma entidade ainda mais robusta e abrangente.
O Itaú Unibanco expandiu sua presença global, estendendo suas operações para diversos países além do Brasil, incluindo Estados Unidos, Argentina, Uruguai, Chile e outros.
O Itaú BBA é uma divisão do Itaú Unibanco focada em atender clientes corporativos, oferecendo soluções financeiras especializadas. Destaca-se por sua atuação no segmento de banco de investimento e finanças corporativas. Entre suas atividades destacam-se: especialização em Serviços Corporativos, serviços de banco de investimento, soluções financeiras adaptadas às necessidades específicas de seus clientes corporativos e gestão de riscos e governança.
Contexto
O contexto envolve a criação de uma plataforma destinada a auxiliar os officers, Middle, Large e CIB (Corporate and Investment Banking) a gerenciar os produtos dos clientes por meio de dashboards e da plataforma IBBA 360. Todo o desenvolvimento está sendo realizado utilizando o Salesforce e o CRM Salesforce. O objetivo principal é oferecer uma solução integrada que permita uma gestão mais eficiente e abrangente dos produtos e serviços disponibilizados aos clientes de alta renda e corporativos, proporcionando uma visão completa e atualizada de suas carteiras e necessidades financeiras.
Meu Papel
Como um profissional de UX/UI Designer, minhas atividades abrangem diversas áreas cruciais para o desenvolvimento de produtos digitais de qualidade.
Design System:
- Contribuo para a criação e manutenção de um Design System consistente e escalável.
- Desenvolvo e atualizo componentes reutilizáveis para garantir consistência visual e funcional em todas as plataformas e produtos.
QA Designer:
- Realizo testes e avaliações de usabilidade para identificar problemas e possíveis melhorias nos produtos.
- Colaboro com equipes de desenvolvimento para garantir que os padrões de design e qualidade sejam atendidos em todas as etapas do ciclo de desenvolvimento.
Atividades de UX/UI:
- Conduzo pesquisas de usuários para entender suas necessidades, comportamentos e preferências.
- Crio wireframes, protótipos interativos e designs de alta fidelidade que atendam aos requisitos do usuário e às metas de negócios.
- Colaboro com equipes multifuncionais para traduzir requisitos de negócios em soluções de design eficazes.
- Realizo testes de usabilidade e iterações com base em feedbacks e métricas de desempenho.
- Desenvolvo fluxos de usuário, mapas de jornada e outras ferramentas para visualizar e otimizar a experiência do usuário em todas as interações com o produto.
1. Design System IBBA 360º
O Desafio
O desafio era integrar o IDS (Itaú Design System) ao sistema de design disponível na plataforma Salesforce. Isso exigia a criação de um sistema de consumo de componentes de forma fácil, disponibilizado via Figma, e a verificação da qualidade das interfaces, assim como da implementação em produção.
Salesforce
Salesforce é uma das principais empresas de software de CRM (Customer Relationship Management) do mundo. Ela oferece uma variedade de soluções baseadas em nuvem para ajudar empresas de todos os tamanhos a gerenciar relacionamentos com clientes, automatizar processos de negócios e impulsionar o crescimento.
A plataforma Salesforce inclui uma ampla gama de produtos e serviços, desde CRM tradicional até ferramentas de automação de marketing, análise de dados, colaboração em equipe e desenvolvimento de aplicativos personalizados. A Salesforce é conhecida por sua flexibilidade e capacidade de adaptação às necessidades específicas de cada cliente, além de sua abordagem centrada no cliente e focada na inovação contínua.
Processo de Design
Identificação dos componentes Salesforce e IDS
O desenvolvimento do Design System (DS) do IBBA 360 começou com um levantamento detalhado dos componentes do Salesforce e sua adaptação para refletir o estilo e os padrões visuais do Itaú Design System (IDS). O objetivo era garantir uma identidade consistente e alinhada à marca, sem comprometer a funcionalidade e a escalabilidade no ecossistema Salesforce.
Etapas do Processo:
- Levantamento de Componentes: Foi realizada uma análise completa dos componentes padrão do Salesforce, identificando suas funcionalidades e limitações. Paralelamente, foram analisados os componentes do IDS, mapeando suas características visuais, interativas e de acessibilidade.
- Correspondência entre os Design Systems: Cada componente do Salesforce foi comparado com o equivalente no IDS, buscando similaridades em estrutura e estilo. Para componentes sem correspondência direta, foram propostas adaptações visuais e funcionais que respeitassem o guia de design do Itaú.
- Adaptação Visual e Funcional: Os componentes do Salesforce foram ajustados para incorporar as cores, tipografias, espaçamentos e outros elementos do IDS, criando uma experiência visualmente consistente
- Documentação e Padronização: Todos os componentes adaptados e criados foram documentados em uma biblioteca centralizada. A documentação incluiu exemplos de uso, variações e especificações técnicas para facilitar o uso pelos times de design e desenvolvimento.
Construção de componentes complexos
No desenvolvimento do Design System do IBBA 360, foram criados componentes complexos, como:
- Tabelas
- Gráficos
- Barra de Filtros
- Header com Big Number
Além disso, no Figma, foram implementadas funções de ativação e desativação de variações dos componentes, permitindo que os designers ajustassem rapidamente as configurações de cada elemento. Essa funcionalidade agilizou o processo de desenho, tornando mais eficiente a criação de layouts personalizados e atendendo às necessidades específicas de cada página.
A ideia principal era desenvolver componentes reutilizáveis e páginas padrão, permitindo maior rapidez no desenho e na implementação de novas interfaces.
A criação dos componentes foi realizada no ambiente de desenvolvimento Salesforce, utilizando o LWC (Lightning Web Components). Essa abordagem trouxe os seguintes benefícios:
- Escalabilidade: Componentes otimizados para diversos cenários de uso.
- Agilidade no Processo: Redução do tempo de entrega de novas telas e fluxos.
- Consistência Visual e Funcional: Alinhamento com os padrões do Design System e a identidade da mar
Tokens Especiais: Cores e Gráficos
As cores do Design System foram desenvolvidas com base na paleta oficial do banco, mas adaptadas para atender a critérios de acessibilidade. O objetivo era garantir que as cores fossem funcionais, esteticamente alinhadas à identidade visual e acessíveis para todos os usuários.
Cores para Gráficos
No caso dos gráficos, foi necessário criar uma cartela de cores personalizada, já que o IDS (Itaú Design System) não contemplava cores específicas para gráficos.
- Desenvolveu-se uma paleta baseada em combinações que priorizam visibilidade e contraste, mapeando a maior quantidade possível de variações.
- A cartela foi testada para garantir que as combinações de cores não prejudicassem a legibilidade e fossem acessíveis a pessoas com deficiências visuais, como daltonismo.
Ferramentas Utilizadas
- Adobe Colors: Para criar e organizar as paletas.
- Stark: Para testar o contraste entre as cores, garantindo conformidade com as diretrizes de acessibilidade (WCAG).
- Color Blind: Para identificar problemas relacionados ao daltonismo e ajustar as combinações.
Testes e Validações
- Foram testadas as interações entre as cores e suas combinações com a sobreposição de fontes, garantindo que o texto permanecesse legível em diferentes contextos.
- As cores foram aplicadas em protótipos de gráficos e iteradas com base em feedbacks e validações técnicas.
Resultados
- Uma paleta funcional, alinhada à identidade visual do banco, acessível para usuários com diferentes necessidades.
- Gráficos otimizados para garantir clareza e eficiência na comunicação dos dados, independentemente do contexto ou das limitações visuais do usuário.
Testes e Validações
- Foram testadas as interações entre as cores e suas combinações com a sobreposição de fontes, garantindo que o texto permanecesse legível em diferentes contextos.
- As cores foram aplicadas em protótipos de gráficos e iteradas com base em feedbacks e validações técnicas.
Resultados
- Uma paleta funcional, alinhada à identidade visual do banco, acessível para usuários com diferentes necessidades.
- Gráficos otimizados para garantir clareza e eficiência na comunicação dos dados, independentemente do contexto ou das limitações visuais do usuário.
Divulgação das bibliotecas e guia de uso
Após o desenvolvimento do Design System (DS) do IBBA 360, foi essencial criar estratégias para divulgar as bibliotecas e orientar os times no uso correto dos componentes e padrões estabelecidos.
Estratégias de Divulgação:
Biblioteca Centralizada:
- As bibliotecas foram disponibilizadas em plataformas como Figma, para uso pelos times de design, e Salesforce, para os desenvolvedores.
- A estrutura foi organizada de maneira clara, com categorias que facilitam a localização e reutilização dos componentes.
Documentação Completa:
- Foi criado um guia de uso detalhado, incluindo:
- Descrição dos componentes e suas variações.
- Exemplos de aplicação em diferentes cenários.
- Boas práticas para garantir consistência e acessibilidade.
- A documentação foi hospedada em um ambiente de fácil acesso para todos os stakeholders, como Confluence ou sites internos.
- Suporte Contínuo:
- Um canal de suporte foi disponibilizado para atender dúvidas e coletar feedbacks sobre o uso das bibliotecas e o guia.
- Atualizações regulares foram realizadas com base nas necessidades identificadas pelos times.
Novo Toolkit
Com as atualizações do Lightning Design System, tornou-se necessário criar um espaço dedicado para a melhoria e integração dos novos componentes.
Um ambiente chamado Novo Toolkit foi estabelecido, servindo como uma plataforma para:
- Estudo e Exploração: Permitindo que as equipes explorem e entendam as capacidades dos componentes atualizados.
- Desenvolvimento de Componentes: Proporcionando um espaço colaborativo para projetar e prototipar novos elementos alinhados com o sistema atualizado.
O Novo Toolkit garante a evolução contínua dos processos de design e desenvolvimento, promovendo a inovação e mantendo a consistência com os padrões atualizados do Lightning Design System.
2. Análise de Qualidade em UX
O Desafio
O desafio era integrar o IDS (Itaú Design System) ao sistema de design disponível na plataforma Salesforce. Isso exigia a criação de um sistema de consumo de componentes de forma fácil, disponibilizado via Figma, e a verificação da qualidade das interfaces, assim como da implementação em produção.
Processo de Design
Identificação dos componentes Salesforce e IDS
–
Unificação da identidade visual
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Construção de componentes complexos
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Tokens Especiais: Cores e Gráficos
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Divulgação das bibliotecas e guia de uso
Principais Problemas
Critérios de acessibilidade
Fidelidade aos protótipos
Novo Toolkit
–
3. Plataforma IBBA 360º
O Desafio
–
Meu Papel
–
Processo de Design
–
-<span data-metadata="">
–
Toolkit
Métricas de Sucesso
Pesquisa
–
Resultados
–
<span data-metadata="">-
–
Principais Problemas
–
Hipóteses
–
Solução
–
<span data-metadata="">Ajustes
–
4. Mobile IBBA 360º
No início de 2024, foi identificada a necessidade de aprimorar a plataforma IBBA 360 para o ambiente mobile. Os officers, responsáveis por gerenciar carteiras de clientes de alto valor, têm como função principal realizar visitas, acompanhar o desempenho das contas e oferecer soluções personalizadas para atender às necessidades de seus clientes.
O Desafio
O principal desafio era criar uma solução que permitisse o acompanhamento rápido de informações relevantes durante as visitas aos clientes, considerando que os officers frequentemente precisam acessar dados atualizados de maneira ágil e prática. Além disso, foi necessário atender a outras demandas específicas da rotina desses profissionais, como:
- Visualizar o desempenho consolidado das carteiras.
- Consultar informações detalhadas de cada cliente.
- Gerar relatórios e registrar informações após reuniões.
A experiência mobile precisava ser intuitiva e direcionada, garantindo acesso fácil a dados importantes, mesmo em situações de uso fora do escritório.
Meu Papel
Como Product Designer, fui responsável por:
- Pesquisa de Descoberta: Identificar as necessidades e os principais fluxos de trabalho dos officers.
- Design de Soluções: Criar interfaces e experiências adaptadas ao contexto mobile.
- Prototipagem e Testes: Validar as soluções propostas com os usuários antes da implementação.
- Colaboração com o Time de Desenvolvimento: Garantir que as entregas mantivessem a qualidade projetada.
Processo de Design
Pesquisa com Usuários:
- Entrevistas e observações foram realizadas para entender as necessidades dos officers durante visitas aos clientes.
- As principais demandas incluíam o acompanhamento de indicadores e uma visão consolidada das carteiras de clientes.
Definição de Soluções
- Visão Carteira: Resumo consolidado com a média de todos os clientes.
- Visão Cliente: Uma visão detalhada com as principais informações de cada cliente.
- Briefing do Cliente: Resumo automatizado, com auxílio de inteligência artificial, das principais informações do cliente.
- Contact Report: Uma funcionalidade para rascunhar ou enviar relatórios sobre os encontros com os clientes.
Prototipagem e Iteração:
- Visão Carteira: Resumo consolidado com a média de todos os clientes.
- Visão Cliente: Uma visão detalhada com as principais informações de cada cliente.
- Briefing do Cliente: Resumo automatizado, com auxílio de inteligência artificial, das principais informações do cliente.
- Contact Report: Uma funcionalidade para rascunhar ou enviar relatórios sobre os encontros com os clientes.
Métricas de Sucesso
- Adoção do Aplicativo: Número de officers que passaram a usar o app no dia a dia.
- Tempo Médio de Consulta: Redução no tempo necessário para acessar informações relevantes.
- Satisfação do Usuário: Avaliações positivas sobre a facilidade e eficiência do aplicativo
Principais Problemas
Durante o desenvolvimento, alguns desafios foram enfrentados, como:
- Excesso de Informações: Foi necessário ajustar a hierarquia e priorizar os dados mais relevantes.
- Limitações do Salesforce: A plataforma apresentou restrições na criação de aplicativos, especialmente em sua capacidade de personalização.
- Home com Botões Nativos: A home do aplicativo incluía botões nativos que não podiam ser removidos na versão de 2024, dificultando a personalização.
- Redirecionamento de Páginas: Alguns botões não conseguiam redirecionar para dashboards específicos, limitando a experiência do usuário.
- Consistência Visual e Funcional: Adaptações foram feitas para alinhar os novos recursos aos padrões do Design System existente.
- Feedback em Tempo Real: Problemas relatados por usuários em testes iniciais foram resolvidos em iterações rápidas, garantindo uma entrega mais robusta.