Digital Reports
O Digital Reports é a plataforma de relatórios de batelada da NETZSCH pra moagem e dispersão industrial. Redesenhei os módulos centrais de lowfi pra hi-fi no Figma e depois reconstruí o produto como um protótipo funcional em código que hoje anda à frente do roadmap de produção: planejamento de disponibilidade, ranking de máquinas, um editor de batelada completo, exportações.
- 36
- Frames de lowfi → hi-fi
- 32
- Tarefas do Jira entregues
- 8+
- Telas do protótipo
Desafio
O produto funcionava, mas a UX tinha crescido módulo por módulo sem uma linguagem comum. O Registry (a tabela central de bateladas) ainda estava em lowfi. A timeline diária do dashboard usava os tokens de status pastel do design system, e o cliente rejeitou de cara: numa parede de fábrica você não distingue um alarme de uma parada de manutenção numa cor lavada. O Settings tinha sete abas em dezessete frames sem uma moldura consistente.
Tinha também uma restrição física que ninguém tinha considerado no design: os stakeholders validam esse produto num monitor de sala de controle de 50 polegadas, onde um layout limitado a 1280px flutua como uma tirinha pequena no meio da tela.
Abordagem
Duas frentes. No Figma, apliquei a moldura compartilhada do design system (header, sidebar, sub-header, fileiras de abas) em todos os 36 frames de lowfi com um script rodado pelo plugin do Figma, salvando primeiro os overlays de pop-up de cada frame pra que a troca da moldura não os apagasse. Pra timeline, larguei as cores pastel e cravei cores de status saturadas na mão até o design system ganhar as próprias, porque o cliente tinha razão.
No código, reconstruí o produto como um protótipo funcional (React, TypeScript, Tailwind 4) com o título de trabalho Batch Book, com cada pedaço de dado atrás de um único arquivo que eu podia trocar. Esse protótipo virou o campo de provas: planejamento de disponibilidade com um calendário de heatmap e um assistente em linguagem simples, ranking de máquinas, um editor de batelada com uma navegação de seção flutuante, exportação em PDF/CSV/XLSX, e escala fluida pra que o layout leia corretamente de um laptop até o monitor de parede de 50 polegadas.
Resultado
O protótipo está no ar na Vercel e é como a squad valida decisões agora: os stakeholders clicam por interações reais em vez de imaginá-las a partir de frames estáticos. Os 36 frames em hi-fi vivem no arquivo de produção do Figma, e uma auditoria WCAG transformou as reclamações de contraste em quatro correções de token específicas, levando a nota projetada de 68 a 92.
A camada de mock está a um arquivo de distância da API real, que era justamente o ponto: tudo o que o protótipo prova é diretamente construível.
Pra quem eu desenhei
Coordenadores de produção em plantas químicas, farmacêuticas, de alimentos e de mineração, revisando registros de batelada pra responder uma pergunta rápido: esta batelada rodou limpa e, se não, pra onde foi o tempo.
Os gestores deles leem os mesmos dados à distância de parede. Foi daí que veio a decisão de cor: uma timeline diária no estilo Evocon, uma linha por dia, blocos de status hora a hora em verde, vermelho, azul e âmbar saturados. Os tokens pastel do design system servem pra badges à distância de laptop e são inúteis a cinco metros. Mantive os pastel na moldura e cravei o conjunto saturado no status, e sinalizei o buraco como um pedido de token pro DS.
A decisão-chave: prototipar em código, não em slides
Os frames do Figma respondiam como as telas se parecem. Não conseguiam responder se os filtros funcionam bem no uso, se o heatmap do calendário de planejamento se lê num relance, ou o que acontece com o layout no monitor de 50 polegadas. Então reconstruí o produto como código rodando e movi as perguntas em aberto pra lá.
O protótipo cresceu pra além do briefing de um jeito útil. O planejamento de disponibilidade (escalas de trabalho, tratamento de feriados, um calendário de heatmap, um assistente em linguagem simples baseado em regras) saiu ali primeiro, validado com os stakeholders, e agora define o spec em vez de seguir um. Toda interação é persistida, todo gráfico é SVG de verdade em cima de dados mock determinísticos, e trocar o serviço de mock pela API de produção é uma mudança de um arquivo.
O que não foi bem
Trabalhei a partir de uma nota desatualizada que dizia que a fonte do corpo era Montserrat. É Poppins. Perceber isso tarde significou reverificar a tipografia em frames que eu já tinha dado como prontos, que é exatamente o tipo de retrabalho que uma checagem de cinco minutos teria evitado.
As cores de status cravadas na mão são um paliativo, não uma solução. Elas consertam a timeline lavada hoje e criam risco de descolamento amanhã; o conserto de verdade são tokens de status saturados no design system, e até isso chegar, essa é uma dívida com o meu nome nela. E o acabamento do protótipo corta pros dois lados: valida decisões rápido, mas parece tanto um produto acabado que gerenciar a expectativa sobre o que de fato está ligado a dado real virou parte do trabalho.
Telas selecionadas
" A auditoria WCAG deixou visível o que as revisões de design não paravam de deixar passar: o teal primário reprova no contraste sobre branco, e o conserto é uma decisão de token, não cosmética. Um 68/100 é uma alavanca que força a ação. Número é mais difícil de adiar do que opinião de design. "
Customer Portal
→Portal self-service pra clientes industriais: máquinas, peças de reposição, contratos e um assistente com IA. 110+ frames, 12 fluxos, 4 papéis.