How I transformed a library of 3D equipment graphics into simple and modular design

The Project

Delta Controls is a global leader in the building automation systems industry.

Delta’s enterprise software provides their building engineers the ability to create building system diagrams for their clients. Prior to this project, the software only produced 3D diagrams. 

Example of a 3D diagram.

While some of Delta's clients like the 3D style, other clients prefer a more simple way (flat, 2D, non-angled) to view the diagrams and found that the 3D style can be unnecessarily complex. Delta would like to provide their clients with both options when it comes to viewing these diagrams. 

I was hired as a designer to transform their large library of equipment graphics from 3D designs to flat, modular designs (the flat palette). In total, there were approximately 200 equipment graphics. 

• Timeframe: January 2020 - September 2020 
• Client: Delta Controls
• Team: Sole designer reporting to a Project Manager and UX Development Team Lead

TL;DR? Jump to see the flat palette in action

My Process

Initial Concerns

Having never worked in the building automation industry (or anything remotely similar) before, I felt daunted and overwhelmed about having to familiarize myself with the industry well enough to design over 200 equipment graphics. 

I decided to break it down. After discussing the scope of work, I compiled a list of the requirements:

1. Each equipment graphic needed to be represented by its cross section.
2. The graphics must make sense functionally, as building engineers and building managers need to understand what it does. 
3. The graphics must be pixel perfect and should ‘snap’ into place (into the ducts). 
4. The graphics needed to work on both light and dark backgrounds. 

Having this list helped narrow down my scope and how I could approach this. However, I was still concerned about the first two points. I felt like it would be difficult to create a visual of the cross section when I have not seen the equipment before and do not understand how it works. At some point, I was even tempted to visit Delta’s manufacturing building to do some ‘operation’ on the equipment so I could examine the insides of it, but, thanks to the internet, that was not needed!

Becoming Familiar with the Industry

I began my process my familiarizing myself with the equipment by talking to the subject matter experts at Delta and also looking online for images, diagrams, and videos of heating, ventiliation, and air conditioning (HVAC) equipments.

I kept a folder of images of various HVAC equipment such as the ones pictured below. When the images weren't enough, I watched videos to get a better understanding of how the equipment worked (in case you're curious, here's how a sump pump works).

Understanding how the equipment worked helped guide my designs, and I knew which parts of the equipment to emphasize. Also, many of the equipment has a different number of states, so understanding how it works functionally helped me design for these various states. 

Each equipment comes in different states. The above graphic features a fan in five diffent states.
When stacked together into the system, the fan can be animated. 

Finally, it was important that I receive the right type of feedback from the Delta team. When asking for feedback, I emphasized that I’m not just looking for input on the aesthetics, but that my priority is the functionality. With this direction, I was able to receive valuable insight on how the equipment worked, rather than how it looked, which helped me with the execution of the design.

Style Progression

Early on, I started to develop the style and aesthetics of the equipment. The initial instruction from Delta was that they wanted flat designs. With not much more direction than that, I took a first stab at designing an air handling unit (AHU) diagram so Delta could critique it and we could further finesse the style to match their needs. 

Initial Concepts

Initial attempt: I learnt that my first attempt was not functionally accurate because the equipment was supposed to touch the linings of the ducts and mines did not. Delta was also looking for an even more simple aesthetic, so my use of shadows and gradients were not required.

Next iteration: After toning down the shadow and gradient effects, I resized the equipment so it 'snaps' in place into the duct. While some work still needs to be done to the individual equipments to ensure accuracy, Delta was pleased with moving forward with this style. 

Equipment Examples

While the initial equipment style was approved, I still needed to be able to apply this to approximately 200 equipment graphics. Each equipment was different and comes in various states (for example, the damper had over 20 states). Below, are some examples of my thought process and approach for selected equipment types.

Fans, Dampers, and Coils

Fans, dampers, and coils were the first set of equipment types that I designed. I always like to start with low-fidelity sketches. Below are just a sample of the many sketches I did. 

Fans, dampers, and coils, oh my! 

I then moved on to high-fidelity mockups using Adobe Illustrator. At this point, I'm still learning about the functionality of the equipment so I came up with a few variations for Delta so they could inform me which best represents the functionality. 

High-fidelity mockups of fans, coils, and dampers. 

With the dampers, it consists of two different types (opposing and parallel) and each one had 11 states, so that's 22 graphics in total. I needed to do some math (shudder) to ensure that each blade was moving in the right direction.

Using the numbers from my calculations above, I was able to ensure that each blade on each damper is functionally accurate. Below is a screenshot of the final version of the dampers. 

The final version of the opposing and parallel dampers. 

Centrifugal Pump

One of the most challenging equipment types that I designed was the centrifugal pump. The pump had a fan inside it (respresented on the right in the red area) and I needed to design the various states to show the fan rotating on its side. 

Source: wikipedia

This was more difficult than I anticipated as I wasn't sure how I could achieve the rotation of a fan represented on its side using the flat style. My initial low-fidelity sketches were not successful so I decided to do some arts and craft to help me with the visualization.

After building my physical product, I 'spun' the fan in different angles and captured how it looks like with low-fidelity sketches.

Next, I brought the designs to mid and high-fidelity designs on Adobe Illustrator. Below is a screenshot where I show the progression in the design, from pronounced outlines to use of shades so it appears less harsh. 

Lastly, I stacked the fan states together and put it into the pump. I then used Adobe Photoshop to animate so I could see if the fan ran smoothly. 

The final version of the centrifugal pump

The Flat Palette in Action

After the project was complete, I followed with up with the team lead a few months later to inquire how their clients are enjoying the flat style. As the flat palette just rolled out at the time of my ask, there hasn't been much feedback yet. However, I was told that Delta's European clientele had a lot of interest in the flat palette. 

My team lead was also kind enough to provide a testimonial and also send me a video of the flat palette in action. Here it is below! 

"Building Management System (BMS) Graphics are created so that a building manager and/or occupant can view and interact with all aspects of a space from a centralized location. The goal of our project was to update a large library of equipment graphics to make them more simple and modular for a global audience. I was very impressed by Kelly’s quality of work and drive to learn all about our industries terminology and functions. We were able to deliver an updated library of templates to our global partnership on time and on budget. I would recommend Kelly to anyone looking to work with a hardworking, reliable, and talented Designer."

- Zach Stevens, UX Development Team Lead 

Reflections

Prior to this project, I didn't have any experience in the building automation industry, nor am I someone who is very handy when it comes to heating, ventilation, and air conditioning equipments.  While I was excited, I also felt overwhelmed and had many thoughts of "how the heck am I going to do this?" when I first started. 

The importance of putting in the initial research and trying to get a good understanding of the industry really helped with the success of this project. I am glad that I approached the project the way I did and I'm also grateful for the opportunity to have access to a team of experts who are transparent and understanding. 

Looking back at this project, I remember all the times I felt frustrated but I knew I couldn't dwell on that or I'll get stuck. Whether it was through sketching, watching videos, or building a physical product, I had a lot of fun learning about these equipments and designing this flat palette. 

© Kelly Choi 2023