← Back to work

Case Study

Digitising Heavy Industry: A High-Trust Interface for IoT Power Systems

A responsive HMI (Human-Machine Interface) that bridges the gap between physical reliability and digital control. Designed to handle API latency and build trust with field engineers.

Internet Of ThingsHMI DesignRESTful APIsJS/JQueryBootstrap 5Chart.js

Role

UX Designer (Hybrid)

Tech Stack

JS, JQuery, ThingSpeak API, Figma

IoT power system dashboard

Phase 1

Discover (Insight)

Participant Observation

Worked hands-on as a temporary junior electrical engineer testing DC breakers. This direct participant observation allowed me to experience the tactile environment firsthand and deeply empathise with the engineers' reliance on physical feedback.

Iterative Focus Groups

Conducted multiple focus group sessions with field engineers to collaboratively define the core project challenge and uncover deeply rooted operational pain points.

Phase 2

Define (Focus)

Design Challenge

The field work and sessions helped us pinpoint the physical-digital gap. The digital UI had to feel as trustworthy as tactile switches.

Problem Identification

Through these iterative discussions and hands-on testing, we identified that a lack of clear digital feedback left users unsure if commands were successfully executed, creating severe 'interaction anxiety'.

"
Research Question

"How might we design a digital interface that provides the same level of immediate reassurance and trust as tactile industrial hardware?"

Physical device with tangible buttons
Physical device with tangible buttons
Reference for digital adaptation
Reference for digital adaptation

Phase 3

Develop (Solutions)

Design Metaphors

Design Metaphors

Emulated physical cues like toggle travel and state depth. To mimic physical hardware, I designed buttons to transition from a plain unactivated style to a full-color active state, replicating exactly how a real industrial switch lights up when pressed.

Clarity Over Decorative

Clarity Over Decorative

Sidebar serves as a high-priority vertical anchor, housing essential real-time status indicators—such as operating modes, battery storage, and system-wide alerts—to ensure critical data is the first thing an engineer sees.

Reduces Cognitive Load

Reduces Cognitive Load

By providing immediate feedback, you prevent users from clicking a button multiple times, which could lead to system errors in an IoT power environment.

Phase 4

Deliver (Implementation)

  • Prototyping

    Built interactive prototypes integrated with live sensor data to simulate real-world scenarios and validate flows with engineers.

  • Testing & Iteration

    Refined control placement, toggle behavior, and visual hierarchy based on qualitative feedback from usability tests.

  • Final Implementation

    Delivered a responsive HMI (Human-Machine Interface) with clear component states and exposed device-level status for troubleshooting without cluttering the view.

  • Cross-Platform Consistency

    Confirmed responsiveness across all devices, ensuring mobile and tablet layouts remained consistent with desktop feedback and hierarchy.

Designed & Coded by Kei Fung To