How do you help a maintenance technician — standing in front of a control cabinet — see the health of every electronic component in seconds? And ship that as one product many industrial clients can run under their own brand?
Unplanned downtime costs the world's 500 biggest companies an estimated $1.4 trillion a year — about 11% of their revenue.
Source: The True Cost of Downtime, Siemens (2024)
In a large plant, a single failed electronic component can stop a line. Yet maintenance teams often don't know what's installed, where it sits, its lifecycle, or whether it's about to be discontinued. When something breaks at 3 a.m., they're searching, not fixing.
A technician on the shop floor needs to record, scan and check status fast — hands busy, poor signal, offline-first.
The same app had to be sellable to many industrial clients under their own identity, without forking the design.
Halls, lines, cabinets, fields, thousands of parts and obsolescence dates — turned into something scannable.
A fault at 3 a.m.: the technician is at the cabinet, hands busy, signal poor.
Design for the worst moment, not the demo — offline-first, scan-on-the-cabinet.
If it works with a line down and no wifi, it works everywhere else.
Teams couldn't find the right place to record or read a component.
Mirror the physical plant in the IA: hall → line → cabinet → field.
Navigation that matches how you walk the floor removes the translation cost.
Typing part data in the field is slow and error-prone.
QR on the cabinet + guided photo capture per view, with counts.
Capture in a few taps; trust the system to sync the rest later.
The same app had to ship under many client brands without forking.
A token + modes design system; one mode switch re-themes everything.
Onboarding a brand becomes a config change, not a redesign.
The home answers 'what needs attention' before the technician taps anything — counts of registered vs. discontinued parts up top.
Maintenance teams think spatially, so the structure mirrors how they walk a plant. The same hierarchy drives navigation in the app — finding a part needs no translation from screen to floor.
The app's information architecture mirrors the plant, level by level.
Navigation mirrors the physical plant, so finding a part needs no translation from screen to floor.
From a fault to a resolution, the journey had to work offline, fast, and with hands busy.
Capture is guided per view (label, exterior, interior, detail) so nothing's forgotten under pressure.
Above the fold it answers the only two questions in a fault: what is this, and can it fail soon?
Offline isn't a feature here, it's the baseline. A sync state on every folder and photo keeps the system honest about what is — and isn't — backed up.
The answer to “one product, many brands” was a design system built on tokens and modes. Components bind only to semantic tokens; semantic tokens reference a brand layer held as Figma Variables with Modes. Switching a single mode (primary, accent, logo) cascades through the entire app. Onboarding a new client = add a mode, set ~3 brand colors, swap the logo — tints, states, shadows and type all re-derive.
Raw values: grey scale, brand hues, feedback colors.
Surface · Background · Text · Border — reference primitives.
Buttons, rows, badges — bind only to semantic tokens.
Brand layer (Figma Variables + Modes): Mode = Brand A / Brand B. Switching one mode cascades through every tier.
Three tiers. The UI never points at raw hex — it points at semantic tokens, which point at a brand layer that swaps per mode.
Same screen, same components — switching a single mode re-themes everything.
Primitive grey scale (8) — stable across brands; only the brand layer changes per mode.
The app went live on iOS and Android and is used in production by global manufacturers across aerospace, automotive, steel, food & beverage and consumer goods (named clients under NDA). New clients are onboarded by swapping tokens instead of redesigning — the multi-brand system pays off every time a brand is added.
I'd add a visual-regression / token-lint check in CI so a stray hard-coded hex can't silently break a brand mode.
Field photos vary wildly. I'd add lightweight on-device guidance (framing, glare) and measure re-capture rate.
With more time I'd track time-to-capture and offline→sync success in the wild, and feed that back into the flows.
Anonymized case — real work, no client/customer/product names. Screens are shown blurred for confidentiality.