Redesigning HVAC HMI dashboards for information clarity and modern appeal

OVERVIEW

Heating, Ventilation and Air Conditioning (HVAC) Systems play a pivotal role in ensuring occupants' comfort and safety within buildings. The existing Human-Machine Interface (HMI) for Siemens HVAC systems, installed in a prominent Mumbai hotel, presented challenges due to its complexity and outdated design. While at Designflyover, I had the chance to modernize and improve the dashboards' efficiency.

TEAM

I collaborated with a design engineer and an HVAC engineer.

MY ROLE

Research, UX design, UI design

TIMELINE

6 months

TL;DR

Integrated Design thinking methodologies for an updated, modern interface
Improved navigation and clarity of HMI without breaking habits

PROBLEM:

A confusing, clunky and outdated HMI that made it difficult to understand the displayed information.

GOALS:

Improve navigation and clarity by establishing clear visual hierarchy
Design a modern interface within restrictions

RESEARCH

UNDERSTANDING THE CONTEXT

I collaborated with the engineers to understand the HVAC system intricacies to create a tailored solution

A site visit to the hotel to observe and understand the functioning of the HVAC system.

I spent time understanding how an HVAC system works.

I mapped out the HVAC system we were designing for.

UNDERSTANDING THE USER NEEDS

A bird’s eye view for quick action is imperative

Conducting interviews with technical operators on-site allowed us to uncover challenges, gather requirements, and understand the environment in which the dashboards would be utilised. Through these discussions, we identified three important things:

Operators monitor multiple screens at the same time

They need to identify issues at a glance

They often work long shifts leading to eye fatigue

What doesn't work in the existing design?

a. Icons lacked alignment, making quick information absorption difficult.
b. No differentiation between clickable and informative icons.
c. Ambiguity around button functions.
Flow direction unclear due to small, low-contrast arrows.
Readings resembled editable text fields.
Some elements appeared incomplete, making comprehensive understanding difficult.
The 'ON' and 'OFF' elements held equal prominence.
Base tabs had limited visibility, hampering easy navigation

UNDERSTANDING DESIGN CONSTRAINTS

Implementing the new design within the existing software

This introduced specific restrictions that the designs needed to conform to, which included:

Avoiding depth-oriented interfaces
Avoiding drop-down or collapsible menus
Adhering to system fonts for typography
Confining the use of specific shapes, such as avoiding rounded line ends

INITIAL IDEATION

I explored changing the layout and using minimal graphics to reduce complexity and enhance visual clarity in the initial versions.

FEEDBACK

From the feedback we received from the operators on the initial designs, we noted two issues:

1. Changing the positions of objects would be inefficient

The existing layout directly represented the physical system on-site, and was therefore the most efficient.

2. Oversimplification might hinder understanding

Visual representations that resemble their real-life counterparts help operators comprehend information quickly.

So we decided to move forward without changing the positions of the chillers and pumps, focusing on establishing proper hierarchy and reducing visual clutter.

ITERATIONS AND REFINING THE DESIGNS

Redesigning the layout for intuitive navigation

To enhance navigation, we relocated tabs from the bottom of the screen to a left-sided panel, combining them with the constantly displayed header information. This adjustment ensures constant visibility and improves intuitive navigation.

Classifying all the elements on the screen

To prioritize information on each screen effectively, I categorized all elements based on their importance, distinguishing between critical data crucial for system monitoring and supplementary information.

Grouping information

I organized related information into cohesive groups and ensured clarity by grouping icons and indicators with their corresponding readings, logically arranging and aligning the information.

Choosing a colour palette

The selection of appropriate colors played a pivotal role in our design solution. We opted for a dark interface for better visibility and comfort, paired with a deliberate choice of bright and contrasting colors for the various elements on the interface. This combination of dark and bright colors not only enhanced the overall visual appeal but also significantly improved the contrast.

Redesigning the buttons

I repositioned scattered button groups around each element and addressed ambiguous buttons, especially the critical 'ON-OFF' button, which was made more prominent and provided with a clear label for enhanced usability. I grouped and placed all buttons together in a 'panel' to reduce visual clutter.

Establishing hierarchy

I used a combination of color and size to differentiate between higher and lower priority information to establish a clear information hierarchy. High-priority information was larger and had higher contrast, ensuring it stands out and commands immediate attention. Smaller and subtly colored elements were used for lower-priority information, maintaining a balance between critical and supplementary details.

The 'ON' and 'OFF' states of a chiller - Higher contrast for the 'ON' state as that would be monitored.

FINAL DESIGN

Clear hierarchy, contrast and comfort

Our design solution featured:

A dark interface for improved visibility and comfort
Consolidated tabs on the left side for better consistency
Clear 'ON' and 'OFF' hierarchy
Logical icon grouping with simple, self-explanatory buttons
Balanced 'foreground' and 'background' elements for focused contrast
Prominent flow arrows

LEARNINGS AND REFLECTIONS:

Acquiring domain knowledge is pivotal in project success

Given the project's distinctive requirements and specialized nature, investing time at the start of the project to gain comprehensive domain knowledge proved essential in order to develop a meaningful solution that would be effective.

Asking the right questions is important

One significant takeaway from this experience was the importance of asking comprehensive and relevant questions early on in the project. Gathering detailed information about user workflows and the technical constraints helped in making more informed design decisions. Early inclusion of these questions would have minimized initial iterations.

Incorporating various elements is important for accessibility

In this project, we relied a lot on colour to convey information, which could lead to accessibility issues. Although we tested the designs with individuals having mild deutan vision, including users with varying types of visual impairments would have given more insights for design improvements. If I were to work on this project again, I would incorporate other visual cues alongside colour to enhance accessibility.

view more work