Every accident
has coordinates.
The floor plan tells the rest.
Heat + cluster viewClick for the storyCSV for the paperwork
Scroll ↓

via OPTEN AG · Jul 2025

Workplace Safety Heatmap.

Client
via OPTEN AG
Role
Frontend engineering
Stack
Angular 17 · TypeScript · SCSS
Timeline
Jul 2025

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

Heat and cluster view — intensity read at a glance, zones and figures illustrative

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.
Noël BossartCEO & Co-Founder · Noevu GmbH — QA & technical oversight