Um recepcionista identificou falhas operacionais reais, ouviu a equipe, e construiu do zero — sem budget, sem TI, sem pedir autorização — um sistema completo de gestão que eliminou perdas, criou visibilidade e começou a mostrar o que acontece quando funcionários engajados são reconhecidos e têm ferramentas à altura do seu empenho.
Contexto do projeto, meu papel e por que ele existe.
Meu papel neste projeto: Fui o único responsável por tudo — identificação do problema, pesquisa com a equipe, definição de escopo, arquitetura da informação, design de interface, desenvolvimento front-end, testes e iterações contínuas. Não há equipe de UX, não há squad de produto. Há um recepcionista que ouviu a equipe, sentiu as mesmas frustrações, e decidiu transformar insatisfação coletiva em solução concreta.
Este projeto nasceu dessa realidade. Não apenas da minha — mas de conversas reais com colegas de recepção, de feedbacks que se repetiam em unidades diferentes, de uma insatisfação comum: funcionários que entregam mais não são visíveis. E o que não é visível, não é valorizado. Construir um sistema que tornasse esse esforço concreto, rastreável e público dentro da equipe foi tanto uma decisão de produto quanto uma decisão humana.
Trabalho na recepção da WPM Pampulha em Belo Horizonte. Sou responsável pelo atendimento de novos alunos, controle de pendências, acompanhamento de NPS e gestão operacional do dia a dia. Paralelamente, curso CST Gestão Comercial na UNINTER e carrego uma visão de liderança humanizada — a crença de que quem está na linha de frente tem os dados mais valiosos.
Em 2024, a realidade operacional era clara: não existia ferramenta adequada para o nível de controle que a função exigia. O que existia eram planilhas fragmentadas, anotações em papel, e informações que se perdiam entre turnos.
Decidi construir a solução. Do zero. No navegador. Sem backend, sem custo de infraestrutura, sem dependência de TI corporativa. O sistema hoje está na v33, com suíte de 90 autotestes, backup JSON, exportação CSV, e 8 módulos operacionais completos.
Por que browser-only?
A escolha não foi limitação técnica — foi decisão de design. Um arquivo HTML que roda em qualquer navegador, sem instalação, sem login, sem servidor, é universalmente acessível pela equipe da unidade. É a solução mais democrática possível para o contexto de uma academia.
O sistema adota as cores oficiais da WPM (#FFC20F e #111111), tipografia Montserrat, e uma linguagem visual densa e executiva — pensada para monitores de recepção em ambiente de alta demanda.
O que estava quebrado antes deste sistema existir.
A operação diária dependia de memória individual, planilhas não padronizadas e comunicação verbal entre turnos. Quando um recepcionista saía, o contexto ia junto. Pendências de alunos se perdiam. Vendas de addons não eram rastreadas com precisão. O NPS era um número que chegava de cima, sem saber quem havia sido citado positivamente.
A escala de professores e recepcionistas existia em papel ou em grupos de WhatsApp — sem registro histórico, sem filtro, sem exportação. Eventos e campanhas eram anotados mentalmente ou em post-its.
O resultado? Retrabalho constante, ruído de comunicação e zero visibilidade gerencial sobre o que de fato acontecia na linha de frente.
"Quais alunos novos deste mês ainda não responderam o aviso de NPS?"
"Quantos addons o Wallace vendeu na terça-feira, categoria Energy?"
"Quem está de plantão na recepção hoje às 16h e houve alguma troca aprovada?"
"Qual é a pendência em aberto há mais tempo e quem é o responsável?"
O problema que nenhuma planilha captura — e que custa mais caro do que parece.
Falta de reconhecimento não é um problema de RH. É um problema de negócio. Quando um funcionário que entrega mais é tratado da mesma forma que um que não se importa, a mensagem implícita é clara: esforço não compensa. E quando essa mensagem se repete por tempo suficiente, ela gera desligamento — primeiro emocional, depois formal.
Desligamentos têm custo direto — processo seletivo, treinamento, adaptação. Mas o custo macro é maior: a equipe fica menor, o esforço se redistribui sobre quem ficou, o desgaste aumenta, a qualidade do atendimento cai, e o gestor absorve tudo isso enquanto tenta manter a operação de pé. Um desligamento pode virar uma bola de neve.
O oposto também é real. Um funcionário reconhecido e motivado, que vê seu nome em destaque — em vendas, em feedbacks positivos — não apenas mantém a entrega: ele eleva o padrão do entorno. O reconhecimento tem efeito cascata positivo do mesmo jeito que a frustração tem efeito cascata negativo.
O raciocínio de escala
A WPM tem mais de 2.000 unidades. Se elevarmos de forma eficiente a entrega e a motivação de apenas 1 funcionário por unidade — esse funcionário vai gerar mais vendas, elevar a própria média, influenciar quem está ao redor. Multiplicado por 2.000 unidades, o impacto é gigantesco. Não como projeção otimista — como consequência lógica de sistemas que tornam o esforço visível.
Se o funcionário vê seu nome diariamente como destaque — líder em vendas, em feedbacks positivos, em presença — isso reforça a continuidade da entrega. Quem aparece abaixo sente a urgência de melhorar. Não por punição: porque os resultados são públicos e todos estão vendo.
Quem entrega mais não tem como provar. Quem entrega menos não sente pressão para mudar. A operação nivela por baixo sem que ninguém perceba.
Frustração acumulada vira pedido de demissão. Cada saída custa tempo, dinheiro e moral da equipe — um efeito cascata que a liderança absorve sozinha.
Não basta elogiar. O funcionário precisa ver — em número, em ranking, em destaque — que o empenho é registrado, público e valorizado. Isso muda comportamento.
O que o sistema precisava ser capaz de fazer — e o que ele deliberadamente não é.
Reunir em um único lugar: alunos novos, pendências, NPS, addons, escala e eventos. Acabar com a fragmentação de informação entre turnos.
Dar ao líder e ao próprio atendente clareza sobre produtividade, feedback positivo, volume de addons e situação das pendências.
Garantir que nada se perde entre sessões. localStorage com backup JSON exportável, snapshot local e importação com sanitização profunda.
Um único arquivo HTML. Sem servidor, sem banco de dados externo, sem instalação. Qualquer computador da recepção consegue abrir.
Aba de Configurações onde nomes de funcionários e categorias de addons são editáveis sem tocar em código. Autonomia operacional real.
Não substitui o sistema oficial WPM. Não é app mobile. Não tem login multi-usuário simultâneo. Decisão consciente de escopo.
Como o problema foi mapeado — com metodologia informal mas sistemática.
Contexto da pesquisa: Não houve laboratório de usabilidade, budget de UX research ou grupo focal. O que houve foi algo potencialmente mais valioso: observação diária de dentro do problema por mais de um ano. Sou simultaneamente pesquisador, designer e usuário primário do sistema.
Usa o sistema durante o turno. Precisa de velocidade: cadastrar um aluno novo em menos de 60 segundos, registrar uma venda de addon em segundos, consultar uma pendência pelo nome. Não tem paciência para fluxos complexos.
Acessa para visão gerencial: qual atendente tem mais feedback positivo, quantos addons foram vendidos, quais pendências estão abertas há mais tempo. Usa Dashboard e exportações CSV.
Usa, testa, itera e valida tudo. O único que acessa Configurações com frequência e que executa os autotestes periódicos para garantir integridade dos dados.
O que a observação revelou sobre como a recepção realmente funciona.
A principal perda de informação acontece na virada de turno. O que o recepcionista anterior fez ou deixou pendente precisa de um repositório vivo — não de comunicação verbal.
Registrar "vendemos 5 addons hoje" não basta. A equipe precisa saber quem vendeu, qual categoria, em que dia — para feedback individual e análise de padrões comerciais.
O NPS é uma ferramenta motivacional subutilizada. Quando o funcionário vê o próprio nome no ranking de citações positivas, o engajamento com qualidade do atendimento muda concretamente.
Pendências sem prazo visível evaporam. A equipe precisa de sinalização clara de urgência — não apenas de uma lista cronológica sem contexto visual.
A escala real é diferente da escala oficial. Trocas, coberturas e feriados acontecem constantemente. O sistema precisa absorver essa dinâmica com naturalidade.
Sem backup, a ferramenta não é confiável. Um bug de localStorage que apague dados destrói a adoção. Segurança de dados é feature de UX, não só de engenharia.
A arquitetura de informação do sistema e as decisões por trás de cada escolha.
| Decisão | Alternativa descartada | Razão da escolha |
|---|---|---|
| Aba única por mês (contexto temporal) | Todos os dados em uma tela só | A recepção opera por períodos mensais. Separar por mês reflete o modelo mental real da equipe e facilita o histórico anual. |
| Modal para cadastros | Formulário em página dedicada | O recepcionista não pode perder o contexto enquanto cadastra. O modal mantém o estado da tela de fundo visível. |
| Kanban de pendências + tabela | Apenas tabela linear | A tabela serve para busca e edição. O kanban (Abertas/Respondidas/Concluídas) serve para visão de status rápida durante o turno. |
| Risk Meter de NPS (visual analógico) | Número puro + texto | A faixa colorida (vermelho → verde) comunica urgência instantaneamente. O número 56 não diz se é bom — a faixa amarela diz. |
| Grid de addons por dia × categoria | Formulário de lançamento individual | O padrão real é lançar ao final do turno. A grid permite edição em massa sem fricção. |
| Escala visual do mês (card por dia) | Tabela apenas | A escala visual imita o quadro físico da unidade, reduzindo a curva de adoção. Familiar = rápido. |
| Identidade WPM (#FFC20F / #111) | Paleta neutra genérica | O sistema é interno à unidade. Usar as cores da marca aumenta legitimidade e sensação de produto profissional. |
| Autotestes rápidos embutidos | Testes externos / manuais | A equipe não é técnica. Os autotestes são não-destrutivos e rodam com um clique, validando backup, exports e integridade sem risco. |
Da v1 à v33 — como o sistema evoluiu através de ciclos reais de uso.
Nota sobre wireframes: Este projeto não passou por wireframes em papel ou Figma antes do desenvolvimento — o primeiro "wireframe" foi a v1 do próprio código HTML. Cada problema real encontrado em uso virou especificação para a próxima versão. Este é um processo honesto de design orientado por fricção real, não por hipóteses de usuário.
33 versões em ~2 anos. Cada versão não é reescrita — é iteração cirúrgica. O que funciona fica. O que causa fricção muda. Este é o ciclo de design mais honesto possível: o usuário final e o designer são a mesma pessoa, e não há espaço para ego — só para eficiência operacional.
Cada módulo — o que faz, por que foi desenhado assim, e o que ele resolve.
A tela inicial é propositalmente densa. 7 KPIs na barra superior (total alunos, feedback médio, % feedback positivo, NPS atual, pendências abertas, próxima escala, próximo evento) dão ao gestor e ao recepcionista uma leitura completa do mês em menos de 5 segundos.
Abaixo, 4 cards de destaque contextual: Top em feedback, líder de addons, urgência operacional e meta NPS. Cada um com barra de progresso — não só um número, mas uma narrativa.
Seção de desempenho por atendente com comparativo vs média: permite identificar quem precisa de apoio e quem merece reconhecimento — sem subjetividade.
O hero da tela com botões de ação rápida (+ Novo atendimento, + Nova pendência) foi posicionado acima do fold de propósito: o fluxo mais frequente deve ter o menor número possível de cliques. 2 cliques para registrar qualquer coisa.
Cada novo aluno matriculado no mês é registrado aqui. A tabela exibe: nome, matrícula, última visita (editável inline), hora, data de início, aviso NPS, atendente, feedback de resposta, addon vendido e observações.
A busca é insensível a acentos — digitar sem acento encontra nomes com acento. Filtros por atendente e tipo de feedback permitem análises segmentadas sem exportar dados.
O modal de cadastro foi projetado para ser completado em menos de 60 segundos, com campos organizados por frequência de uso.
A data/hora da visita é editável diretamente na tabela (input nativo do browser), sem precisar abrir modal de edição para uma correção simples. Reduz um passo crítico para o uso mais frequente de ajuste de horário.
Resolve um problema específico: saber exatamente quem vendeu o quê, em qual dia, em qual categoria. Cada recepcionista tem uma seção com grid de dias × categorias (Energy, Body, Coach), editável por célula.
O total por categoria e o total do mês são calculados automaticamente. Os dados se sincronizam com o Dashboard e com o módulo de alunos novos.
A grid de dias foi inspirada em planilhas físicas que a equipe já conhecia. Familiaridade reduz curva de aprendizado. A inovação está em calcular e agregar automaticamente — o que a planilha de papel nunca fez.
O módulo tem dupla visualização: tabela completa (busca, edição, histórico) + quadro kanban lateral (Abertas / Respondidas / Concluídas). As duas visões mostram os mesmos dados com propósitos diferentes.
O kanban serve para o turno atual: ver rapidamente o que está aberto e urgente. A tabela serve para gestão: filtrar por atendente, buscar um aluno, exportar. Cards com indicador de urgência para pendências prioritárias.
O kanban surgiu de uma fricção real: a tabela era ótima para buscar, mas ruim para "ver o estado geral". O cérebro humano processa posição espacial (esquerda = aberto, direita = feito) mais rápido que lê status em texto.
Duas seções: o Risk Meter interativo (arco SVG colorido com agulha posicionada na faixa atual: vermelho 0–20, laranja 21–40, amarelo 41–60, verde 61–80, verde escuro 81–100) e o Ranking de citações por funcionário.
A pontuação é editável diretamente (campo + slider). Metas mensal e semestral configuráveis. O ranking permite registrar citações positivas com controles +1/-1 — motivando a equipe de forma tangível e mensurável.
O Risk Meter foi a decisão mais ousada de design. Um número 56 não comunica urgência. Uma agulha em zona amarela com meta em verde, visível em 2 segundos, comunica exatamente o que precisa. Design emocional a serviço de dados operacionais.
Exibe professores e recepcionistas por dia com horários, trocas e observações. A Escala Visual do Mês imita o quadro físico da unidade: cada dia é um card com coluna de professores e coluna de recepção.
A Agenda consolidada apresenta os mesmos dados em tabela — útil para exportação CSV. Suporte a trocas aprovadas, coberturas e feriados com destaque visual por cor.
"Duplicar mês anterior" foi adicionado após perceber que 80% da escala de um mês é igual ao anterior. Eliminar trabalho repetitivo é design. Um clique cria uma cópia editável do mês anterior.
Centraliza campanhas, treinamentos, feriados e ações comerciais em calendário visual mensal + agenda em cards. Cada evento tem tipo, data, hora, local, responsável, status e descrição.
Código de cores por tipo (Evento, Ação, Campanha, Treinamento, Feriado). Painel lateral "Próxima Programação" exibe o evento mais próximo com destaque — preparando a equipe para o que vem.
O calendário visual surgiu de um problema concreto: as campanhas chegavam pelo WhatsApp e ninguém sabia o que tinha sido decidido. O calendário não é decoração — é memória organizacional externalizada.
Três seções principais: Equipe e categorias (edição de nomes de funcionários e tipos de addons sem tocar em código), Segurança de dados (Exportar backup, Salvar snapshot local, Restaurar snapshot, Validar sistema) e Cobertura dos períodos (auditoria visual de todos os meses do ano com status Completo/Revisar).
A seção "Como usar" exibe 4 instruções objetivas para novos usuários. O sistema é autoexplicativo por design — nenhum manual externo necessário.
Autotestes rápidos rodam validações não-destrutivas de backup, CSV e reset simulado. Segurança de dados é a feature de UX mais importante do sistema. Uma ferramenta que pode perder dados não será usada com confiança.
Como o sistema foi validado ao longo das 33 versões.
O sistema conta com um arquivo WPM_TestSuite.html separado com 90 casos de teste organizados por módulo, cobrindo: backup/restore JSON, exportação CSV de todas as abas, reset simulado de mês, integridade de vínculos entre módulos, sanitização de dados importados e validação de estrutura de escala.
Testes não-destrutivos — rodam em cópia isolada do estado, sem alterar os dados reais da operação.
Declaração duplicada de const causava crash silencioso na inicialização. Corrigido com linting estruturado.
Overflow do kanban em telas menores ocultava cards sem scroll visível. Corrigido com overflow explícito e altura máxima por coluna.
SVG do Risk Meter sobrepunha texto de faixa em resoluções 1280px. Reposicionamento do label resolveu sem refatorar o componente.
Importação de JSON corrompido sobrescrevia dados válidos. Adicionada sanitização com preservação do backup anterior antes de qualquer import.
| Feedback recebido | Ação tomada |
|---|---|
| "Não sei qual turno registrou o quê" | Campo de atendente obrigatório em todos os cadastros |
| "A escala tabela é difícil de ler rápido" | Criação da Escala Visual (card por dia) |
| "Perdi dados quando o PC travou" | Snapshot local automático + restore com um clique |
| "Nome com acento não aparece quando digito sem acento" | Busca insensível a acentos em todos os campos |
| "Difícil saber se o mês anterior está completo" | Cobertura anual com status visual por período |
Métricas de qualidade técnica
90 casos de teste documentados · 0 dados perdidos desde v21 · 100% de cobertura nas operações críticas · Tempo médio de cadastro de aluno < 60 segundos
O que mudou na operação real após a adoção do sistema.
Este projeto não é uma candidatura à liderança de unidade. É a prova de que consigo identificar problemas operacionais reais, projetar soluções sistemáticas e entregar resultados tangíveis — sem budget, sem equipe, sem aguardar autorização. É a evidência de como penso sobre operação, sobre pessoas e sobre escala.
Quero crescer dentro da WPM. Não apenas gerenciar uma unidade — mas contribuir em níveis onde as decisões impactam muitas unidades, muitas equipes, muitos funcionários que têm exatamente as mesmas frustrações que eu observei aqui. A capacidade de enxergar um problema de dentro, traduzir em solução e executar com consistência é o que separa quem opera de quem transforma.
"Não construí isso para impressionar. Construí porque a operação precisava, porque a equipe merecia melhor, e porque eu sabia como resolver. O que acontece com quem resolve problemas que ninguém pediu para resolver? As pessoas certas percebem."
O que este projeto me ensinou sobre design, produto e liderança.
O sistema está maduro para ir além de uma unidade.
Limitações conscientes que são decisões de escopo, não falhas técnicas.
Se houver suporte institucional, a evolução natural inclui: