A monitoring portal for a client’s fleet of stationary generators: a live map, generator and device management, a dashboard and reports. A gateway on each generator reports location, fuel, engine and electrical readings. I designed the portal end to end with the product owner and the development squad.
Three fronts
Three statuses per generator (active, connectivity and maintenance), which would mean three badges on every row, marker and card.
User stories that asked for fields the data didn’t have, and described a generic asset form rather than a generator.
A shell shared with an existing fleet-tracking platform, whose new map layout had to stay exclusive to it.
How do we let an operator scan a whole generator fleet and trust what they see, using only the data that actually exists?
Three principles
Show the exception: normal states stay quiet, so problems stand out.
Only real data: every field traces to the data, and when a value doesn’t exist, the screen says so.
The prototype is the spec: a clickable HTML prototype came first, and the Figma file was built to match it on the company design system.
One status per row; exceptions only
① A single status per generator ② Flags appear only where they apply, like Offline
The live map follows the same rule
① Quiet markers for healthy generators ② Exceptions listed on the generator ③ Legend for the four exception states
Where the stories and the data disagreed, the design followed the data, and the gap became a question for the product owner rather than a guess on screen.
Progressive status on the live map
Rows and markers show one status by default. Offline, maintenance required, under maintenance and overdue appear only on the generators they apply to, with connectivity first, because an offline generator’s readings are only the last known.
A generator form, not an asset form
The generic Add asset form became a generator-only form: identity, device, location and specifications. Coordinates are required, and Use device location pulls the chosen gateway’s GPS.
Reports that say when they can’t answer
Reports sit in a list, not a dropdown. Those that need data the gateways don’t record yet say what’s missing, and a period without records shows a no-data state instead of zeros or estimates.
Where it stands
Designed across three sprints and handed off as a clickable prototype plus a matching Figma file on the company design system. It isn’t live yet, so there are no usage results.
Offline means last known
① Offline banner with the last heartbeat ② Readings labelled as the last known record ③ Offline marker on the map
Reports say when they can’t answer
① “Not available yet” instead of an empty report ② The data it needs, named ③ Placeholders, not zeros or estimates
A generator form, not an asset form
① Identity, device, location and specifications ② Coordinates required ③ Use device location pulls the gateway’s GPS
Want the full story?
The full case study goes deeper, with every decision up close, more screens and the reasoning behind them.
