tem coordenada.
A planta conta o resto.
via OPTEN AG · Jul 2025
Heatmap de Segurança no Trabalho.
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
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.