Plataforma de personal training — três perfis, 700 frames
Uma especificação de cliente com mais de 500 páginas virada em um produto coerente.
Uma plataforma de personal training de três perfis — treinador, aluno e um back office administrativo — que codifica metodologia real de treinamento de força e condicionamento, não uma lista genérica de exercícios. Transformei uma especificação de cliente com mais de 500 páginas num produto coerente de 700 frames em três superfícies de perfil e três protótipos conectados, sobre um design system de 448 componentes e 60 conjuntos de variantes feito sem kit de terceiros e com doze papéis de cor nomeados semanticamente. Foi aprovado e entregue ao desenvolvimento; o build não foi concluído, então nada aqui afirma que foi lançado.
- Função
- Sole product designer
- Período
- mar. de 2024 – dez. de 2024
- Stack
- Figma
- Evidência
- Arquivo de design
Designer de produto solo traduzindo uma especificação técnica de mais de 500 páginas de um professor de educação física da Universidade de São Paulo (USP) em uma plataforma de 700 frames com três perfis (Personal, Aluno, Admin). Construiu o único design system do zero de todo o portfólio da Sagitta (448 componentes, 60 conjuntos de variantes, 12 estilos de cor nomeados semanticamente e elevação Shadow Cards, com zero Untitled UI), além de 119 telas manuais desdobradas em altura total para handoff em Telas do Protótipo.
Atuação na agência Sagitta ao longo de oito meses de entrega contínua (março a dezembro de 2024). O cliente, personal trainer e professor de Educação Física da Universidade de São Paulo (USP), forneceu diretrizes minuciosas cobrindo triagem médica PAR-Q, periodização avançada (GVT, Rest-Pause, Drop Sets, RIR) e avaliação física comparativa por foto e vídeo. Juan liderou todo o produto, protótipos e style system sozinho; a landing page de marketing foi executada separadamente por João Chagas.
Traduzindo 500 páginas de ciência esportiva em uma plataforma de 3 perfis
- 700
- telas desenhadas entre os perfis de personal, aluno e admin
- 448
- componentes autorais feitos do zero sem kits prontos
- 500+
- páginas de especificação técnica de educação física traduzidas
- 119
- telas completas desdobradas manualmente em Telas do Protótipo para o dev
Plataformas para personal trainers frequentemente se resumem a listas genéricas de exercícios e cronômetros básicos. Em contrapartida, o Pro Personal foi encomendado por um professor e pesquisador de Educação Física da Universidade de São Paulo (USP), que entregou uma especificação exaustiva de mais de 500 páginas detalhando triagem clínica, ciclos de periodização e adaptações a fadiga neuromuscular. Minha responsabilidade foi absorver esse corpo técnico denso e estruturar um ecossistema digital intuitivo sem diluir o rigor da fisiologia do exercício.
Modelagem de domínio: periodização, triagem clínica e fadiga adaptativa
A plataforma estrutura fluxos de trabalho específicos para três perfis (Personal, Aluno, Admin) com mecânicas avançadas de domínio:
- Triagem Médica PAR-Q com Gestão Administrativa — Modelagem completa do questionário de prontidão para atividade física com visualização para o treinador (visualiza-sim / visualiza-não) e painel administrativo para criar, editar ou desativar perguntas clínicas.
- Questionários Pré e Pós-Treino em 12 Etapas — Checagens diárias em múltiplos passos (Questionário pré treino 1–12 e pós treino 1–5.2) avaliando qualidade do sono, dor muscular percebida e disposição mental antes do início da sessão.
- Lógica de Fadiga Adaptativa — Arquitetura de 11 telas de alerta (DiaCansado/AVISO) que intercepta dinamicamente a rotina do atleta quando níveis elevados de cansaço são reportados, sugerindo ajustes de carga ou treinos regenerativos.
- Interface para Periodização Avançada de Força — Componentização e geração de treinos dedicados para 11 metodologias: Drop Set (DS), German Volume Training (GVT), Rest-Pause (RP), Repetições em Reserva (RIR), Séries em Bloco (CS) e protocolos 3/7.
- Avaliação Física e Comparativo Corporal — Acompanhamento físico multiangular com comparação de fotos lado a lado (Comparação de fotos), upload de vídeos de execução (input_uploadvídeo) e relatórios comentados pelo personal.
- Ciclo Completo de Assinaturas no Brasil — Fluxo de pagamento com Cartão de Crédito, Pix e Boleto bancário, associado à gestão de assinaturas ativas, upgrade de planos e fluxos explícitos de cancelamento.
Zero primitivos terceirizados: um sistema de 448 componentes construído do zero
O Pro Personal é o único projeto em todo o acervo da agência Sagitta desenvolvido 100% do zero, sem nenhum uso de Untitled UI ou templates importados. Ao longo de 448 componentes (388 variantes em 60 conjuntos de componentes base), cada elemento foi criado em português com terminologia do domínio: Timer Circle, input_uploadvídeo, OpçõesSelect, buttonSave e Estado=Ativo, Tipo=Notificação. O arquivo define 12 estilos de cor com nomes semânticos (Purple 1–4 Primary, Black Primary, Grey Primary, Background #FAFAFA, stroke #EBEBEB) e o estilo de elevação Shadow Cards, estruturados em uma página dedicada de Style Guide com 61 pranchas.
Empatia técnica na prática: as 119 telas de Telas do Protótipo
Para garantir a navegabilidade do protótipo em ~50 seções funcionais, criei uma camada dedicada de componentes de prototipagem (NavBarProtótipo, MenuNavBarProtótipo, NavItemProtótipo, BottomMenuProtótipo) e distribuí cerca de 20 notas adesivas com especificações técnicas diretamente nas pranchas. Quando o desenvolvedor sinalizou que o viewport fixo do Figma dificultava inspecionar layouts verticais longos, dupliquei e abri manualmente todas as 119 telas em altura total em uma página separada chamada Telas do Protótipo. Isso removeu qualquer atrito de inspeção para a engenharia, evidenciando compromisso real com a entrega do desenvolvedor.
Passei dois anos desenhando produtos que nunca foram ao ar porque os builds no-code não conseguiam executá-los. O Pro Personal foi aprovado e elogiado pelo cliente, mas a engenharia travou. Essa frustração foi a razão exata pela qual aprendi a programar: hoje entrego designs que eu mesmo consigo implementar.
O catalisador para a engenharia de design full-stack
O Pro Personal representa o ápice de profundidade de UX e rigor de UI do meu período inicial em agência, e seu desfecho moldou minha trajetória profissional. Ver um cliente celebrar uma plataforma aprovada de 700 frames e assistir a engenharia no-code falhar na implementação provou que o design visual sem domínio de código deixa o produto vulnerável. Este projeto foi o estopim da minha transição para design engineering, garantindo que especificações complexas sejam sustentadas por código robusto em produção.
Evidência
Aprovado formalmente na validação com o cliente em 08/11/2024 com forte reconhecimento pela clareza de interface e fidelidade metodológica ao longo de sete reuniões gravadas. O projeto foi entregue ao time técnico, mas limitações na implementação no-code em Bubble travaram a entrega e impediram o lançamento público. A frustração de ver um design system aprovado de 700 frames não alcançar produção tornou-se o catalisador decisivo para a transição de Juan para a engenharia de design full-stack.