IBBA360 DESIGN SYSTEM

Identificação dos Componentes Salesforce e IDS

O desenvolvimento do Design System do IBBA 360 (DS) teve início com um levantamento detalhado dos componentes do Salesforce e sua adaptação aos padrões visuais e de estilo do Itaú Design System (IDS). O objetivo foi garantir uma identidade consistente e alinhada à marca, sem comprometer a funcionalidade e a escalabilidade dentro do ecossistema Salesforce.

Etapas do Processo

Levantamento de Componentes

Foi realizada uma análise abrangente dos componentes padrão do Salesforce, identificando suas funcionalidades e limitações. Paralelamente, os componentes do IDS foram analisados, mapeando suas características visuais, interativas e de acessibilidade.

Correspondência entre Design Systems

Cada componente do Salesforce foi comparado ao seu equivalente no IDS, buscando similaridades estruturais e estilísticas. Para os componentes sem correspondência direta, foram propostas adaptações visuais e funcionais alinhadas às diretrizes de design do Itaú.

Adaptação Visual e Funcional

Os componentes Salesforce foram ajustados para incorporar elementos do IDS, como paleta de cores, tipografia, espaçamento e hierarquia visual, garantindo uma experiência consistente e coerente.

Documentação e Padronização

Todos os componentes adaptados ou criados foram documentados em uma biblioteca centralizada, incluindo exemplos de uso, variações e especificações técnicas para facilitar a utilização por equipes 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 (Filter Bar)
• Cabeçalho com Número Destaque (Header with Big Number)

Funcionalidades no Figma

No Figma, foram implementados recursos para ativar e desativar variações dos componentes, permitindo que os designers ajustassem rapidamente as configurações de cada elemento. Essa funcionalidade otimizou o processo de design, tornando-o mais ágil e eficiente na criação de layouts personalizados e na atuação sob diferentes contextos de página.

Objetivo Principal

Desenvolver componentes reutilizáveis e páginas padronizadas, possibilitando uma criação e implementação mais rápida de novas interfaces, mantendo consistência e escalabilidade.

Implementação Técnica

Os componentes foram desenvolvidos no ambiente Salesforce, utilizando LWC (Lightning Web Components), o que trouxe os seguintes benefícios:

• Escalabilidade: Componentes otimizados para múltiplos casos 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 com a identidade da marca Itaú.

Tokens Especiais: Cores e Gráficos

As cores do Design System foram desenvolvidas com base na paleta oficial do banco, porém adaptadas para atender aos critérios de acessibilidade. O objetivo foi garantir que as cores fossem funcionais, alinhadas à identidade visual da marca e acessíveis a todos os usuários.

Cores para Gráficos

Como o IDS (Itaú Design System) não possuía uma paleta específica para gráficos, foi necessário criar uma paleta personalizada, seguindo os princípios de visibilidade e contraste.

A nova paleta foi desenvolvida com combinações que priorizam legibilidade e diferenciação visual, abrangendo o máximo de variações possíveis.

Foram realizados testes de acessibilidade para garantir que as combinações de cores não prejudicassem a leitura e fossem adequadas para usuários com deficiência visual, como daltonismo.

Ferramentas Utilizadas

• Adobe Colors: Criação e organização das paletas.
• Stark: Testes de contraste de cores, assegurando conformidade com as diretrizes de acessibilidade (WCAG).
• Color Blind: Identificação e correção de problemas relacionados ao daltonismo, ajustando as combinações conforme necessário.

Interações entre Cores e Legibilidade de Texto

As interações entre as cores e suas combinações com sobreposições de tipografia foram testadas minuciosamente para garantir a legibilidade do texto em diferentes contextos de uso, como fundos coloridos, gráficos e áreas de destaque da interface.

Esses testes tiveram como objetivo assegurar que o contraste entre texto e fundo mantivesse a leitura confortável e acessível, independentemente do nível de luminosidade, da densidade de informação ou das condições visuais do usuário.

Resultados

• Paleta funcional e inclusiva: Uma paleta de cores alinhada à identidade visual do banco e acessível a usuários com diferentes necessidades visuais, garantindo contraste adequado e legibilidade em todos os contextos de uso.
• Gráficos otimizados: Visualizações claras e eficientes, capazes de comunicar dados com precisão e facilidade de interpretação, independentemente do contexto de aplicação ou de possíveis limitações visuais dos usuários.

Esses resultados consolidaram uma base visual sólida para o IBBA 360, equilibrando estética, acessibilidade e funcionalidade, e fortalecendo a consistência da experiência digital dentro do ecossistema Itaú.

Após o desenvolvimento do Design System do IBBA 360 (DS), tornou-se essencial criar estratégias de disseminação e orientação para garantir que as equipes adotassem corretamente os componentes e padrões estabelecidos.

Estratégias de Promoção

Biblioteca Centralizada

As bibliotecas foram disponibilizadas em plataformas específicas para cada público:

• Figma, voltado para as equipes de design.
• Salesforce, direcionado aos desenvolvedores.

A estrutura foi organizada de forma clara e intuitiva, com categorias bem definidas que facilitam a localização e reutilização de componentes, promovendo padronização e eficiência no processo de criação.

Documentação Abrangente

Foi desenvolvido um guia de uso detalhado, contendo:

• Descrição dos componentes e suas variações.
• Exemplos práticos de aplicação em diferentes contextos.
• Boas práticas para garantir consistência, acessibilidade e alinhamento visual com o Itaú Design System.

A documentação foi hospedada no SharePoint para todos os designers, assegurando disponibilidade e consulta rápida.

Suporte Contínuo

Um canal de suporte dedicado foi criado para tirar dúvidas e receber feedbacks sobre o uso das bibliotecas e do guia.

Foram implementadas atualizações regulares com base nas necessidades e sugestões das equipes, garantindo a evolução constante do Design System e o fortalecimento da cultura de design compartilhado dentro da organização.