Web-Based Commercial HVAC Controls

–April 2016

Providing facility
managers an intuitive
tool for controlling
HVAC operations

Snapshot

The Product
Metal Masters is an HVAC company in southern Oregon providing commercial grade installation services. Along with HVAC systems, they also provide web-based automation controls for the systems they install. While they have a tremendous amount of experience with HVAC controls and programming the systems, I was brought in to help design the interface to make it a simple experience for their clients.

Research
With limited resources for research, I was able to speak to a facility manager to understand how they used their current controls product. I was also able to speak with other HVAC service technicians—who are often the users for these products.

Project Type
This was primarily a visual redesign. It would be developed using Honeywell's NWEBs-N4 software platform, which had constraints in visual and interactive capabilities. The goal was to design something very simple to develop, and easy for users to understand.

My Role
Research, wireframing and visual design

Facility managers need to have the ability to quickly see how a building’s HVAC system is operating from a “bird’s eye” perspective, and then be able to drill down and assess, or diagnose, any specific equipment problems.

Floor plan Renderings

Visualizing the Facility
Floor plans needed to be visually divided up into zones (i.e. individually controlled areas of a facility) and color coded to be easily distinguished from one another.

I rendered some of the facility graphics in 3D, using SketchUp, while others were built in 2D—depending on client preferences and what the budget allowed for.

Custom Icons

Easy Recognition and Recall
I created a set of custom icons for the global navigation. These were designed, with labels, to be easily discerned and remembered by users. Also, the goal was to design icons with a simple style that could be scaled and expanded on for future controls projects.

Hi-fidelity Screens

Final Mockups
Critical to the redesign of this interface was integrating global and secondary navigation elements with a clear sense of hierarchy, to help users find their way around the product easier. Many of the visual elements were also designed to tie in with Metal Master’s (the HVAC company selling this product) brand and identity.

Some screens were designed to function like a dashboard, allowing users to get a visual snapshot of the current system status for large areas of the facility, and the ability to see any alerts. From these screens the user could drill down to see the details of how certain pieces of equipment were operating.

Style guide

Keeping it all in Order
To ensure consistency for the product visuals, I created a style guide for our developer to use while programming the interface.