Aplicativo Alliance — Estudo de Caso UX de Ponta a Ponta

Projeto para:Alliance Jiu-Jitsu Tempo de projeto: 12 Semanas Ferramentas usadas: Figma, Figjam, Google e Notion

Desafio: Aplicativo Alliance Sem Intuitividade para marcar presença nas aulas

Alliance é uma academia de jiu-jitsu (brazilian jiu-jitsu) com metodologia pioneira de aulas coletivas, operando em mais de 300 filiais presentes ao redor do mundo.

• Problema: O aluno possue dificuldade para marcar presença nas aulas (realizar check-in). A falta de intuitividade no aplicativo impacta diretamente a progressão e fidelização do aluno.
• Resumo: Assumi o re-design do aplicativo para tornar a tarefa mais clara, simples e eficiente, melhorando toda a experiência do usuário.

Como este projeto começou

Como aluna, experimento na prática as facilidades e frustrações do dia a dia; como usuária do aplicativo, percebo lacunas claras na experiência digital; como cliente, entendo o valor esperado pelo serviço; e, principalmente, como profissional de atendimento, tenho acesso direto às dores, dúvidas e expectativas de outros alunos. Essa combinação de perspectivas me permite enxergar o problema de forma mais completa — não apenas como uma falha de interface, mas como uma oportunidade estratégica de melhorar a jornada como um todo, conectando experiência física e digital de maneira mais consistente e eficiente.

O processo de agendar e registrar aulas na Alliance funciona, obrigatoriamente, dentro do aplicativo. E é por lá que os alunos contabilizam suas aulas até o próximo grau ou exame para a troca de faixa.

Este estudo de caso documenta o processo completo de UX que segui para redesenhar o app, desde a análise de heurísticas, informações dos usuários entrevistados, bench competitivo, wireframing, testes de usabilidade a entrega de um design visual refinado.

Fase 1: A Descoberta — Analisando a experiência atual do usuário

Antes de olhar quaisquer dados, realizei uma auditoria na versão atual do aplicativo para identificar pontos de fricção com as lentes dos fundamentos de design, heurísticas, usabilidade e fluxos de navegação.

Para embasar os pontos que levantei, decidi testar o uso do aplicativo na versão atual com participantes que nunca haviam usado. Apliquei este experimento presencialmente e os orientei para a missão de realizar o check-in em qualquer aula que conseguissem. Partindo disso, observei e anotei os caminhos, comportamentos e reações dos participantes:

De 4 participantes apenas 1 conseguiu concluir a tarefa em 1 minuto. Os demais desistiram ao atingirem mais 2 minutos de tentativa.

O principal ponto de fricção na experiência dos usuários ficou evidente: está no processo de check-in nas aulas. Ponto crítico que impacta diretamente a percepção de valor do aplicativo e retenção do cliente.

Com isso, pude comprovar minhas descobertas, e então, priorizar meus planos de ação para solucionar no re-design:

Fase 2: Pesquisa com o Usuário — Realizando entrevistas com alunos da academia

Estruturei essa etapa baseada na escuta dos alunos, e para isso, desenvolvi perguntas norteadoras que guiaram as entrevistas buscando compreender suas rotinas, perfis, motivações, dificuldades e percepções sobre o aplicativo atual.

Perfil de usuários recrutados: 13 alunos ativos na Alliance.

As entrevistas completas estão neste url https://docs.google.com/document/d/1baETk5IY0x3TgtVNcavg_t-Q9V3QifYkPMiYfFKdbJU/edit?usp=sharing

Principais Insights:

Com base na entrevista do usuário, criei duas personas: Noa e Lorelai que foram criados para sintetizar a pesquisa em arquétipos relacionáveis, orientando todas as decisões de design com um foco centrado no ser humano e em suas necessidades distintas. Esses perfis foram detalhados desde a necessidade e comportamento até exigências de segurança equivalente a dor e frequência de cada um.

Fase 3: Benchmark — Analisando o mercado

Além dos testes e entrevistas, a análise de benchmark e a construção da curva de valor foram fundamentais para direcionar o desenho da solução e para aprofundar a qualidade de resultados e insights.

Essas ferramentas ajudaram a identificar não apenas padrões de mercado, mas principalmente oportunidades de diferenciação e valor percebido. Garantindo que, além da experiência proposta não apenas resolvendo os problemas identificados, mas também elevando o produto a um nível mais alinhado às expectativas dos usuários.

Comparei com o aplicativo Totalpass que não é um concorrente direto dos negócios, mas que contribui com uma boa interface, navegação e usabilidade para a mesma função de realizar check-in.

Em relação ao comparativo com outros aplicativos de academias de jiu-jitsu como BJJ COLLEGE e GRACIE BARRA, que são relevantes concorrentes, realizei uma pesquisa qualitativa que trouxe alguns insights:

