Skip to content
JITIAN LIAO

Chromium SCADA HMI Studio

Team
1 product manager
1 designer (me)
R&D Team
Duration
Jan 2025 – Mar 2025 (Design)

Modernizing a 30-year-old industrial software

*This project is under NDA protection, please contact for more details.

Background

Control Maestro is a powerful SCADA (Supervisory Control and Data Acquisition) software that has been a trusted tool in the industrial sector for over 30 years.

It serves a global client base in oil & gas, water management, and resource industries, helping them monitor and manage critical manufacturing and operational processes.

Goal

While ControlMaestro is powerful, its desktop interface feels outdated and limits collaboration.

The design goal is improving the information architecture and streamlining the user flow for creating these critical interfaces.

This case study focuses on the HMI Studio. You can read about the Tag and Alarm Management redesign in another case study.

Problem

Through frequent user feedback and support tickets, we identified several recurring complaints about the existing HMI Studio.

Steep learning curve

New users struggle to find tools or understand the creation process.

Inefficient Workflows

Simple, repetitive tasks require numerous clicks and navigating through complex menus.

Cluttered Interface

It is difficult for users to find the functions and tools they need quickly.

Success Metrics

To ensure the redesign was on the right track, we established three key metrics for success:

Accuracy

Users can create HMIs correctly without errors.

Completion Rate

Users can successfully complete the entire HMI creation process without needing assistance.

Efficiency

The time required to perform key tasks and create a complete HMI is significantly reduced.

User Group

Our users need a tool that is powerful, reliable, and allows them to build complex interfaces without getting bogged down by the software itself.

Plant Engineers and Operators

  • Domain knowledge in their specific industry (e.g., oil refining, water treatment)
  • Limited design or software experience
  • Work with complex control processes daily

Research & Audit

My process began with observing how engineers currently used Control Maestro to build an HMI. By watching them work, I could map out their workflows and identify specific points of friction.

A common task was adding a dynamic data tag to the interface:

  1. Add a generic “text” element to the screen
  2. Open the element’s properties menu
  3. Navigate to the “dynamics/data source” tab
  4. Configure the connection to the specific data tag
  5. Set up the formatting and units for the value
  6. Close the menu and preview to ensure it works
Old User Flow: Add a Tag with a Value

Analysis & Ideation

I conducted a detailed content and interaction audit of the current Studio.

Findings:

  • Tools and panels were scattered and inconsistent
  • Frequently used tools were buried under menus
  • No clear separation between canvas, tool area, and settings

I reorganized all the scattered fragments, and the new information architecture is built on three main sections:

Elements Panel (Left): A library of all available components (e.g., gauges, buttons, text) that users can drag and drop.

Canvas (Center): The main workspace where the HMI is built.

Settings Panel (Right): A context-aware panel that displays the properties for any selected element.

We placed the settings on the right because our user research and surveys showed the vast majority of our users are right-handed. We also included a streamlined toolbar at the top containing the most frequently used tools, based on survey data.

The Design Solution

The new design focuses on simplicity and direct manipulation.

Taking the previous example of adding a tag, the workflow is now dramatically simpler.

  1. Add a generic “text” element to the screen
  2. Open the element’s properties menu
  3. Navigate to the “dynamics/data source” tab
  4. Configure the connection to the specific data tag
  5. Set up the formatting and units for the value
  6. Close the menu and preview to ensure it works
Old User Flow: Add a Tag with a Value
  1. Drag and drop a text element
  2. Set up the formatting and units for the value from the right-side panel
  3. See the live preview instantly
New User Flow: Add a Tag with a Value

This reduced the setup process from 5+ clicks to 2 actions.

Testing & Results

After testing with existing ControlMaestro users:

  • Reduced the steps of adding a single tag to HMI
  • Reduced the time of creating an HMI by ~40% without error
  • 90% of users were satisfied and completed tasks without guidance

Takeaways & Reflections

Respect Legacy Workflows

I learned to balance innovation with familiarity. We kept powerful shortcuts for experienced users while introducing new, intuitive methods like drag-and-drop for everyone.

Small Efficiencies Add Up

Saving a few clicks on a high-frequency task (like adding a tag) has a massive cumulative impact on the HMI creation process.