top of page
Projeto Padrões CAIXA Econômica Federal
UI/UX Design
Desafio
“Padrões de design são soluções reutilizáveis para problemas recorrentes de interface”
Na prática, se materializam em templates e páginas pré-prontas com documentações que auxiliam a construção de soluções digitais.
Objetivo
Promover padronização de experiência do usuário e de interface nos produtos CAIXA; Facilitar onboarding de novos colaboradores; Reduzir retrabalhos e Acelerar entregas.
✨ Atuei em dupla com outro UI/UX Designer, além da design lead e dois stakeholders da CAIXA.
Pesquisa com designers
Descoberta
O primeiro passo foi definir e entender o problema. Para isso, foi feita uma pesquisa com todos os UI/UX Designers do projeto CAIXA, tanto colaboradores internos quanto externos.
Benchmarking
Descoberta
Após a pesquisa com usuário, foi feito um benchmarking de templates e padrões de outras empresas e também de projetos da própria CAIXA para entender os padrões mais recorrentes.
Documentação
Definição
Nesse momento, foi feita uma estrutura de documentação a ser seguida para cada um dos padrões. Além da criação de um backlog de entregas.
✨ Aqui foi definido que a primeira entrega seria o Basic Layout (Leiaute Básico).
Benchmarking e Matriz CSD
Imersão
Foi feito benchmarking de 13 padrões de Basic Layout do mercado e de 10 interfaces da CAIXA. Além disso, foi feita uma matriz de certezas, dúvidas e suposições sobre o padrão.
Matriz Esforço x Valor
Imersão
A partir de matriz CSD e do mapa de oportunidades, foi criada a matriz de esforço x valor para avaliação dos entregáveis do padrão.
✨ No momento, decidimos não seguir com tantas personalizações do padrão.
Criação de componentes
Prototipação
Foram utilizados componentes já existentes no Design System CAIXA, como footer e header, mas também foram criados 5 novos componentes: Button group, Local header, Local footer, Slots group
e Divider.
Breakpoints
Prototipação
Criação do Basic Layout em diferentes tamanhos de telas: extra pequeno: até 480px; pequeno: 48px a 768px; médio: 769px a 1024px e grande: 1025px a 1440px.
✨ Tanto na etapa dos componentes quanto dos breakpoints foram realizados testes de responsividade e autolayout.
Testes do Padrão
Prototipação
Depois disso, recriamos os layouts da CAIXA com o nosso novo padrão Basic Layout para perceber pontos de melhoria ou possíveis quebras de componentes.
Documentação
Entrega
A documentação do Basic Layout foi escrita seguindo os padrões do DS CAIXA e o mesmo foi publicado no arquivo do Design System para utilização de todos os designers.
Feedback
Entrega
A resposta ao padrão Basic Layout foi extremamente positiva e recebeu diversos elogios dos designers CAIXA.
Vamos trabalhar juntos?
bottom of page