Generator Room Building Automation System UI

The Challenge:

After years of utilizing an out-of-date Flash-based UI, the client wanted a modernized update to their generator room UI before Flash’s EOL date, where equipment monitoring and control would stop. Additionally, the old generator room UI lacked critical visuals like generator images and indicators of when they are running. Additionally, access to the generator pages was not accessible from the generator room.

The Objective:

Provide the client with a modernized generator room UI, so in the instance of power loss or maintenance testing, the client can monitor the activity of the generators when they are running while additionally controlling other equipment.

The Solution:

A generator room UI with updated icon sets, 3D animated models of generators, exhaust fans, and unit heaters to determine their activity while adjusting the Information Architecture (IA) of the client’s building automation controls site to access the generator pages.

The Result:

The metrics for success were based on the following:

• The client was able to monitor and control equipment through the UI update successfully

• If we were able to create the UI update under budget

• Finish before Flash’s EOL date.

With the addition of animations, equipment models, and maintaining color symbolism, the Generator Room UI successfully allowed the client to monitor, control, and navigate equipment intuitively. Additionally, the project came under budget and closed the contract before Flash’s EOL date, maintaining monitoring and communication between the UI and equipment. 

Generators in this location run on diesel fuel to power the campus during power shortages. Due to the massive size of these ten generators, when activated, the attached fans spin quickly and loudly, pushing air through the room. Large dampers in the front and back of the generator room open once the generators activate to help with fresh air flow. Exhaust fumes would fill the room if no dampers existed while these generators were active. It is highly discouraged that people be in the room while the generators are active due to the high wind speeds and loud noises. 

Customer Needs:

• Being able to access the Generator Status Pages from the Generator Room page

• Viewing active generator models on the floorplan

• Allowing for proper spacing to fit all equipment

Product Successes:

• Use of color psychology

• Status labeling for equipment

• Equipment images for identification

• Location of equipment in Generator Room

3D Rendered Equipment

Mechanical drawings helped build static and animated models to aid in equipment identification and status. All models were created in Blender 3D and verified by the team technician and client.

Equipment Monitoring and Controls

Equipment in the generator room is monitored and controlled by I/Os where the user can operate equipment from the UI. To optimize space, status card components appear on hover states for equipment. Status card components are directed away from the floor plan so as not to cover up animations of other equipment.

Color Psychology for Equipment

The prototype for damper status was based on old Generator Room UI color psychology, where a colored vertical plane indicated status. The idea of using colors to indicate the damper's status was turned down for more realistic-looking dampers.

Using realistic-looking dampers would make sense regarding consistency, as all the other equipment is 3D rendered. I argue that the color status is more recognizable. Additional I/Os components help in indicating equipment status.

For equipment models without status animations, the same color psychology indicates status. Color blindness was identified as a non-issue before the use of color psychology.

Generator Monitoring Pages

Clicking a generator on the Generator Room UI brings the user to that specific generator status page, where they can monitor their outputs. An animated model of a generator and fuel tank helps to identify the status amongst a variety of alarms and energy monitoring graphs.

Leak Alarm Iconography

Leak detection strips that surround the perimeter of a generator. Generators in the area run on diesel fuel and are cooled by water. When a liquid rollover occurs, an alarm is activated. A leak alarm icon will display on the interface between the generators where the drain is located.

Typography and Acronyms

I/O titles like GEN1BLOOILPRESSALARM are unnecessarily long and full abbreviations, especially when some information is already present on the UI. The full name of this point is Generator 1B Low Oil Pressure Alarm. Because you already know you’re on the Generator 1B page, you can now remove GEN1B from the I/O title, making it Low Oil Pressure Alarm. With this I/O title being under the Alarm section, you can remove alarm from the I/O title, making it Low Oil Pressure. Also, RESTRICTING_THE_USE_OF_CAPITAL_LETTERS.

Equipment Interaction Signifiers

Equipment with I/Os associated with their model could have a small icon to represent that there are I/Os connected to them based on interaction. This would save the user time exploring the UI for the equipment they can interact with or being caught off guard for the first time if an equipment alarm goes off.