has coordinates.
The floor plan tells the rest.
via OPTEN AG · Jul 2025
Workplace Safety Heatmap.
A workplace-safety heatmap for an industrial client: incidents mapped by zone so safety leads see where accidents cluster. I translated the Figma design system into working Angular components — buttons, modals, reactive forms with a map position picker — faithful to tokens and interaction specs.
Where accidents cluster
An industrial client records workplace incidents, and the records only matter if a safety lead can see a pattern in them. The interface answers one question at a glance — which zones are hurting people — by mapping incidents to physical locations as heat and clusters, so the intensity is read before any number is.
Density that stays legible
A data-dense map view is easy to make loud and hard to make readable. The heat scale carries the signal with a single hue, clusters get an explicit boundary rather than another colour, and the surrounding UI stays quiet so nothing competes with the map. It holds up responsively — the same view works on a laptop in an office and a tablet on the floor.
Drag the diagram sideways to read it
A design system, implemented one-to-one
The visual design arrived as a Figma design system, and my job was fidelity: buttons with every specified state, modals, reactive forms including a map position picker for placing an incident precisely. Tokens and interaction specs implemented as given, not reinterpreted — when a design system is delivered that carefully, the useful contribution is discipline, not opinion.
The part safety leads actually asked for
CSV export. The map answers where, but the reporting lives in spreadsheets and regulator paperwork, so getting the data back out was a first-class requirement rather than an afterthought bolted to a menu.
Design system implemented one-to-one: every specified state wired, CSV export included.
Alexander implemented an interactive heat- and cluster-map view — data-dense, responsive, and faithful to the intended visual design.