Da planilha solta ao cadastro único

Sistema de gestão escolar desenhado e programado do zero para um centro educacional ligado à SMADS, em São Paulo. Em produção, com dados reais.

Cliente: CEDESP — centro educacional ligado à SMADS
Meu papel: Pesquisa, requisitos, UX/UI e front-end
Stack: React, Firebase (Firestore), Vercel
Situação: Em produção, com dados reais

O problema

Todo mundo digitava o mesmo aluno

Matrícula por formulário genérico, turmas numa planilha, frequência no caderno, notas num terceiro arquivo. O mesmo aluno existia em quatro lugares, com quatro grafias diferentes.

A solução

Um cadastro, três níveis de acesso

O dado do aluno entra uma única vez, na matrícula, e todos os módulos leem dali: turmas, área do educador e painel administrativo. Nada de exportar, colar e conferir.

O resultado

O relatório deixou de ser um mutirão

A secretaria parou de consolidar planilha à mão toda vez que alguém pede um número.

+600 fichas de matrícula processadas pelo sistema

+10 educadores lançando frequência e notas direto na plataforma

1 cadastro substituindo o formulário genérico e as planilhas separadas

Painel administrativo do sistema CEDESP com os números consolidados — Painel administrativo: matrículas, turmas e frequência consolidados sem exportação manual.

Ficha de matrícula pública em etapas, vista no celular — Ficha de matrícula em etapas, pensada para o celular da família.

Módulo de turmas com alocação de alunos e educadores — Módulo de turmas: alocação a partir do cadastro único.

O processo

Como cheguei nesse desenho

Antes de desenhar qualquer tela, acompanhei o fluxo real: quem preenche, quem confere, quem cobra e onde o papel trava. A maior parte das decisões de interface saiu dessa observação, não de referência de dashboard bonito.

Quando o dado é digitado quatro vezes, ele está errado em pelo menos um dos quatro lugares.

Os quatro módulos e o que cada um resolve

Ficha de matrícula pública em etapas. A família preenche do celular, uma pergunta por vez, com validação em cada passo — em vez de um formulário longo que faz desistir no meio.
Módulo de turmas. A coordenação aloca alunos e educadores, com a lista sempre saindo do cadastro da matrícula.
Área do educador. Frequência e notas lançadas direto na tela da turma, sem planilha paralela.
Painel administrativo. Números consolidados prontos: matrículas, turmas ocupadas, frequência.

Por que design system antes de código

Tipografia, paleta e componentes foram definidos antes de programar. Isso parece etapa extra, mas economiza tempo a partir da terceira tela: cada nova funcionalidade sai consistente em vez de improvisada, e a manutenção deixa de exigir decisão nova a cada ajuste.

Para o seu negócio

A dor é a mesma, o rótulo é que muda

Aqui o cadastro se chama matrícula e o registro se chama frequência. Numa clínica seria paciente e consulta; num escritório, cliente e contrato. Se o seu cadastro ainda é impresso, o controle vive numa planilha e o aviso circula por WhatsApp, o problema é este — só com outro nome.

E dá para começar por um módulo só, o que mais dói, crescendo conforme a equipe se adapta.

React Firebase / Firestore Design System Vercel UX Research Mobile first

Além deste case

Outros projetos

Este é o processo levado até o código. O case do Trail Bikers mostra o lado de pesquisa e produto, validado com usuários.

Trail Bikers

App mobile de segurança e comunidade para ciclistas de trilha. Protótipo no Figma, validado com cinco usuários.

UX / Mobile Ver o case

rivaux.com.br

Este site: HTML, CSS e JavaScript puros, animações em GSAP e publicação na Vercel.

Front-end

Formação em tecnologia

Material didático e aulas de criação de páginas web, com mais de 15 anos de sala.

Educação