Meet360: Plataforma de consultoria de frota
Um template administrativo que precisava virar produto. Do diagnóstico ao fluxo: telas em moldura e decisões como prova. Produto premium entregue no handoff para a engenharia.
- Design System
- Protótipo funcional
- WCAG AA
- IA no fluxo
O Meet360 é o sistema interno de customer success da Track7: telemetria de frota e dado de sensor embarcado virando decisão de gestão. O front rodava num template Material UI cru: nav confusa, hierarquia perdida, ~20 modais inconsistentes. Dado caro, leitura difícil.
O escopo não era remendar. Era substituir o front MUI inteiro por um produto premium, navegável e pronto pro dev integrar com o backend Postgres na AWS. Cliente recorrente, escopo fechado de ponta a ponta.
O gestor abre o painel
e já sabe onde agir.
Cada tela responde uma pergunta de gestão num relance: como a frota tá indo, quem precisa de atenção, o que fazer hoje. Hierarquia clara, dado de sensor legível, tema escuro pra leitura longa sem cansar.
Os ~20 modais inconsistentes viraram 4 padrões reutilizáveis. Os 4 dropdowns sobrepostos viraram uma sidebar com grupos lógicos.
Tudo num design system próprio (tokens + 20+ componentes), entregue como protótipo funcional (filtros filtram, CRUD mexe no estado), pronto pro dev plugar no backend.
Cada card abre com o número e a tendência (eventos/km 1.32 ↘, engajamento 81% ↗). A resposta vem antes do gráfico: o gestor lê a direção da frota num relance, a curva só confirma.
O mesmo dado,
outra leitura.
O template empilhava tudo no mesmo peso, num tema claro genérico. No redesenho, o que importa sobe pro topo e o dado fica legível.
Antes, lista plana em tema claro, tudo no mesmo peso. Depois, os números de gestão sobem como cards no topo e o tema escuro segura a leitura longa.
Do diagnóstico ao
handoff, em quatro passos.
Double diamond adaptado ao prazo: descobrir o que dói, definir os padrões, desenvolver o sistema, entregar pronto pro dev.
Diagnóstico em 6 camadas
Auditoria de UX no produto do cliente: fluxo, navegação, densidade, estados, consistência, acessibilidade.
Inventário e padronização
Mapeei o produto inteiro e juntei o que se sobrepunha.
Design system + protótipo funcional
A interface navega de ponta a ponta, com estado real.
Auditoria e handoff
Entregue pronto pra plugar no backend Postgres/AWS, sem adivinhação de formato.
Sete telas,
um sistema só.
Login, dashboard, performance, projetos, detalhe, tarefas e agenda, todas no mesmo sistema visual.
Pronto pro dev plugar.
Contrato de dados em TypeScript e handoff documentado. Performance e acessibilidade medidas (Lighthouse e WCAG).
O protótipo
está no ar.
Navegável de ponta a ponta, com dados de exemplo: os filtros filtram e o cadastro muda o estado.
Pipeline com IA, decisão comigo
Todas as telas e o design system foram construídos por mim dirigindo Claude Code. UX no comando, IA na execução. Foi assim que entreguei o produto inteiro, ponta a ponta.
Diagnóstico heurístico a partir do produto do cliente, não entrevista com usuário final. A validação foi técnica (WCAG e Lighthouse), não teste de usabilidade com participantes. O protótipo é funcional client-side com dados mock, entregue pro dev integrar com o backend real.