Fire Extinguisher

Client: PyroWeb | Timeframe: 3 weeks | Team: 3 UI designers

Brief:  PyroWeb, a fire compliance company, needed a visual identity for their digital quote tool. 

My role: UI designer

Solution: I created high-fidelity web and mobile designs for their quote flow and re-branded their product website.

 

Challenge

Fire safety is a topic that should always be handled with responsibility and care. In spite of its overwhelming importance, many small business owners and property managers overlook it due to their hectic schedules. PyroWeb is a small start-up that provides fire compliance solutions to its customers in major metro areas. Fire Extinguisher, one of their web-based platforms, addresses the problem of how to easily order fire compliance tools to ensure property buildings are up-to-date with local fire laws. Fire Extinguisher also gives customers the flexibility of scheduling for a fire technician to stop by their property all with the tap of a button.

PyroWeb sought to help its users simplify their search for the right fire products and services through its digital quote tool and enlisted the help of a DESIGNATION UX team; the team crafted a streamlined enrollment process for customers to receive an estimated quote of the services and products needed to be fire code compliant. My design team and I were handed the UX deliverables, which included all of the research and final wireframes, to design the site’s visual branding style and layout. We took 3 weeks to research the competitors, create diverging style tiles, build out the key screens, user test, iterate, and present our final designs to our client. My role in this project was to deliver a high-fidelity visual design of the Fire Extinguisher website and the quote process for desktop and mobile platforms.

Design journey

Client Vision

We kicked off the project by first compiling diverging visual styles that were rustic to minimal, had various color treatments, and included photography and illustration. Various brands were carefully chosen to give our client an idea of how visual elements could be juxtaposed with one another.

 

We met with our client and learned about the parameters they had for the visual design. First, they wanted to avoid using graphic illustrations as the main visual component of the website as they felt illustrations detracted from the professional tone the site should convey. They also didn’t want blue to be the predominant color because it was often used in this industry. Lastly, they wanted users to have an easy way to go to the product page without needing to hunt for it. These guidelines equipped us with the knowledge we needed to move forward in selecting suitable competitors.

Surveying the competition

We focused on six competitors in the fire compliance domain to identify gaps we’d address once we started designing our key screens. Additionally, we looked at out-of-category competitors to widen our understanding of what design patterns our target user were familiar with.

A few of the competitors we focused on included Total Fire and Safety Inc., Western States Fire Protection Co., and The Zebra.

 

From our competitors we learned that concise headlines were necessary to invite users to try out the free quote tool. Pairing headlines with fire-related photography also added context to what type of service this free quote was for. Our main takeaways helped us formulate our design principles which would be our point of reference through the design process.

Our first round of design principles brainstorming brought forth concepts that weren’t targeting small business owners and property managers. Our design principles also did not address how we would implement them visually and stylistically. We went back to the drawing board to brainstorm values that were important to these target users. After multiple rounds of iteration we emerged with a solid set of design principles that aligned with our goals for the brand.

 

Style Exploration

After refining our design principles, I started crafting the three divergent style tiles to present to the client.

Style Tile 1.png

This style tile was designed to be conservative and professional; this tone was conveyed by using an off-black color as the primary hue. The thick stroke weights of the icons also imparted a regal feeling.

Style Tile 2.png

This style tile evoked a feeling of calmness; the color palette was inspired by the deep green hues found in a quiet, idyllic forest. The individual blocks containing each step in the quote process made it easy for the user to know where they were currently at.

Style Tile 3.png

This style tile blended the traditional colors of a standard fire company brand with a contemporary one. The icons were filled in with color to impart a little bit of fun to the style and still remain professional. The frequent use of all caps is balanced with the amount of whitespace to bring clarity to the content.

 

Our client had equably favorable comments for the first two style tiles. They liked the color palettes and the tone established by each style tile but were intrigued with whether or not the dark, earthy green color would resonate with users. The last style tile elicited a strong, negative response since the client did not want too much blue in the design. I decided to move forward with the second style tile because the calm and reassuring mood it evoked aligned well with the design principles my team developed.

Enhancing the user experience

