Fire Safety Panel Design

for smaller panel sizes with enhanced aesthetics

Ideation • UI Design • Prototyping • Systems Thinking

My Role

  • Designed and prototyped the GUI for a physical embedded systems product
  • Improve UX, match branding, design system development
  • Adhere to Safety regulations and innovate on existing product

Resources

  • Duration: Jun 2022 - Sep 2022
  • Reported to Director of Engineering
  • Collaborated with senior engineers, product managers and HMI teams

Problem

Current Fire Safety Panels suffer from limited or excessive screen size, resulting in either inadequate visualization or overwhelming information for users.

Users found difficulty in interpreting fire sensors and threat data from this device especially in times of danger. The device didn't have the capability to connect to cloud and gather data. The physical appearance of the device was also bulky and did not comply with the interior design of commercial buildings.

Solution

My design on the physical panel device significantly made it easier to navigate through the fire safety panel and also analyze data from the panel during times of danger with better visualization and UI.

Jump to Final Prototype

Process

This project taught me that the traditional Design Thinking has flaws. I used an iterative process through my work jumping between the stages following the Define and Refine method.

Research

The goal was to enable users to navigate through the panel in times of danger. By providing an intuitive and easy GUI for users to gather data and analyze, it ultimately saves the user time especially in cases of threats.

What is a Fire Panel?

Fire safety panels activate a quick emergency response when there’s a fire so everyone in the building has a chance to get out safely. They work by responding to changes in an electrical current, such as when a smoke detector identifies smoke and changes the current in response. Once the fire panel detects this current, it sounds the alarm. With a microprocessor powering the panel it sends and receives data from smoke sensors, detectors, and other devices in the building to the panel, thus helping users identify where the signal is coming from and making it easy to locate faults and threats.

The intuitive touch based color touch screen fire safety panel provides color coded information of detailed system status and point information. It is a powerful, intelligent addressable fire alarm control panel that is ideal for large commercial or industrial buildings. It supports up a large number of intelligent devices and can be configured to support multiple loops, making it a versatile solution for complex fire safety systems.

Identified Pain Points

Size of panel is reduced
User Journey not well-defined
Need for updated GUI to match size of Panel
Too Much Irrelevant Information
Data from Panel to be accessed over Cloud

As a part of Research and Development team (R&D), I experimented with the features to be implemented. Based on the research, we identified key features in each of the identified pain areas. My task revolved around creating designs and prototyping them while also validating if they really solved the problem. While designing and prototyping, I uncovered the working of the device to enhance the UX. This got me to consider technical constraints and understand that research doesn't come from one directed source.

Information Architecture and Site Map

Since there was a large amount of data that had to be streamlined on a smaller screen, the information architecture and site map gave a clear idea of the different parallel data types and user journeys that I had to think of as a designer and engineer. The data had to be displayed on the device, as well as peripheral devices and the cloud storage. The data was broadly classified into: 

01
Profile Section for each User Group
02
Different System States
03
Device Information
04
Main Home Screen Element
Click here for the link of the detailed Information Architecture

User Groups and User Stories

Identifying User Groups and working on User Stories helped me focus on the user's perspective making it easier to design and implement features that address real user needs and deliver value to the users.

The user groups that are involved with the usage of this device includes:
1. Building Maintenance Managers
2. Fire Marshalls
3. Building Safety Managers and Engineers
4. Commissioning Engineers

I created a User Persona for the Commissioning Engineers and used the information to proceed with the design.

Storyboards

I made storyboards based on each of the user personas. As a commissioning Engineer, they are responsible for varied list of activities. For new commissioning engineers, they may not know the exact work flow through their responsibilities even post training. Having the interface give them a heads up during their initial days would allow new engineers to be onboarded in a quicker manner.

Another scenario as a commissioning engineer is to be able to configure the system in a manufacturing plant. But the current systems need to be configured manually. But with the newer fire safety panel, engineers have the option to configure the system remotely through their mobile devices.

Wireframes

The wireframes introduced a new user flow inspired by common patterns found in existing fire panel products. It includes:

Initial Iteration of Prototype

Based on the wireframes, I designed and prototyped the first version of the onboarding screens using Embedded Wizard. This tool helped me create the GUI and simulate it on screen and also export code that could be run on to a physical prototype. I connected the hardware components such as the LCD Screen to the Microcontroller to see the actual design work on the prototype.

Inferences from Usability Test

Working with multiple teams, I got feedback on the first few versions of the interface and learned how to proceed. Since this was the first time the design team was actually viewing the prototype in a physical device, the scope was not clarified to them. They provided detailed feedback on possible tangential paths that I could prototype in the further iterations.

One of the specifications from the engineering teams was to prototype a flag based transition between one screen to another instead of an automatic timer based screen transition. I was able to do so by thinking about existing components in the microcontroller. I used the onboard LED as an option to trigger the flag based transition. The condition that I used was if the LED was turned ON it would trigger the transition to the next state and turn the LED OFF showing that the transition was complete.

Final Design and Prototype

With the goal of improving usability, functionality, and overall user experience and based on the feedback and feature recommendations from the various teams, I was able to bring the final prototype to fruition.

Learnings

It was the first time I worked on a physical prototyping project and this got me intrigued to learn about the tool that I used. Learning to use a new prototyping environment was a challenge but it was interesting to see how easy it was to generate code and ensure connectivity to the physical device. At every step I was able to get feedback on the design of the interface and the code from my team.

01
Optimize Memory
The senior engineers helped me think about how I can optimize the memory consumption of the interfaces I was creating.
02
Product History Importance
The product manager gave me perspective about how they advocated for the new product and also a perspective on the history of the device.
03
Agile Methodology
The project managers taught me to plan each feature in an iterative manner by using Agile methodologies.
04
In-House Testing
We had to hold off on the testing with end-users since this project was entirely R&D. But to ensure our designs were working, we performed in-house testing with teams working on similar fire safety devices.
05
Design System Creation
I created a Design System* that the team could use once the R&D project got approval from the business units.
06
Typography & Color
This internship gave me the practical exposure to learn about Typography and Color and Grids for icon design while creating a physical product.
07
Networking
Interviewed the VP and CTO of Honeywell Building Technologies and ask about their experience as a leader in Engineering and initiative as a Woman in STEM.
08
Intern Cohort
I met interns from marketing, sales, manufacturing and engineering while collaborating with them in a group project during the Intern Summit at the Honeywell headquarters.

*I have not posted my design systems to comply with my NDA.

Honeywell allocates time to work on self-development called Development Day once every month. The company encourages their employees to take this day to learn about anything that they are passionate about that can help augment their skills. I took this opportunity to learn topics in the below areas:  

Would You Like to see more?

UX Design • UX Testing • Prototyping • Accessibility • Healthcare
UX Design • Prototyping • B2B SaaS • Design System • Requirement Analysis