Estudo de caso 03 · App de reservas

Negativo

O app de reservas de uma academia de escalada inventada no Rio, em que todo estado de reservar e pagar funciona.

Papel: Produto, marca, design e front-end
Data: Novembro de 2026
Stack: React, TypeScript, TanStack Query, Tailwind CSS, Radix, MSW, Cloudflare Pages
Links: Demo ao vivo Código

O problema

Às 17h20 de uma terça, quem escala quer duas respostas: o que ainda dá para reservar hoje à noite, e se tem vaga. Reservar numa academia de verdade tem muitas regras. Uma aula tem 10 vagas e lista de espera. Uma sessão de corda exige antes um teste de segurança na corda (belay check). A primeira visita exige um termo assinado. Cancelar é grátis até 12 horas antes e, depois disso, custa a vaga. O pagamento pode ser com créditos do pacote, Pix ou um cartão que o banco recusa ou pede para confirmar.

O Negativo responde às vagas que pedem um fluxo de produto com todos os estados desenhados, incluindo carregando, vazio, com falha, lotado, na lista de espera, recusado e expirado. Cada um desses estados pode ser aberto e testado na demo.

Veja funcionando

Três coisas para testar:

01
Abra o Movement Lab, que está lotado, e entre na lista de espera. Depois vá em Account, Demo, "A waitlist spot opens", e confirme a vaga antes de a contagem acabar.
02
Troque para a primeira visita em Account, Demo. Reserve o Intro to Bouldering, assine o termo, aplique FIRSTWALL e pague com Pix. A tela do Pix tem um botão que faz o papel do banco.
03
Pague com o cartão final 9995 e digite 000000 como código do banco, ou escolha o cartão final 0002 e veja ele ser recusado.

Como foi feito

Especificação

O produto, as regras de reserva e reembolso, e um nome conferido livre na web e no endereço.

Marca

Três direções lado a lado, uma mantida e refeita duas vezes.

Protótipo

Um fluxo com cada estado atrás de um link, cada tela copiando a composição de um app de reservas real.

Fotos

Fotos gratuitas conferidas atrás de marcas de academia e de patrocinador. Duas foram retocadas, uma foi recortada, e uma foi trocada porque a faixa de patrocínio não saía limpa.

Construção

A stack de produção com uma API simulada, e as regras de reserva sob testes unitários.

Verificação

Cada estado renderizado em 1440 e 390 px com checagem de acessibilidade.

Escala

telas, mais uma página de não encontrado e uma página de erro.

estados verificados em duas larguras, 98 renderizações, cada uma com checagem de acessibilidade.

direções de marca, 2 refações da mantida e 5 layouts de agenda, em 8 rodadas de revisão.

endpoints de API simulados, 4 cartões de demonstração e 7 cenários de demonstração.

ícones e 7 ilustrações desenhados para o produto.

48 min

do início da especificação à especificação aprovada, e depois 1 h 29 min de construção.

O que deu errado e o que eu mudei

A primeira rodada da marca tinha um sistema de cores trabalhado, um conjunto de ícones e uma ilustração de parede de escalada para cada estado. Os apps de academia e de treino que eu estava copiando (Open, Equinox+, Tempo) mostram pessoas na parede, e as minhas telas mostravam desenhos de agarras. Por isso devolvi a rodada.

Tirei os desenhos de todo lugar em que uma foto diz a mesma coisa. Sessões, instrutores, o salão e a confirmação agora usam fotos de pessoas escalando com luz quente, recortadas do jeito que esses apps recortam. As ilustrações ficaram só onde nenhuma foto mostra o momento: uma falha ao carregar, um lugar na lista de espera, um belay check que ainda falta, um termo assinado.

Limites e próximos passos

Pagamentos, Pix, 3-D Secure e os dados da academia são simulados no navegador. Nada é cobrado nem enviado, e não há contas.
A demo roda numa noite fixa, terça, 3 de novembro de 2026, a partir das 17h20, então os prazos e as contagens se leem iguais em toda visita.
O app está só em inglês.