Banese - Design System e Aplicativo

O Banese é um banco completo que atua no mercado financeiro há mais de 50 anos com uma história de solidez e confiabilidade, o Banese é reconhecido pela qualidade de seus serviços e pelo atendimento personalizado aos seus clientes.

Oferecendo uma ampla variedade de produtos e serviços bancários, como empréstimos, cartões de crédito, investimentos, seguros e muito mais. Todas essas opções são oferecidas com taxas competitivas e condições flexíveis para atender às necessidades dos seus clientes.

Contexto

Em dezembro de 2022, iniciamos o processo de redesign do aplicativo do Banco Estadual de Sergipe - Banese. O objetivo era desenvolvermos o aplicativo feito do zero com melhorias de usabilidade e de interface.

O projeto foi desenvolvido junto com outros especialistas, responsáveis pelo UX Research foram o Almir Oliveira e a Diéssica Shaiene, UX/UI Design foi o Eduardo Fonseca e UI Design foi o Tiago Antonio.

Documentação

Desenvolvemos o nosso Design System seguindo o Atomic Design: Átomos, Moléculas, Organismos, Templates e Páginas.

Começamos com os átomos, que são os elementos mais básicos do design, como cores, tipografia e ícones. Em seguida, combinamos esses átomos para criar moléculas, que são componentes maiores, como botões e campos de formulário. Depois, combinamos as moléculas para criar organismos, como menus e formulários completos. Por fim, usamos esses organismos para criar páginas completas.

Essa estrutura molecular ajuda a garantir que nossos designs sejam consistentes e escaláveis.

Fluxos desenvolvidos

As funções no desenvolvimento do projeto eram divididas junto com os outros colaboradores, a equipe era formada por profissionais focados em suas determinadas funções. As etapas dos processos que fui responsável foram:

1️⃣ Benchmark - Map;

2️⃣ Baixa fidelidade - Sketch;

3️⃣ Wireframe - Sketch;

4️⃣ Articulação de decisões de design - Decide;

5️⃣ Alta fidelidade - Prototype;

Durante o desenvolvimento do projeto fui responsável pelos fluxos de UX/UI Design de:

Serviços da conta:

✅ Home da conta;

✅ Extrato da Conta;

✅ Open Finance;

✅ Seguro Cartão Protegido;

✅ Portabilidade de Salário;

✅ Empréstimos;

Serviços de pagamento:

✅ PIX;

✅ Transferências;

✅ Pagamentos;

✅ Gift Cards;

Serviços de investimento/crédito:

✅ Investimentos;

✅ Poupança;

✅ Financiamento;

✅ Capitalização;

✅ Consórcio;

Conclusão

A documentação de design segue uma linguagem visual consistente, com padrões de nomenclatura claros e uma documentação detalhada para cada componente. Isso facilita a comunicação entre a equipe de design e desenvolvimento, garantindo que as interfaces sejam implementados corretamente.

O aplicativo ainda não está em ambiente de desenvolvimento. Contudo, está aprovado pelos stakeholders e aguardando o start dos diretores para começarmos o desenvolvimento.