Case study · Client work
Industrial IoT
ProAxion puts wireless sensors on factory equipment to catch failing machines before they stop a line. I designed the features a technician uses at the machine: scanning a device's QR label, pairing it to a sensor or gateway, reading its alerts and auditing it. I also refined the icons that place every device in a plant.
The problem
A sticker, a sensor and a lot of guesswork
Every ProAxion sensor and gateway ships with a printed QR label. In a plant, a technician mounts the sensor on a motor or bearing, and the label has to be tied to the right device and the right spot on the floor. Until that link exists, the data coming off the machine has nowhere to go.
The people doing this work stand next to loud equipment with a phone in one hand. They need to know in a second whether a device is new, already paired or reporting a problem, and they shouldn't have to type MAC addresses.
Device association
One scan, three possible states
Scanning a label opens the phone's camera, then lands on a screen built around the device's state. The label card stays pinned at the top, so the technician always knows which device they're holding.
- Unassigned. A yellow card explains that the label isn't paired yet and offers two clear actions: assign a gateway or assign a sensor.
- Pick from live data. Nearby devices are listed by MAC address with their heartbeats, boots and uptime for the last 24 hours, tinted green or red, so the healthy one stands out.
- Confirm the pair. The MAC address and the label sit side by side before anything is saved.
- Assigned. The screen becomes the device's detail view: where it lives in the plant, its recent telemetry and its active alarms.
Alerts and audits
Warnings that say what to do next
A sensor can report rising vibration, rising temperature or a lost signal. Each alert pairs a severity with an action: a yellow warning says to monitor and inspect soon, and a red alert says to inspect now. Every card has its own icon, a time stamp and one plain sentence, so a technician can read it on the move.
From there, Audit Device opens a short form: mark the device end of life, correct where it sits in the plant, and add photos of the installation. Edits go out for approval instead of changing the record directly, and an audit history shows who submitted what.
Icon design
Icons for two ways of finding a machine
Every device lives in two hierarchies. The entity hierarchy follows the business: customer, plant, line, machine, component. The physical hierarchy follows the building: plant, building, floor, area, location. Both appear everywhere, in breadcrumbs, the sidebar tree and the device cards, so each level needed an icon you can tell apart at a glance.
Where a Font Awesome icon already said the right thing, like plant and building, I started from it. The rest I drew for this product: a conveyor for a line, paired gears for a machine, steps for a floor. Then I refined the whole set to share one stroke weight, rounded ends and the same visual size, so a custom icon never looks like it came from a different family.
Admin dashboard
The back office that keeps it all in sync
The same devices are managed from a desktop dashboard. A customer, plant and line tree in the sidebar filters every page, and the breadcrumb at the top always shows where you are.
- Sensors and gateways live in tables with filters, column controls and CSV or Excel export. Long location paths truncate, with a tooltip for the full name.
- Ship to Customer lets the team scan labels or type them in, then add customer, plant, date and tracking before shipping.
- Publish pushes sensor and gateway settings to the field. Because it restarts the application, the Publish button stays off until you tick a box acknowledging that.
Process
Reviewed in the open, in Figma
I worked inside a small team: a product lead, another designer and the front-end engineers building the screens. Most reviews happened as comments on the Figma file, which kept every decision next to the screen it changed.
- Engineers flagged input fields with slightly different heights, so every field moved to one size.
- The collapsed and expanded sidebar had to line up to the pixel, which shaped how the menu icons were spaced.
- The background moved from a blue-gray to a near-black, giving the status colors more contrast.
- When two versions of a screen existed, the team chose one and removed the rest, so the file stayed the single source of truth.
What's next
Things to improve
- Status beyond color. Healthy and failing gateways are told apart mostly by green and red. An icon or a word next to each number would make the picker work for people with color blindness and under harsh factory lighting.
- A light theme for the floor. The dark interface suits the office, but a bright plant washes out a dark phone screen. A high-contrast light mode for the mobile flows would help.
- Scanning without a signal. Plants have dead zones. The association flow assumes a connection, and it should save a pairing and sync it later instead of failing.
- Sharper alert copy. The warning and alert versions of each alarm read almost the same. Naming the reading, such as how hot or how much vibration, would tell a technician how urgent it really is.
Available for work