To Kei Fung
← Back to work

Case Study

Creating IoT-integrated Power Systems

A modern, engineer-friendly interface designed to help teams monitor, control, and manage IoT-enabled power systems with confidence and clarity.

Dashboard designData visualisationJavaScriptResponsive webUX DesignProblem solving

Role

UX/UI Designer

Platform

All platforms

Timeline

12 weeks

IoT power system dashboard

Design Process

Empathise & Define

  • Interviewed field engineers to surface workflows, priorities, and pain points.
  • Captured critical usability needs: immediate feedback on commands, clear toggle states, and low cognitive load.
  • Mapped core tasks and prioritised clarity over decorative UI to keep controls trustworthy.

Ideate & Design

  • Explored industrial control references to inform iconography, toggle affordances, and layout conventions.
  • Created responsive wireframes in Figma with a modular system for live data cards and control elements.
  • Balanced depth and legibility: high-contrast labels, restrained color accents, and tidy information hierarchy.

Prototype & Test

  • Built interactive prototypes with live sensor data to validate flows with engineers.
  • Refined control placement, toggle behavior, and visual hierarchy from qualitative feedback.
  • Confirmed responsiveness across devices and clarified feedback states for every action.

Design Challenge

Control panel view showing primary toggles and feedback states

Bridging the physical–digital gap

Engineers were used to tactile switches and industrial control panels. The digital interface lacked the same clarity and reassurance, so users felt unsure whether commands were executed.

HMI reference layout highlighting control regions and sensor data

Approach

  • Studied physical switchgear layouts to model clear states, labels, and affordances.
  • Emulated key cues (toggle travel, indicator colors, state depth) while keeping a modern, minimal UI.
  • Avoided heavy skeuomorphism but retained intuitive metaphors that felt trustworthy to engineers.
Overview dashboard with live system status cards

Responsive design

Ensured mobile and tablet layouts retained the same visual feedback, with simplified controls and clear hierarchy for on-the-go checks.

Capacity health dashboard showing component-level performance

HMI design

Built a human-machine interface tailored to converters and field devices, with component states for engineers to trust every command.