Hach Controller — Garvin Lawrence

The screens

Two screens, every state accounted for.

Hero screen with numbered annotation markers, described in the list beside it.

Hero — main view. Hover or focus a note to find it on the screen.

Dual-state instrument cards
Blue for live readings, amber for loading or error. Status is encoded in the card colour, not in text alone.
Alert badge
A count of 3 in a red pill over the bell, top right, so “something needs you” is visible from across the room.
Connectivity dots
Four slots, two active, mirroring the physical probe connections on the instrument itself.
Type that scales
Hubballi for every sensor value (legible at very large sizes), Inter for interface chrome, Jura for badge numerals.
Two-tone status states
Every connectivity and instrument icon has an inactive grey, an active brand blue, an amber loading ring and a red alert.

Loader — splash

The screen the controller opens on while it wakes the instrument up: the brand mark on its own, with nothing to read and nothing to mistake for a reading.

Colour

A palette that carries meaning.

Click any swatch to copy its hex.

Type

Three faces, three jobs.

Large reading

-976

Hubballi 400 · 112pt · tabular numerals

Instrument label

East Basin · Redox MV

Hubballi 400 · 27pt

Time / date

01/23/28 12:33pm

Inter 700 · 16pt · tabular numerals

Alert count

3

Jura 700 · 16pt

Status language

One icon system, four states.

Component states legend: activate, inactivate and loading instrument; Bluetooth inactive and active; cellular data active and inactive; cloud active and inactive; caution or re-agent low; alert needs attention; controller screen lock.

Every icon in the top bar lives in a small set of states. The legend was added to the Figma file as its own pass, covering instrument activation, connectivity and alerts, so the states are named once and reused everywhere.

Inactivemuted grey

Activebrand blue

Loadingamber ring

Alertred

More case studies