Case Study
Digitising Heavy Industry: A High-Trust Interface for IoT Power Systems
A responsive web-based 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.
Role
UX Engineer (Hybrid)
Tech Stack
JS, ThingSpeak API
The Challenge: Trust in a High-Stakes Environment
Interaction Anxiety
Field engineers were used to the physical 'clunk' of a breaker switch. Moving to a touch-screen created uncertainty—users would rage-click buttons because they weren't sure the command was sent.
The Latency Gap
Controlling hardware via the cloud introduces unavoidable lag. A standard UI would look 'frozen' while waiting for the ESP32 to respond.
Technical Implementation
My background as an Analyst Programmer allowed me to design not just for pixels, but for the API constraints of the hardware.
System Architecture & Data Flow
How the React Dashboard talks to the Hardware
IoT Dashboard
User Interface
ThingSpeak API
REST Broker
HMI Panel
ESP32
RESTful API Integration
Designed the frontend to poll ThingSpeak channels for live voltage data while sending POST commands for system control, handling async states gracefully.
Live Data Prototyping
Apart from static Figma mockups, I built JS-based prototypes using real JSON data to stress-test the dashboard's legibility under rapid fluctuation.
Solution: Bridging the Gap
Visualising 'Digital Tactility'
I designed a UI language based on 'Functional Skeuomorphism'. We mimicked the specific behaviors of physical hardware (latency, distinct states) without the visual clutter, using distinct 'Processing' vs 'Confirmed' states.
Optimistic UI Patterns
Leveraging my background in APIs, I designed button states that acknowledge the user's intent immediately (optimistic update) while the background network request processes, eliminating perceived lag.
Project Impact
- Reduced 'Interaction Anxiety' by providing clear, step-by-step visual feedback for every network request.
- Enabled remote troubleshooting, allowing engineers to diagnose battery faults from tablets without entering hazardous zones.
- Created a modular component system that mirrored the React frontend structure, speeding up dev handoff by 30%.
