In 2019, part of the six-month project. Managed a small team to help redesign the client’s Fire Smoke Damper (FSD) system User Interface (UI), a system of dampers in an HVAC system that closes to prevent air circulation upon detecting smoke in the ductwork.
Role: Lead UX/Product Designer
Creation of patterns, components, 3D models,
interactions, animations, and iconography
Tools used:
Blender 3D, Illustrator, Photoshop, Figma,
Procreate, and DG Lux5
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.
During specific months of maintenance, the client successfully tested individual FSDs in specific AHU systems in case of a fire. According to the client, adding a colored hover-state to the ductwork components on the FSD UI increased its usefulness. Additionally, the project came under budget and closed the contract before Flash’s EOL date, maintaining monitoring and communication between the UI and equipment.
The Challenge:
After years of utilizing an out-of-date Flash-based UI, the client wanted a modernized update to their fire smoke dampers (FSD) system UI before Flash’s EOL date. The old UI shows the location of specific FSDs in a given room and turns red upon activating a closed damper. Additionally, the old UI lacks information on how FSDs are all connected in separate air handling unit (AHU) systems.
The Objective:
Provide the client with a modernized UI before Flash’s EOL date, so in the instance of a fire, the user can identify what FSDs are activated in a specific AHU system.
The Solution:
An FSD UI with updated interactive icon sets and ductwork components to show how groups of dampers connect together in their individual AHU systems.
Fire Smoke Dampers Explanation
Air Handling Units (AHU) transport fresh air into and used air out of rooms. Without AHU systems, people would find it difficult to breathe fresh air in enclosed spaces. If a room were to catch fire, fresh air from an HVAC system would keep feeding the fire. Fire Smoke Dampers (FSD) prevent air circulation upon detecting smoke in an HVAC system. The FSD prevents fresh air circulation from reaching a growing fire, mitigating its spread.
Auditing the Old FSD UI
Determining the successes and the pain points of the old FSD UI helped to give insight into elements that carry over to the new UI and elements that need to be improved.
Old fire smoke damper UI
Old fire smoke damper command pop up
Pain Points:
No representation of which FSD belongs to which AHU system
Equipment in rooms unrelated to the FSD is a distraction
Details like room floor textures are a distraction
No indication of room identification numbers or names
Product Successes:
FSDs are positioned in their respective area as they would in real life
FSDs change color based on their open-closed status
A key that explains the significance of the FSD’s colors
FSD Functionality Sketch
Updating the Experience
The UX team was not looking to reinvent the entire FSD UI but to design it so that familiar elements from the previous UI still existed while exploring other areas of optimization.
Reused FSD Color Psychology Elements
Using previous control documents, I recreated the ductwork in the building related to the fire smoke damper. A red or green square represents each fire smoke damper. Green indicates that the FSD is open. Red indicates that the FSD is closed. The purple squares indicate the location of the override panels, which also control the FSDs.
Condensed Area Used by FSD Pop-up
Hovering over the FSD colored square reveals a card component that provides further information about the FSD, like the name of the FSD, identifying if it’s open or closed, and controlling whether the FSD is open or closed.
Connected FSDs to Their AHU's Ductwork
Hovering over the ductwork reveals what FSDs connect to the highlighted ductwork. Hovering also indicates what type of air the ductwork is transporting: Exhaust Air (EA), Return Air (RA), Supply Air (SA), or Outside Air (OA).
Further Optimization
Highlight Alarmed Area
Once the final BAS UI product was installed on location, an internal lessons learned meeting was held to discuss the project’s success and pain points. One topic covered was the ability to pinpoint the area from which the fire originated. You can determine where the fire or smoke originates by identifying if two dampers are closed along specific ductwork. This area could be highlighted in red on the floor plan to show where the fire or smoke is coming from.
