CASE STUDY 01 IOT · PREDICTIVE MONITORING

Industrial Datacentre IoT Fleet & Predictive Equipment Monitoring

Thousands of mechanical and electrical assets, and far too many alerts that nobody could act on. That was a large problem, and it was costing real downtime. I led the UX to solve it: one home page that shows the health of the whole fleet and raises the alerts that matter before they become failures.

badgeROLE
Principal Designer

Led UX strategy, design, and the team.

scheduleDURATION
1 year

From discovery to design handoff.

warningCHALLENGE
Alert fatigue

Raw telemetry and false alarms hid real risk.

trending_downOUTCOME
−28% downtime

Across 12 sites, with 50% fewer false alerts.

The monitoring platform across desktop, tablet, and mobile
One platform, every screen: the monitoring home page on desktop, tablet, and mobile
SECTION 01 · OVERVIEW

What the platform does

The problem was big. Engineers were responsible for thousands of assets across several sites, and their tools buried them in raw telemetry and false alarms, so real faults were missed and unplanned downtime followed. I led the UX work to turn that noise into decisions.

This case study covers the IoT fleet and predictive monitoring platform I designed. It replaces raw telemetry with a clear view of fleet health, prioritised alerts, and guided next steps.

hub

Scope

Thousands of mechanical and electrical assets across many sites.

insights

Approach

Show health and risk first, and let users drill down on demand.

SECTION 02 · THE BUSINESS CHALLENGE

Too much data, too few decisions

Legacy monitoring tools flooded users with raw sensor readings and false alarms. Alert fatigue set in, and the alerts that mattered were easy to miss. The result was costly, unplanned machinery downtime.

notifications_off

Alert fatigue

Too many notifications, so engineers started to ignore them.

show_chart

Raw telemetry

Voltage and sensor charts that needed interpretation before any action.

error

False positives

Maintenance notifications that were not real faults.

power_off

Unplanned downtime

Failures that could have been caught earlier.

SECTION 03 · INFORMATION ARCHITECTURE

A progressive zoom from fleet to single asset

I designed a four-level navigation model. Users move from the global overview to a plant, then to a production line or room, and finally to one piece of equipment, without losing their place.

1
Global fleet health
Thousands of assets summarised on the home page, with alerts first.
2
Site heatmap
Filter by critical status to see where the risk sits on each site.
3
Floor or line view
Racks, rooms, or production lines shown as a spatial plan.
4
Single asset diagnostic
The asset, its readings, its status, and a recommended action.
Level 1 and 2: the system overview, with alerts and reliability on one screen
Level 1 and 2: the system overview, with alerts and reliability on one screen
Level 3: the room plan, with status colour on every rack
Level 3: the room plan, with status colour on every rack
SECTION 04 · STRATEGIC DISPLAY

Showing thousands of assets without overload

The hardest part was showing a very large number of assets on one screen. I grouped assets into dynamic clusters and surfaced only those that needed attention. The rest stayed visible but quiet.

grid_view

Clustered heatmaps

Assets are grouped by site and system, so the whole fleet fits on one screen.

priority_high

Only what matters rises

Critical and warning assets are coloured and placed at the top of each list.

notifications_active

Alerts on the home page

Upcoming alerts appear on the home page, so users notice them before they escalate.

Asset information: maintenance, status, and severity for one asset
Asset information: maintenance, status, and severity for one asset
Electrical single-line diagram with breaker and power status
Electrical single-line diagram with breaker and power status
SECTION 05 · ALERT PRIORITISATION

Anomalies, not raw numbers

Raw readings were grouped into anomaly categories: temperature, humidity, load and capacity, and reliability. Each alert names the likely cause, so engineers see the problem before they open the data.

thermostat

Thermal

Temperature drift on cooling units and return air.

water_drop

Humidity

Humidity out of range at the front and rear of racks.

bolt

Load

Capacity used against capacity remaining, per rack and per system.

build

Reliability

Equipment reliability scores that fall over time.

SECTION 06 · HUMAN–AI INTERACTION

Predictions with confidence, and a clear next step

Predictive failure models feed the telemetry panel. Each prediction carries a confidence score and a direct link to order the replacement part.

EXAMPLE PREDICTION

“88% probability of bearing failure within 72 hours.”

The engineer sees the risk, the time window, and the recommended action in one place, then orders the part directly from the same screen.

SECTION 07 · SINGLE ASSET DIAGNOSTIC

One piece of equipment, fully explained

The diagnostic view puts utilisation, equipment status, temperatures, and the equipment diagram together. An engineer can see why an asset is flagged without switching screens.

Equipment diagnostic: utilisation, status, and equipment diagram
Equipment diagnostic: utilisation, status, and the equipment diagram in one view
SECTION 08 · HIGH-DENSITY TELEMETRY

Charts that stay fast with lots of data

I designed custom interactive line charts that render multi-frequency sensor data smoothly. Engineers can zoom into a time window without the browser slowing down.

monitoring

Multi-frequency data

Several sensor feeds on one chart, kept readable.

zoom_in

Zoom and compare

Drill into a time window and compare two assets side by side.

speed

Stays responsive

Built to avoid performance loss on large data sets.

SECTION 09 · BUSINESS AND USABILITY IMPACT

What changed

The platform was rolled out across twelve sites. The measures below are the ones tracked after launch.

trending_down
−28%

Critical asset downtime reduced across 12 manufacturing sites.

notifications_off
−50%

Fewer false-positive maintenance notifications.

schedule
12 hrs / week

Engineering time saved on manual inspection checks.

bolt
40% faster

Predictive warnings resolved by junior technicians with guided steps.

SECTION 10 · RAPID HANDOFF

Guided repair steps for junior technicians

Standard, guided repair steps let junior technicians resolve predictive warnings without waiting for a specialist. The steps follow the same structure on every asset type.

checklist

Standard steps

The same repair sequence for each asset type.

school

Faster learning

Technicians work through the steps with the alert in view.

handshake

Shared ownership

Clear handoffs between the platform, the technician, and the reliability team.

NEXT CASE STUDY

Web Core Experience: a design system for a multi-device, multi-product website

A shared framework of components, placement rules, and campaign governance.

Image Preview
Enlarged screenshot