Todo acidente
tem coordenada.
A planta conta o resto.
Calor + focosClique e veja o casoCSV para o relatório
Rolar ↓

via OPTEN AG · Jul 2025

Heatmap de Segurança no Trabalho.

Cliente
via OPTEN AG
Papel
Engenharia frontend
Stack
Angular 17 · TypeScript · SCSS
Período
Jul 2025

Um heatmap de segurança no trabalho para um cliente industrial: incidentes mapeados por zona para que os responsáveis pela segurança vejam onde os acidentes se concentram. Traduzi o design system do Figma em componentes Angular funcionando — botões, modais, formulários reativos com seletor de posição no mapa — fiéis aos tokens e às especificações de interação.

Onde os acidentes se concentram

Um cliente industrial registra incidentes de trabalho, e os registros só importam se um responsável pela segurança conseguir ver um padrão neles. A interface responde a uma pergunta de relance — que zonas estão machucando gente — mapeando incidentes a locais físicos como calor e clusters, para que a intensidade seja lida antes de qualquer número.

Densidade que continua legível

Uma view de mapa densa em dados é fácil de deixar barulhenta e difícil de deixar legível. A escala de calor carrega o sinal com um único matiz, os clusters ganham um contorno explícito em vez de mais uma cor, e a UI em volta fica quieta para que nada compita com o mapa. Aguenta responsivamente — a mesma view funciona num laptop no escritório e num tablet no chão de fábrica.

Arraste o diagrama para o lado para ler

View de calor e clusters — intensidade lida de relance, zonas e números ilustrativos

Um design system, implementado um a um

O design visual chegou como um design system no Figma, e meu trabalho era fidelidade: botões com todo estado especificado, modais, formulários reativos incluindo um seletor de posição no mapa para marcar um incidente com precisão. Tokens e especificações de interação implementados como vieram, não reinterpretados — quando um design system é entregue com esse cuidado, a contribuição útil é disciplina, não opinião.

A parte que os responsáveis pela segurança de fato pediram

Exportação em CSV. O mapa responde onde, mas o reporte vive em planilhas e papelada de regulador, então tirar os dados de volta era requisito de primeira classe, não algo pendurado num menu depois.

Design system implementado um a um: todo estado especificado ligado, exportação em CSV incluída.

Alexander implementou uma view interativa de mapa de calor e clusters — densa em dados, responsiva e fiel ao design visual pretendido.
Noël BossartCEO & cofundador · Noevu GmbH — QA & supervisão técnica