CONTEXTO
Treino e reserva
Academia com areia de praia.
← Todos os projetos
PROJETO PARA CLIENTE / BEM-ESTAR / UX E UI
Sandfit Arena.
Treino na areia. Reserva com clareza.
App e site para uma academia com treinos na areia. O projeto apresenta as modalidades e organiza a consulta de aulas, a reserva de vagas e o uso de créditos.
MEU PAPEL
Design de produto
UX, UI, fluxos e sistema visual.
ENTREGA
Experiência integrada
App, site, DS e protótipo.
CONTEXTO
Informações da aula
antes da reserva.
Quem visita a arena pela primeira vez precisa saber como funciona a aula e como se preparar. Organizei essas informações junto dos horários e das condições da reserva.
DESAFIO
Diminuir a incerteza.
Modalidade, duração, instrutor, vagas e custo em créditos precisam aparecer antes da confirmação.
DIREÇÃO DE PRODUTO
Reagendar e acompanhar reservas.
Agenda, lista de espera e reagendamento acompanham mudanças na rotina sem obrigar a pessoa a começar de novo.
PERFIL E CRITÉRIOS
Um treino que cabe
na rotina.
Milla é o perfil de referência da proposta: uma pessoa que concilia trabalho e treino, procura horários compatíveis e precisa entender as condições antes de reservar.
NECESSIDADE
Encontrar o que cabe na semana.
Consultar dia, horário e disponibilidade na mesma leitura, com filtros que ajudam a reduzir as opções.
CONTROLE
Alterar sem perder o contexto.
Reagendar com a reserva atual preservada e ver a regra de cancelamento antes de confirmar a decisão.
PRIMEIRA VISITA
Chegar com orientação.
Saber duração, preparo, unidade e posição na arena para reduzir as dúvidas da chegada.
JORNADA
Da escolha do treino
à confirmação da reserva.
O site apresenta a arena. O app organiza a escolha do treino e a gestão da reserva. A operação consulta disponibilidade, créditos e condições antes de concluir cada ação.
01
Agenda
Encontrar dia, modalidade e horário.
02
Posição
Selecionar uma vaga disponível.
03
Revisão
Conferir crédito, prazo e informações.
04
Confirmação
Receber a reserva e a orientação.
TURMA LOTADA
Registrar interesse.
A lista de espera informa que uma vaga pode surgir. A confirmação depende de uma nova escolha e da disponibilidade.
SEM CRÉDITOS
Voltar à reserva após a compra.
Após escolher um pacote e acompanhar o pagamento, a pessoa retorna ao contexto da aula para revisar a reserva.
DESCOBERTA
Horário, disponibilidade
e identidade na mesma leitura.
A tela inicial destaca o próximo treino. Na agenda, cada aula mostra horário, modalidade, instrutor e vagas, com fotos que ajudam a identificar a atividade.
DECISÃO / HOME
Uma ação principal.
O próximo treino reúne horário, instrutor, duração e acesso à reserva. A foto apresenta a atmosfera da academia.
DECISÃO / AGENDA
Comparar sem esconder dados.
Lista vertical com miniaturas, horário, modalidade, instrutor e vagas. A imagem complementa a informação de cada aula.
RESERVA
Regras visíveis
antes de confirmar.
O mapa numerado orienta a escolha do lugar. A revisão reúne o custo, o saldo após a reserva e o prazo de cancelamento. A confirmação confere novamente a disponibilidade.
DECISÃO / MAPA
Estado além da cor.
Número e rótulo distinguem posições livres, ocupadas e selecionadas. A pessoa entende onde ficará na arena.
DECISÃO / CONFIRMAÇÃO
Mostrar o custo e o prazo.
Uma aula utiliza 1 crédito. O resumo apresenta o saldo resultante e o horário limite para cancelar com devolução.
RECUPERAÇÃO
Reagendamento, lista de espera
e créditos.
O fluxo informa quando uma vaga foi ocupada, a turma está lotada, faltam créditos ou o pagamento está pendente. Em cada situação, apresenta a ação disponível para continuar.
REAGENDAMENTO
Preservar a reserva atual.
A aula original permanece ativa durante a escolha. A substituição acontece após a disponibilidade do novo horário ser conferida.
LISTA DE ESPERA
Separar interesse e reserva.
Entrar na lista não ocupa uma vaga nem debita créditos. Quando há disponibilidade, a pessoa decide se quer confirmar.
CRÉDITOS
Comunicar o que aconteceu.
Saldo, validade e extrato organizam o acompanhamento. Pagamento pendente e pacote ativado têm mensagens e ações próprias.
SISTEMA VISUAL
O mesmo sistema visual
no site e no app.
A identidade da Sandfit combina fundos escuros, verde lima e roxo. Cor, tipografia e componentes tornam a experiência reconhecível entre o site e o app.
Base
#121A15
Superfície
#1F2D23
Verde lima
#D5FF5F
Roxo
#6B41C7
Texto
#FFFFFF
Borda
#849787
TIPOGRAFIA DO PRODUTO
Manrope + Barlow Condensed.
Manrope organiza títulos, campos e ações. Barlow Condensed dá expressão às chamadas da marca. O lettering original da logo foi preservado.
COMPONENTES
Mesmas regras entre telas.
Botões, chips, campos com rótulos permanentes, foco, erro, carregamento e navegação usam uma base compartilhada.
LINGUAGEM VISUAL
Fotografia e grafismos.
Fotos da arena identificam o contexto do treino. Faixas inspiradas no símbolo da marca acrescentam ritmo. Os ícones utilizados são Phosphor.
ENCERRAMENTO
Entrega concluída.
Identidade preservada.
Por decisão do cliente, o trabalho foi concluído após a entrega do design. O case apresenta os fluxos, as interfaces e o sistema visual, preservando as informações confidenciais do projeto.
A entrega reúne fluxos, interface, sistema visual e protótipo, conectando a descoberta da arena à organização do treino.