Como usei IA para prototipar três contextos de interação e investigar o lançamento de frequência no ATHLETTO.
ATHLETTO · 3 min de leitura
Product DesignDesign EngineeringPrototipaçãoIATestes com usuários
ProjetoATHLETTO · gestão de equipes esportivas
PerguntaOnde e quando registrar frequência
Método3 protótipos interativos com IA
DecisãoEntrada dedicada ao registro
AthlettoPlano Elite
Painel
Atletas
Turmas
Frequência
Calendário
Cobranças
Ajustes
Suporte
Convide e ganhe
Painel adminSUPER
ericxluzz.dsgGestor principal
BerserkersBuscar atletas, turmas, ações...Ctrl K9+ericxluzz.dsgGestor principal
FrequênciaRegistre presença, analise histórico e atue sobre evasões
RegistrarHistóricoRankingAlertas de evasão
VoltarSub-1709/10/202609/10/2026
●5 presentes●0 faltas●0 pendentes✓ Todos presentes
BRBernardo RibeiroGoleiroPresenteFalta
GAGustavo Henrique AlvesZagueiroPresenteFalta
TRTheo Martins RochaLateralPresenteFalta
PDPedro Augusto DiasVolantePresenteFalta
HNHeitor NascimentoMeio-campoPresenteFalta
● 5 alterações sem salvarSalvar frequência
A chamada da turma no ATHLETTO: a funcionalidade já existia; o que estava em avaliação era como acessá-la dentro da jornada.
01Contexto
A funcionalidade estava pronta. A decisão de uso, não.
O ATHLETTO apoia a gestão de escolinhas, clubes e equipes esportivas. Conversando com três organizações de modalidades diferentes (futebol, flag football e basquete), o lançamento de frequência apareceu como parte relevante da rotina.
Eu já tinha desenhado a experiência de registro, com seus estados e microinterações: presença, falta e justificativa. A solução visual estava aprovada. O que faltava decidir era por onde e em que momento o treinador chegaria até ela.
A perguntaQuando o registro de frequência deve aparecer, e o que o usuário entende que está prestes a fazer?Não era uma questão de visual. Era uma questão de contexto de uso.
02Hipóteses
Três caminhos para o mesmo registro
A mesma funcionalidade, em três contextos de acesso diferentes. Não eram três designs, eram três momentos possíveis dentro da jornada.
ACalendário da turma
O gestor abre o calendário, seleciona a atividade agendada e lança a frequência a partir do evento.
Princípio: Registro vinculado ao evento e à turma.Questão de uso: Contextualiza bem a ação, mas como se encaixa na rotina diária?
Sub-15Segunda, 5 de outubro · 18:00 – 19:30GERADO DA TURMA
Categoria de base, sub-15TURMAS VINCULADASSub-15PARTICIPANTES · 6
DODavi Lucca OliveiraAtacantevia turma
EFEnzo Gabriel FerreiraVolantevia turma
JSJoão Pedro SilvaGoleirovia turma
LSLucas Almeida SouzaZagueirovia turma
FecharRegistrar frequência
BAgenda do dia, no mobile
A agenda do dia aparece na tela inicial e o treinador entra no registro direto pela atividade.
Princípio: Menos etapas para uma tarefa recorrente.Risco levantado: Consultar um compromisso e iniciar o registro ficavam próximos demais.
9:41●●▮
Sábado, 21 de junhoOlá, Eric
Agenda de hojeVer tudo
07:30
Reforço físicoAcademia · 1h
18:00
Treino táticoCampo 2 · 1h30
Registrar frequência →
CAmbiente dedicado
O treinador entra explicitamente na área de frequência para fazer a chamada da turma, no começo ou no fim da aula.
Princípio: Intenção clara: consultar e registrar são ações separadas.Na avaliação: Foi a alternativa mais bem recebida pelos participantes.
FrequênciaRegistre presença, analise histórico e atue sobre evasões
RegistrarHistóricoRankingAlertas de evasão
TREINOS HOJE1
PENDENTES1
REGISTRADAS0
Chamada de hoje · 09/10/2026Quinta
Sub-17PENDENTE
19:00 – 20:30 · 5 atletasRegistrar agora
Registrar outra data ou turma
Selecione uma turma...09/10/2026Abrir
03Prototipação
Protótipos rápidos, critérios de design preservados
Eu não parti de uma tela em branco. A funcionalidade e o Design System já estavam estruturados no Figma. Usei esse material como referência no Claude e, com vários prompts e refinamentos, representei os três contextos como fluxos interativos de alta fidelidade.
Execução
3contextos prototipados60–90 minde trabalho, segundo minha estimativa
Houve bastante iteração. A velocidade foi útil porque tornou viável colocar as hipóteses em funcionamento, não porque substituiu o design.
04Avaliação
De “qual é mais rápido?” para “qual é mais seguro de usar?”
Compartilhei os links dos protótipos com as organizações, que usaram as três alternativas nos próprios aparelhos.
01Agenda do diaRápida, mas com risco de registro sem querer ao só consultar
02CalendárioBem contextualizado, mais distante da rotina diária
03Ambiente dedicadoMais intenção e previsibilidade na hora da chamada
Foi uma avaliação exploratória e qualitativa de protótipos interativos. Não apresento os comentários como medição de usabilidade.
05Decisão
Menos cliques não era o único critério
O acesso pela agenda reduzia etapas, mas a ação explícita de entrar no registro evitava registros por engano. Naquele contexto, clareza e prevenção de erros pesaram mais que a redução do percurso.
“Não se tratava de complicar a tarefa, e sim de deixar evidente quando o treinador estava consultando e quando estava registrando.”
06Aprendizado
A tecnologia acelerou o experimento. A escuta orientou a decisão.
FechamentoPrototipar mais rápido não é o mesmo que decidir melhor.A IA transformou hipóteses em fluxos navegáveis rapidamente, mas foi a interação com os participantes que revelou a importância da intenção explícita. A melhor experiência nem sempre elimina mais etapas: é a que torna a ação adequada ao contexto, compreensível e confiável.
Desenhado e codado por mim, de ponta a ponta, num processo de Design Engineering: design, interface e animações em Next.js, TypeScript e Tailwind CSS, publicado na Vercel.