Design manager (Caixa)
UX/UI Designer Sênior
UX/UI Designer Pleno (eu)
- Pesquisa Qualitativa
- Ideação
- Design de Interface
- Teste de Usabilidade
- Handoff para Devs
6 meses
O Desafio
Digitalizar a venda de bolões físicos sem ferir o compliance das Lotéricas, integrando sistemas legados offline e resolvendo simultaneamente o prejuízo do franqueado com cotas encalhadas e a falta de conveniência digital do apostador.
O Resultado
Marketplace hiperfocal lançado em produção no aplicativo oficial das Loterias da Caixa — conectando apostadores ao inventário físico das lotéricas via geolocalização em um único fluxo validado com usuários reais.
Início
Iniciamos com um onboarding detalhado junto aos Product Owners (POs). Esta fase foi crucial para absorver a visão do produto, entender os objetivos de negócio por trás da integração físico-digital dos bolões, definir o escopo inicial e alinhar as expectativas sobre os desafios e oportunidades do projeto.
Projeto
Criamos um marketplace hiperlocal. Em vez de uma vitrine genérica, o sistema utiliza as coordenadas do usuário para realizar um "match" instantâneo com o inventário físico das Lotéricas no seu raio de vizinhança. Isso digitaliza a compra, zera o encalhe de cotas das agências e resolve o problema de logística do apostador em um único fluxo.
Contexto
Realizamos uma análise aprofundada de benchmark, investigando soluções similares no mercado nacional e internacional. Utilizamos imagens e fluxos de interfaces concorrentes para identificar padrões, boas práticas, pontos fortes e oportunidades de diferenciação, focando em como outras plataformas lidavam com a conexão entre online e offline.
Teste de usabilidade
Realizamos testes de usabilidade com usuários representativos do público-alvo, utilizando o protótipo interativo para coletar feedback sobre a clareza, facilidade de uso e satisfação geral com a solução proposta. Apresentamos os protótipos e os resultados dos testes aos POs e stakeholders para refinamento e aprovação.
O Problema de um Mercado Analógico
Para o Agente Lotérico (B2B)
O modelo dependia 100% do tráfego físico. Qualquer bolão impresso pela Lotérica que não fosse vendido no balcão até a hora do sorteio representava um prejuízo financeiro direto para o franqueado.
Para o Apostador (B2C)
Falta de transparência e conveniência. O usuário precisava ir fisicamente à agência, pegar filas e contar com a sorte de encontrar a cota desejada disponível no papel, sem nenhuma previsibilidade digital.
A Complexidade do Negócio (Bastidores)
Para além da interface, este projeto exigiu imersão profunda em regras estatais e limitações técnicas. O desafio foi traduzir burocracia em usabilidade sem ferir o compliance da instituição.
🔒 Compliance e Regulação
Ao contrário de e-commerces comuns, o Bolão Lotérico opera sob legislação federal estrita. Cada interação do usuário precisou ser validada juridicamente para garantir que a "digitalização" não violasse as normas de exclusividade das casas lotéricas físicas.
⚙️ Integração com Legado
O maior nó técnico foi desenhar uma experiência que conversasse com os Terminais Financeiros Lotéricos (TFL). Tivemos que mapear fluxos de erro específicos para quando o sistema legado (offline) não respondesse ao app em tempo real, evitando quebras de transação.
📍 Travas de Geolocalização
Implementamos regras de negócio baseadas em raio de atuação. O sistema impede a canibalização de vendas entre lotéricas vizinhas, exigindo lógica complexa de exibição de ofertas baseada na latitude/longitude do usuário versus o CNPJ da unidade.
📊 Viabilidade Financeira
Desenhei o painel de controle para os lotéricos considerando a gestão de risco. A interface precisava deixar claro quais cotas estavam "em aberto" para evitar prejuízo operacional para o franqueado caso o bolão não fosse 100% vendido até o sorteio.
O que rolou no projeto.
- Alinhamento Inicial e Imersão: Onboarding com os Product Owners (POs) para definir escopo, objetivos de negócio e os desafios da integração físico-digital para o Bolão Lotérico.
- Benchmark e Análise de Concorrência: Investigação de soluções de loterias online nacionais/internacionais e plataformas com funcionalidades de geolocalização para identificar boas práticas, fluxos de usuário e oportunidades de inovação.
- Análise da Plataforma Atual: Mapeamento do fluxo existente no site Loterias Online Caixa para identificar pontos de atrito e áreas de melhoria na busca e compra de bolões.
- Mapeamento de Jornada (User Flows): Definição dos fluxos principais para a nova funcionalidade, incluindo o "caminho feliz" de encontrar e comprar um bolão próximo, além de cenários alternativos.
- Ideação e Esboços: Geração de conceitos e soluções focadas na busca por proximidade, clareza das informações e simplificação do processo de compra.
- Prototipação Interativa: Criação de wireframes (baixa fidelidade) para estruturar a informação e protótipos navegáveis (alta fidelidade) no Figma para visualizar, testar e validar a experiência proposta.
- Validação com Usuários: Realização de testes de usabilidade com o protótipo para coletar feedback direto dos usuários e iterar sobre o design.
- Handoff para Desenvolvimento: Preparação e entrega de especificações visuais, fluxos documentados, componentes de UI e assets para a equipe de implementação, garantindo a fidelidade ao design proposto.
Benchmark
Realizamos uma análise de benchmark comparando a funcionalidade atual do Bolão Caixa com quatro plataformas de referência, incluindo outras loterias online e serviços que utilizam geolocalização para conectar usuários a pontos físicos. O objetivo foi identificar as melhores práticas e oportunidades de inovação em pontos-chave da jornada do usuário...
Amazon
Mega Loterias
TuLotero
Sorte Online
UserFlow
Utilizamos User Flows para mapear visualmente os passos que o usuário percorreria para encontrar e comprar um bolão próximo. Isso nos permitiu visualizar toda a jornada, identificar os pontos de decisão chave e garantir que o fluxo fosse o mais claro e intuitivo possível.
Wireframe de baixa fidelidade
A baixa fidelidade não foi rascunho — foi uma ferramenta de decisão. Nesta fase, definimos três escolhas estruturais que moldaram o produto final: posicionar a geolocalização como elemento central da home (e não como filtro secundário); separar o fluxo de compra do fluxo de resgate em jornadas independentes desde o início; e ocultar as modalidades menos populares atrás de filtro para reduzir a carga cognitiva da tela principal.
Tela Home do Bolão Desktop
Mapa como hero element — decisão de priorizar a dimensão física do produto (a lotérica próxima) antes da lista digital de bolões disponíveis.
Estrutura de Modalidades
Separação visual entre bolões disponíveis e encerrados definida aqui — reduz a frustração de clicar em algo indisponível antes de ver o conteúdo.
Fluxo de Seleção e Checkout
Primeira validação do funil de compra: definição de quantas etapas o usuário percorre do card do bolão até a confirmação do pagamento.
Pix e Revisão do Pedido
Tela de revisão projetada para que o usuário confirme lotérica, cota e valor em uma única tela — evitando abandono por insegurança na etapa final.
Wireframe de Alta Fidelidade
Avançando da estrutura validada nos wireframes de baixa fidelidade, a versão de alta fidelidade incorpora a camada visual completa do produto. Nesta fase, aplicamos a identidade visual definida (cores, tipografia, componentes) para criar uma representação fiel da interface final.
Importante: As telas apresentadas são um exemplo representativo. O projeto completo abrangeu os fluxos de todas as modalidades de loterias, incluindo variações para eventos sazonais como a mega-sena da virada, garantindo consistência em toda a plataforma.
Home em alta fidelidade
Modal com detalhes do Bolão
Tela de pagamento
Detalhe de pagamento
A Experiência Mobile
Com a estrutura de wireframes validada, aplicamos a camada visual final. O foco foi transmitir confiança e clareza. Usamos a paleta institucional da Caixa, mas com uma abordagem moderna de UI para destacar as ações principais.
Dê o play no vídeo ao lado para conferir o fluxo completo, desde a seleção do bolão na home até a confirmação do pagamento no mobile.
Tela Inicial
Seleção de Bolão
Detalhe do Jogo
Filtros
Estrutura e Validação com Usuários
Para garantir que a integração do bolão físico para o digital seria fluida, dividimos o teste de usabilidade em quatro missões principais, focadas em mapear atritos de navegação e carga cognitiva.
Descoberta e Distinção
O Cenário: Você deseja realizar uma aposta bolão de Lotofácil com prêmio de 1.5 milhões.
A Missão: No card da Lotofácil, selecionar a opção de "aposta bolão" e realizar o login.
Configuração de Cotas
O Cenário: Chegou a hora de adicionar a quantidade de cotas e ir para o carrinho de compras.
A Missão: Entrar em "detalhes" do jogo, adicionar 2 cotas ao bolão e seguir para o pagamento.
Seleção via Lista
O Cenário: Você também consegue fazer seu bolão através da lista de cotas disponíveis.
A Missão: Escolher o jogo QUINA na lista de bolões disponíveis e adicionar 1 cota ao carrinho.
Checkout e Pagamento
O Cenário: A última etapa é o pagamento. Para concluir, você utilizará um cartão de crédito via Mercado Pago.
A Missão: Adicionar seus dados de comprador e finalizar a compra com o cartão.
Métricas Avaliadas
- Eficiência: Velocidade de navegação e transição fluida entre as etapas do funil.
- Carga Cognitiva: Foco em reconhecimento visual em vez de memorização (Heurísticas de Nielsen).
- Fricção: Mapeamento de hesitações ou dúvidas na transição entre os campos e telas de pagamento.
Principais Descobertas e Plano de Ação
01. O Paradoxo do Texto
O Atrito: A maioria dos usuários ficou perdida com a grande quantidade de texto no menu inicial. Foi a tarefa com maior tempo e taxa de desistência/ajuda.
"Achei que tem muito texto. Tinha que ser uma linha só o conteúdo."
02. Ícones Desconhecidos
O Atrito: Navegação fluida e 100% de sucesso, porém surgiu uma dúvida pontual sobre a iconografia ("trevos") no card.
"O que são os trevos?"
03. A "Parede" Visual
O Atrito: Nenhum usuário conseguiu concluir sem ajuda. A lista de bolões abaixo do card principal parecia um rodapé estático, e não percebiam que a tela tinha scroll.
"Eu não tô vendo nenhum botão de lista aqui. A primeira linha pareceu um rodapé."
04. Alinhamento de Preços
O Atrito: Etapa mais rápida do teste. A única ressalva foi a arquitetura da informação dos valores (jogos à direita vs. carrinho à esquerda).
"Normalmente nos carrinhos de compra os valores são mostrados na mesma coluna."
Resultados & Iterações
Os testes de usabilidade não foram o fim do processo — foram o ponto de virada. Os atritos mapeados nas quatro tarefas geraram um plano de iteração direto, que foi priorizado, implementado e validado antes do lançamento oficial da nova versão do aplicativo.
🔁 Da pesquisa à produção
Todas as quatro ações de melhoria identificadas nos testes foram implementadas na iteração final do protótipo. O redesign da navegação inicial, os tooltips de iconografia, a affordance de scroll e o realinhamento de valores foram incorporados ao handoff para desenvolvimento — e a nova versão entrou em produção.
📲 Lançamento em produção
O projeto foi entregue em produção e integrado ao aplicativo oficial das Loterias da Caixa, utilizado por milhões de brasileiros. A jornada completa — do onboarding com os POs até a entrega em produção — demonstra que as decisões de UX foram respaldadas por dados e aceitas pelos stakeholders.
As métricas de negócio são de propriedade da Caixa Econômica Federal e não podem ser divulgadas publicamente.
📉 Redução de carga cognitiva
A Tarefa 01 — a de maior atrito, com 1m36s de tempo médio e 3 dos 5 usuários precisando de ajuda — foi diretamente endereçada pela simplificação do menu inicial. A remoção do "passo a passo" textual dos botões priorizou a navegação interativa, alinhando a interface ao princípio de reconhecimento sobre memorização.
✅ Validação do método
A Tarefa 04 — checkout e pagamento — foi a mais rápida do teste (0m45s, 4/5 de sucesso), confirmando que a integração com o gateway de pagamento, desenhada com foco em padrões mentais de e-commerce (Lei de Jakob), já estava adequada antes mesmo das iterações finais.
Linha do Tempo do Projeto
- Kick-off & Imersão Alinhamento com POs, definição de escopo e objetivos de negócio.
- Benchmark & Descoberta Análise de concorrentes nacionais e internacionais com foco em geolocalização e loterias.
- Arquitetura & Wireframes User flows, baixa e alta fidelidade, cobrindo cenários de erro e compliance.
- Teste de Usabilidade 5 usuários, 4 tarefas, identificação de 4 atritos críticos.
- Iteração & Correções Todas as ações de melhoria implementadas no protótipo final.
- Handoff & Produção Entrega para desenvolvimento e lançamento da nova versão do aplicativo.
Vamos trabalhar juntos?
Se você tem uma ideia, uma vaga ou só quer trocar uma figurinha, me manda uma mensagem.