Due to our client’s repeated emphasis on the importance of having both the digital quote process and the products displayed on the homepage of the website, I decided to modify the UX wireframe by organizing the sections; the quote tool was prominently displayed at the top of the page and the products and additional services just below that. The navigation bar at the top was also organized to give the area more breathing room and still have all of the important information present.

 

After I modified the wireframe, I created the high-fidelity screens, keeping in mind the equal importance of the quote tool and product and service pages. I tackled this design specification by placing a main hero image above the fold in my home page designs to catch the attention of users. I also placed a strong headline with a simple CTA on top of the image, compelling users to take advantage of the free quote tool. Additionally, I placed the product and service section just below the hero section. This made it simple for users to decide where they needed to go without having to scroll too far down the page.

Listening to our users

One of the most exciting parts of the design process was testing our products. Before we ventured out to gain feedback from users, my team and I assembled an outline of the questions we wanted to have answered during our interviews. The testing script consisted of questions related to the visual style of the website and what emotions it brought forth from users. It also touched upon how the navigation was laid out and what users thought of as they proceeded through the quote process. After testing I discovered a few interesting insights:

green-homepage.png
 

Users said they didn’t feel like they were at a website that was selling fire products or offering fire compliance services because of the color. After receiving this feedback I changed the dark green color to a dark navy blue which is commonly associated with trust and professionalism. This made the website more reflective of the fire compliance services Fire Extinguisher was offering to its consumers. (Note: This is a shortened version of the homepage.)

 

Users mentioned the use of icons made the website look too simplistic and juvenile for a professional website. Furthermore, users disliked having a text field where they could enter information; they preferred having either a drop-down menu or radio buttons to select their answers. I thought this was surprising because it limited the information one could enter, but users expressed desire for a faster method to enter information.

 

The color of the alert box was intended to make sure users did not miss the content inside of it, but they had a strong, negative reaction to the color and to the written content inside, stating that both the color and content induced a feeling of fear.

reviews-section.png
 

Users commented that having individual testimonials instead of a whole list of reviews incentivized them to pause and read the content instead of skipping over it.

review-too-long.png
 

Users reacted negatively to having both the quote summary and option to book an appointment on the same page. They felt that this page was excessively long.

 

Final Designs

With the users’ feedback in mind, I built out the rest of the quote flow process and the responsive mobile version of the website and made the following changes:

  • Replaced the original color palette in favor of a dark navy blue as the primary color because users associated blue with the feeling of professionalism.

  • Paired the blue with a quiet red that drew attention without being distracting.

  • In the quote flow I used an orange color as the main CTA instead of red to avoid having users confuse red with an error message.

  • Used the card pattern for the quote flow screens to group content and minimize cognitive overload.

  • Incorporated white space to make the quote process feel clean and uncluttered.

The final product was a result of numerous user tests and client feedback. Users were quite vocal about the updated color palette and said it gave the site a well-established look and made them feel like they could rely on it to provide the fire services they need. They also reacted positively to the high-quality photos that I replaced the icons with, saying it made the website professional. After splitting the quote section into two separate pages users said the quote process was straightforward and easy to navigate.

View the desktop prototype here.

Animations can be viewed below.

View the responsive mobile version below.

 

I also created a style guide that laid out all UI guidelines for desktop and mobile platforms to ensure brand cohesion across pages. View the style guide here.

 

future plans

With more time, I would have liked to build the product page to align with the visual style of the designs I created. Additionally, the current length of the home page is long, and several users mentioned not liking the fact that they had to scroll so much to reach the bottom of the page. It would be a great opportunity to consolidate some of the content on the homepage and do some A/B testing of the home page with additional users to see what resonated with them.

 

insights

This project gave me the opportunity to work with a real-life client and also continue improving my design process. The main insights I gleaned from this project were:

  • Communicate the purpose of each design step at client meetings so that they aren’t confused with the material presented at the meetings.

  • Ask clients for specific feedback to ensure the designs are aligned with their product goals.

  • Client requests can and probably will conflict with what users want or need from time to time. It’s critical to analyse what they say and also what users say.

The art of balancing both client and user goals and delivering solutions that fit their requirements took critical thinking skills and experience that I was able to harness for Culinary Care, another client I worked with.