Um ecossistema de assinatura com três frentes: o app de quem economiza, o app de quem oferece os cupons e o painel de quem gerencia o clube.
Notebook ao fundo com o painel do gestor (Resumo estatístico) e dois iPhones à frente: à esquerda o app do assinante (Home), à direita o app da empresa (Dashboard "Olá, La Barberia"). Fundo azul-marinho #050D62 com brilho roxo #A746FF atrás do conjunto. Sombras suaves, sem textura.
O Clubii é um clube de descontos por assinatura para o comércio local. A proposta é conectar quem quer economizar a barbearias, restaurantes, salões e outros negócios do bairro, com cupons para usar presencialmente.
O assinante escolhe entre um plano gratuito, com acesso limitado, e o plano VIP, que libera todos os descontos. O projeto foi desenvolvido na Jonnpo Tecnologia, onde fui responsável pelo design do ecossistema inteiro.
Depois da pandemia, muitos estabelecimentos locais passaram a ter dificuldade para trazer clientes de volta à loja física, e faltava uma plataforma que ligasse esses negócios a quem procura promoções por perto.
Ao mesmo tempo, clube de cupons não é uma ideia nova: modelos como o Peixe Urbano já tinham perdido força no passado. Antes de desenhar qualquer tela, precisávamos entender o que faria esse modelo funcionar agora.
Nas primeiras semanas ficou claro que não era um app para um usuário só. De um lado, o cliente que quer encontrar descontos perto de casa; do outro, o empresário que precisa publicar ofertas e ver se elas trazem gente para a loja. E, por trás dos dois, o Clubii precisava de um painel para configurar planos, moderar ofertas e acompanhar tudo.
Desenhei as três frentes em sequência, com os mesmos componentes e regras, para que cada ação de um lado tivesse uma resposta clara no outro.
Quem paga o plano e economiza nos negócios do bairro.
Quem oferece os descontos e atende o cliente.
Quem administra o clube como um todo.
Do primeiro acesso ao cupom validado no balcão, a jornada principal acontece em quatro passos.
Seguimos o Double Diamond. Começamos com reuniões de imersão com o cliente para entender o modelo de negócio, os pontos de atrito e os requisitos: geolocalização, pagamento de planos, criação de anúncios pelas empresas e check-in no estabelecimento para validar o uso.
Com isso, priorizamos o fluxo do cliente (home, lista de cupons, filtros, detalhes do cupom com QR code, carteira e perfil) e validamos a estrutura em wireframes. O app do cliente foi o primeiro a ficar pronto; em seguida vieram o app da empresa e o painel do gestor.
Wireframes dos fluxos principais.
O onboarding precisava vender a ideia em três telas: existem descontos exclusivos perto de você, dá para reservar pelo app e todo dia tem cupom novo.
Na última tela, a entrada “Sou empresa” separa os dois públicos logo de início e leva o empresário para o cadastro do negócio, sem misturar com o fluxo do cliente.
Um clube de cupons só se sustenta se o assinante sentir que vale a pena. No app do cliente, as decisões buscaram deixar sempre visível onde está o desconto, quando ele pode ser usado e quanto já foi economizado.
A home organiza os cupons por nicho, como restaurantes, barbearias e pet shops, para quem já sabe o que procura. O mapa atende quem quer saber o que tem por perto: cada pino usa o ícone do tipo de negócio e, ao ser tocado, mostra quantos cupons a loja tem, se está aberta e a distância.
Nem todo desconto funciona do mesmo jeito: um corte de cabelo precisa de horário, uma porção de batata não. Por isso o cupom tem dois caminhos, “Pegar cupom” para uso imediato e “Agendar” para serviços. Depois de confirmado, ele vira um QR code com código de apoio, e os selos Todos Clubii e VIP Clubii indicam para qual plano a oferta vale.
Para evitar frustração no balcão, a disponibilidade presencial aparece em tabela por dia e turno, com o dia atual em destaque. As regras de uso ficam no próprio cupom, e o aceite dos termos acontece antes da confirmação, não depois.
A carteira mostra os cupons prontos para usar e um número que resume o valor do clube: quanto o assinante já economizou. As missões e o nível de fidelidade incentivam o uso recorrente, enquanto favoritos e avaliações ajudam o cliente a voltar e as empresas a ganhar reputação.
O empresário usa o Clubii no celular, entre um atendimento e outro. Ele precisava conseguir, sozinho, criar e alterar promoções, validar descontos e saber se o Clubii estava trazendo clientes.
Por isso o app da empresa fala a mesma língua visual do app do cliente, mas é organizado em torno de três perguntas: o que está no ar, quanto vendeu e quem veio.
Em vez de um formulário longo, criar um cupom virou um passo a passo com uma pergunta por tela: para qual plano é a oferta, se pode ser usada na hora ou só com agendamento, e se é serviço ou produto. Cada opção traz uma dica de quando usar, e as regras de uso são escritas pela própria empresa.
O dashboard resume o período escolhido: cupons VIP usados, usados, agendados e curtidas. Cada cupom mostra uma barra de uso (por exemplo, 8 de 12), e o painel de controle permite pausar, retomar e editar sem perder o histórico. As vendas podem ser filtradas por tipo e por plano.
A validação é o momento em que o app sai da tela e encontra o balcão. A empresa lê o QR code do cliente, ou digita o código, e recebe um retorno imediato: cupom confirmado, agendado para outro horário ou inválido, cada um com a próxima ação clara.
Espaço para 4 telas do app da empresa, lado a lado no mesmo formato de celular: Leitura de QR code, Validação de cupom (Positivo), Validação de cupom (Negativo) e Validação de cupom (Não encontrado). Exportar do Figma em PNG 2x.
Cada cliente tem um histórico com o que comprou, quando agendou e o seu nível de fidelidade. A empresa também acompanha as avaliações de cada cupom e ajusta horários e dias de atendimento sem precisar de suporte.
O gestor do Clubii administra a plataforma pelo navegador. No painel web, ele configura os valores dos planos, modera ofertas, acompanha as métricas de uso e gerencia os perfis de clientes e empresas.
Como é uma ferramenta de trabalho com muito dado, a prioridade foi a leitura rápida: resumo estatístico na entrada, tabelas com status por cor e atalhos para o que precisa de atenção.
Resumo estatístico: clientes, empresas e cupons, atividades recentes e notificações.
Moderação: cupom denunciado por usuários, com revisão por item.
Cupons com status ativo, em revisão ou excluído.
Relatórios de novos clientes e picos de uso.
Perfil da empresa com cupons e disponibilidade.
Usuários, separados entre clientes e empresas.
Configurações: planos, FAQ e banners.
Quando usuários denunciam um cupom, ele chega ao gestor como alerta, com o item problemático sinalizado, como a imagem. O gestor marca o que precisa ser revisado e envia o pedido à empresa, pausando a oferta em vez de excluí-la. Assim a qualidade do clube fica protegida sem punir o parceiro por um erro que tem conserto.
A marca guia a interface: o azul-marinho marca as ações principais, o roxo identifica os selos do clube e o verde sinaliza economia. Os cards de oferta têm o recorte lateral de um cupom de papel.
Os mesmos componentes servem os dois apps e o painel, o que manteve a consistência entre as três frentes e facilitou o handoff para o time de desenvolvimento.
Entregamos o ecossistema completo: o app do cliente, o app da empresa e o painel do gestor, desenhados sobre o mesmo sistema de componentes.
Houve desafios no caminho, mas o tempo investido no briefing e na imersão inicial fez diferença: as decisões de produto já estavam claras quando chegamos às telas, e o projeto foi entregue com sucesso.
Mão segurando um iPhone no balcão de uma barbearia, mostrando o cupom confirmado com QR code. Luz quente do ambiente, fundo desfocado, tela nítida. Formato horizontal 16:9.