• Ambas academias possuem o botão CTA na sua homepage;
• Também disponibilizam controle de desempenho, frequências de aula e progressão para próxima faixa;
• Possuem diferencial de sistema de pagamento, planos e serviços dentro do app;
• Ambas também proporcionam espaço de notificações inteligentes (como lembrete de aulas, aulas com vagas disponíveis) e chats;
• Catálogos de treinos, aquecimentos, posições e conteúdos diversos da comunidade de jiu-jitsu.

Fase 4 — Wireframing: Transformando a pesquisa em estrutura

A fase de wireframing foi sobre transformar a solução em telas sem se comprometer com o design visual muito cedo.

Dentro do Figma, comecei com quadros em escala de cinza de baixa fidelidade focados puramente no layout e na hierarquia de informações. Sem cores, sem cópia final, sem distrações. O objetivo era validar a estrutura antes de dedicar tempo em qualquer outra coisa.

• Tela 1 — Login de entrada com caixas de e-mail e senha
• Tela 2 — Homepage com botão CTA "realizar check-in"
• Tela 3 — Extensão do calendário
• Tela 4 — Grade de aulas do dia selecionado
• Tela 5 — Informações da aula
• Tela 6 — Confirmação da aula + CTA "cancelar check-in"
• Tela 7 — Opção de confirmar cancelamento "sim" ou "não"
• Tela 8 — Feedback da ação

Fase 6 — Validando o desenho: O que deu errado nos wireframes

Testei com a maioria dos participantes que entrevistei e potenciais alunos que testaram o aplicativo pela primeira vez

O que funcionou imediatamente?

A homepage não precisava de explicação. Cada participante encontrou o botão para realizar check-in imediatamente, sem perder tempo e sem hesitar, conseguiam identificar e partir para os próximos passos com fluidez. Dois problemas da pesquisa, resolvidos no nível estrutural.

O que não funcionou?

O único problema identificado aqui foi de descoberta do fluxo mental dos usuários e não do conceito aplicado.

A tarefa, durante o teste de usabilidade, era realizar check-in em uma aula de iniciantes no dia 17 de abril.

Todos os usuários conseguiram cumprir a tarefa em menos de 30s, porém ao chegarem na tela da aula correta, confundiam os colegas de treino com alternativas de opção. O que resultou em rápidas tentativas de clique nos participantes antes de "realizar check-in".

Outro ponto de fricção que fortaleceu esta confusão, foi o writing escolhido para o botão CTA.

Além disso, ao visualizar o calendário estendido na homepage, os usuários pareciam pensar demais e se esforçavam para tomar uma decisão de qual dia escolher.

As Correções

Alterações para as melhorias mapeadas:

• Indicar outros alunos como participantes do treino;
• Adicionar um calendário minimalista e semanal de forma mais objetiva, minimizando erros;

O teste revelou possíveis falhas e lacunas na execução com a forma de pensamento dos usuários — e era exatamente para descobrir isso que testamos em wireframe.

Fase 6 — Visual Design: Embelezando o processo de UI

Com a estrutura validada e as descobertas de usabilidade resolvidas, o design visual foi a última etapa a ser feita. Cada cor, escolha tipográfica e decisão de componente tinha um papel crucial para defender a experiência.

Cores

O amarelo da marca foi mantido como a cor de ação principal — presente em CTAs e estados de tela, porque é o que torna o app reconhecível e familiar aos alunos. Todas as cores sólidas como preto e tons de cinza foram adicionados porque fazem parte da identidade visual do site e redes sociais, e branco para fundos de página.

Tipografia

As fontes foram utilizadas como forma de escalar a informação de forma hierárquica. A Inter foi usada para informações de treinos, calendário e menu de aulas. Com excelente legibilidade em mobile, moderna, neutra e que passa uma hierarquia premium.

Popins foi usada para botões — CTAs, por serem mais jovens e amigáveis para uma chamada de ação. Por último, Manrope para títulos e subtítulos de mensagens ao usuário, por ser elegantes e excelentes para leitura, proporcionando personalidade e refinamento na experiência.

Componentes

Cada componente foi projetado para resolver um problema específico de usabilidade identificado no teste. Os cards de treino arredondados são compactos por padrão e permitem rolagem horizontal e vertical — mantidos da primeira versão. Assim como as entradas de formulário (login e senha) do app que também mantém a convenção do design. O calendário semanal enxuto, facilitando a tomada de decisão e visualização dos dias da semana.

Conclusão

A mudança mais importante não é visual — é estrutural. O redesenho move a ação mais importante (marcar aula), revela as informações que os usuários precisam (dia de treino, horário, instrutor e outros alunos) onde precisam e remove todas as barreiras que o original colocou entre um usuário e a conclusão de um check-in.

Considerações e melhorias para o processo do estudo e fases são bem vindas, afinal esse foi só o primeiro de muitos durante essa minha jornada de UX e início de carreira. Obrigada a todos que leram até aqui e até logo :)