Natasa Todorovic
Natasa Todorovic

Fire Extinguisher

fe hero.png

   Fire Extinguisher

Meet fire code requirements


Client: Fire Extinguisher                       Role: UI designer                         Tools: Sketch, Illustrator, Photoshop, InVision, Principle                       Timeframe: 3 weeks


CHALLENGE

Fire Extinguisher is a young startup company that provides a web-based platform to help businesses meet fire code requirements by minimizing risks and guaranteeing compliance. They partner with local contractors across the country to provide inexpensive and quality fire protection for their clients. The platform allows users to purchase the correct fire equipment (fire extinguishers) that comply with requirements within any state. Furthermore, the service allows users to schedule services online with a pre-qualified technician anytime, anywhere. Their future aspiration was to add a feature that lets users define their fire safety needs without contacting an outside expert.

I was part of a team of three UI designers. We worked with the CEO of Fire Extinguisher and his team of developers for three weeks. We received wireframes and research from the UX team that had previously worked with the company. The UX researchers concluded that business owners and tenants don’t feel confident in their knowledge to purchase the necessary products and services to ensure fire safety compliance and that they needed to be guided through the process by experts. Our role was to redesign their homepage, build out their “quote” process from wireframes. 

Our first step was to look at existing Fire Extinguisher’s website to investigate their current branding and visual design.

fe old homepage.png

My first impression was that the site looked a little bit outdated. The use of low-quality images lent the site a sense of untrustworthiness and unprofessionalism. Name of the website, Fire Extinguisher.net was a primary point of confusion. The big question was why .net is part of the name. 

fe old home page2.png

Use of red and orange colors in some areas of the site appeared aggressive and unbalanced.

fe old home page3.png

Icons/images for F.A.Q, Contact us and Blog don’t match and overall they don’t fit rest of design. The bottom navigation looked like a mid-fidelity wireframe with a poor combination of regular and italic font weights.

So we prepared a few questions for our client ahead of our kickoff meeting. We wanted to know exactly what the client wanted and how he wanted his brand to be presented to prospective customers.

Our first meeting was incredibly valuable for helping us define the client’s brand vision and point of view as they relate to his company’s goals. We conducted a gut test with the client and his team.

The conclusion was that they wanted a more sparing use of red, almost just as accenting color for their brand.

After our kickoff meeting with the client and with more knowledge about the product and his brand vision we started reviewing the UX team’s deliverables more thoroughly, particularly the wireframes and user personas provided.

EMPATHIZE WITH PERSONAS

There were two personas:

The UX team came up with possible solutions for these personas who were often too busy to learn about fire codes and to ensure that their buildings were fire code compliant. The primary goals for these personas were to ensure their businesses were successful and to make sure that their customers and employees were safe.

We now had a better idea of what and who we were designing for. We decided, after reviewing all the UX materials and talking to our client that we needed to ensure that the whole process was transparent, clearly understandable, and seamless in order to help the user achieve their goals quickly.


townhomes.jpg

Small business owner/tenant

man-working-at-desk.jpg

Property manager


VISUAL COMPETITIVE ANALYSIS

This project was a challenge for myself and my team because we had never designed anything similar before. We tackled this problem by trying to learn as much as we could about the field and meet competitors. We wanted to know how our competitors worked and how they implemented their UI elements and design.

We analyzed several competitors and recorded their approaches. Here are some of the key takeaways from our analysis of how our competitors were operating.

Total Fire and Safety Inc.   use high quality of photography to exude professionalism and trustworthiness, but the use of bold font weights throughout the site at times badly affected the site’s hierarchy and decreased their sense of professionalism. The use of red as the primary color throughout competed with other colors on many of their screens. Lastly, their use of photo carousels and striped patterns were at times distracting and didn’t match with the rest of the website’s UI.

Total Fire and Safety Inc. use high quality of photography to exude professionalism and trustworthiness, but the use of bold font weights throughout the site at times badly affected the site’s hierarchy and decreased their sense of professionalism. The use of red as the primary color throughout competed with other colors on many of their screens. Lastly, their use of photo carousels and striped patterns were at times distracting and didn’t match with the rest of the website’s UI.

Western States Fire Protection Co.   use heavy and bold typography weights which create a proper sense of hierarchy and draws the user's eye to important sections. They have a well-balanced combination of photography and illustrations that make the site look professional. The strong combination red and gray colors also complement their brand very well.  There were also some negative aspects to their design choices. These included the site being overwhelmed with the text. They also used three types of typography and were not consistent in their use throughout the website which made the site look inconsistant.   

Western States Fire Protection Co. use heavy and bold typography weights which create a proper sense of hierarchy and draws the user's eye to important sections. They have a well-balanced combination of photography and illustrations that make the site look professional. The strong combination red and gray colors also complement their brand very well.

There were also some negative aspects to their design choices. These included the site being overwhelmed with the text. They also used three types of typography and were not consistent in their use throughout the website which made the site look inconsistant.

 

We also looked at   Fredriksen Fire.   As seen above, this company used too much red. Red appears as a background, in the titles and over icons and images. The products section isn’t organized and looks too cramped with illustrations and text placed over blurry photography. The overwhelming amount of text made the screens appear overcrowded and potentially boring to users.

We also looked at Fredriksen Fire. As seen above, this company used too much red. Red appears as a background, in the titles and over icons and images. The products section isn’t organized and looks too cramped with illustrations and text placed over blurry photography. The overwhelming amount of text made the screens appear overcrowded and potentially boring to users.

TAKEAWAYS

After analyzing competitors within the market, we synthesized our takeaways into design principles. Our primary takeaway was to use both, photography and illustrations to balance professionalism with reliability. We also wanted to make a more well-balanced display of content information so that neither products nor services were ever left buried in other pages. Additionally, after looking at how our competitors were operating, we decided to make use of more negative space in order to space out information and keep the layout clean.


DESIGN PRINCIPLES

For my team and me it was very important to come up with design principles in order to establish a good base for our designs and to help lead us through the design process. Our three design principles were:

With us, you’re in control   We build confidence in users through well-known design patterns to keep them coming back   

With us, you’re in control

We build confidence in users through well-known design patterns to keep them coming back

 

Don’t worry, we’ve got you   We display content using clear and concise sentences while incorporating photography for added clarity   

Don’t worry, we’ve got you

We display content using clear and concise sentences while incorporating photography for added clarity

 

We’ll make it a walk in the park   We delight users with our simple forms and fun interactions while keeping a consistent tone of professionalism   

We’ll make it a walk in the park

We delight users with our simple forms and fun interactions while keeping a consistent tone of professionalism

 


STYLE TILES

After we analyzed competitors and came up with design principles, we started working on our individual design solutions. Creating style tiles was the first step that I made towards that solution.

After receiving our client’s feedback and having consultations with my creative director I made a decision to combine the second and the third style tiles. This was because the client liked the iconography and whitespace between elements on the second style tile, as well as the overall card layout. From the third style tile, he liked the clean design and sharp buttons. Our client did mention that he didn’t want to change the logo, name or font of his brand, so I returned to using the initial logo.


HIGH FIDELITY MOCK-UPS

After we finished presenting all style tiles to our client, we started making a plan of how we wanted the high fidelity mockups to look.

I decided to predominantly use blue for creating a professional feeling and combined it with orange because as the stimulating and eye-catching color.  One of our design principles was to build confidence in users through familiar design patterns in order to keep them coming back, besides using recognizable patterns I wanted to achieve this using a more orange color. Orange helps aid decision-making and increases confidence. Using high-quality photography and illustrations made the app look more professional and helped evoke greater feelings of trustworthiness.   The  Get your quote  section on the homepage was now visible first, and users could be able to go through the quotation process as soon as the page loaded. I used orange colors for CTAs to attract the user’s attention to important sections and actions throughout the site. 

I decided to predominantly use blue for creating a professional feeling and combined it with orange because as the stimulating and eye-catching color.  One of our design principles was to build confidence in users through familiar design patterns in order to keep them coming back, besides using recognizable patterns I wanted to achieve this using a more orange color. Orange helps aid decision-making and increases confidence. Using high-quality photography and illustrations made the app look more professional and helped evoke greater feelings of trustworthiness. 

The Get your quote section on the homepage was now visible first, and users could be able to go through the quotation process as soon as the page loaded. I used orange colors for CTAs to attract the user’s attention to important sections and actions throughout the site. 

With this design approach, I put most of the emphasis on content. I wanted to ensure that all information was visible and easily accessible. The use of a card layout created clear separations between different sections and smoothened the overall flow.  Orange decorated brackets I used to make the app more appealing and to lend the app more personality. Sometimes collecting information from users can be boring and long, so I decided to make the overall experience for users more pleasant. 

With this design approach, I put most of the emphasis on content. I wanted to ensure that all information was visible and easily accessible. The use of a card layout created clear separations between different sections and smoothened the overall flow.

Orange decorated brackets I used to make the app more appealing and to lend the app more personality. Sometimes collecting information from users can be boring and long, so I decided to make the overall experience for users more pleasant. 


WHAT USERS SAID

The next step, upon completing the designing of the screens was to conduct some usability tests. We wanted to know how first-time users felt when accessing the site. What captured their attention the most? Was there anything distracting them from completing their tasks? We wanted to know if we had designed the site well enough for users to be guided to the areas that our client wanted them to engage in and focus on the most. We went through each prototype screen by screen and asked them a variety of questions.

Examples of these questions included:

  • How did you feel when you first entered the site?
  • What are your thoughts on the color?
  • What is catching your eye on this page?

User feedback

The users tested expressed that they liked my color choices. They enjoyed the fact that the site was bright and at times pop with colors. They understood that the company was a fire extinguisher business, largely due to the photography used as well as the orange color used throughout.

home page user test.png

Users also expressed how they thought that the icons and photos made the site look professional. The Quote process was perceived as more transparent, and most users seemed to know what the next step in the process was going to be.

There was also some negative feedback that I took on board after testing with users. They mentioned how the logo colors and name of the app seemed confusing to them. The biggest confusion came from users not knowing why the .net was part of the app’s name. They asked what .net represented. I suggested to our client that they adapt the colors of the logo using the color palette that I had used for their site, as well as potentially removing .net from the company logo altogether in order to address the confusion experienced by users.

bulding types test.png

Users generally liked the photography on the building type screen as it helped them to recognize sections and choose the right category more easily. Having a clear separation between each section lead them to result in users being able to progress through the process much more smoothly. They liked the overall button consistency as it helped them to know each time what their primary call to action was.

Some users reacted negatively to the lack of space and emphasis devoted to the selection options for different types of rooms.

Building Details test.png

Tests revealed that the progress bar was very helpful as it gave them a clear understanding of where exactly they were in the form-filling process.

I used a light blue color for the property details, and some of the users thought that the readability was not very good. My creative director also had some feedback for input fields for specifying floor size and radio buttons. I needed to iterate to improve my work.

test.png

Users expressed that there was too much information on this screen. The UX team’s wireframes indicated that users liked having all the information on one screen. However, our usability test insights revealed the opposite. Users didn’t know where to look, and the screen was generally confusing for most of them.The notification text on the top of the page also received negative feedback. Users thought it unnecessary, and it said that it sounded threatening. Some stated that they felt forced to make a purchase.

I suggested to the client that they either remove the notification altogether or place it at the bottom of the page. I also recommended that they separate the contact details and scheduled technician visit onto separate pages to avoid user confusion and make everything more visible and understandable.


ITERATIONS

I began making iterations based on the user’s, client’s and my creative director’s feedback. I got the green light from our client to do what I thought it was best for the users and to improve upon their experience while using the website and quotation process. Our client wanted to move the get quote option from the navigation bar and to instead have it only present on the homepage, specifically over the hero image.  He also wanted the shop by category to be the first option for users after the hero image.

I made a few iterations, which instantly improved my final deliverables. I got great feedback from the users, client, and my creative director.

The content on my homepage remained mostly the same.  1. I adapted the logo colors using colors used on the site to make it appear more consistent and compact. I removed  .net  from logo name to avoid users confusion. All of this I did with client’s permission, so users didn’t have additional remarks about the logo.  2. Next change was  free quote  option. I removed it from navigation bar as client required.  3. To achieve the more modern look I removed big box over hero image and left the only text with input field and button.

The content on my homepage remained mostly the same.

1. I adapted the logo colors using colors used on the site to make it appear more consistent and compact. I removed .net from logo name to avoid users confusion. All of this I did with client’s permission, so users didn’t have additional remarks about the logo.

2. Next change was free quote option. I removed it from navigation bar as client required.

3. To achieve the more modern look I removed big box over hero image and left the only text with input field and button.

One of our most important design principles and also users feedback was consistency. So, I tried to follow that and changed  shop by category  the way to be consistent with rest of the site design. I made that section to be more appealing with new images and made button same as other buttons on the website.

One of our most important design principles and also users feedback was consistency. So, I tried to follow that and changed shop by category the way to be consistent with rest of the site design. I made that section to be more appealing with new images and made button same as other buttons on the website.

One more change I made is the footer. I put color on the footer to be the same color as the rest of the cards on the site. Feedback for this change was to footer looks more modern and clear.

One more change I made is the footer. I put color on the footer to be the same color as the rest of the cards on the site. Feedback for this change was to footer looks more modern and clear.

On  building type  screen, I didn’t change many things. I only changed color and small adjustments on bread crumbs, and I made a larger drop down selections because that part needed to be improved

On building type screen, I didn’t change many things. I only changed color and small adjustments on bread crumbs, and I made a larger drop down selections because that part needed to be improved

Property details  section I changed to be reliable and transparent. Instead of light blue, I put gray color for the text. I changed color on input fields and radio buttons, instead of dark blue I put gray. 

Property details section I changed to be reliable and transparent. Instead of light blue, I put gray color for the text. I changed color on input fields and radio buttons, instead of dark blue I put gray. 

I changed  review quote  to be more clear and understandable. The most important, this screen wasn’t overcrowded any more. Users liked new changes on this screen, because of more clear layout and the fact that notification text was removed and they felt this approach is more friendly.

I changed review quote to be more clear and understandable. The most important, this screen wasn’t overcrowded any more. Users liked new changes on this screen, because of more clear layout and the fact that notification text was removed and they felt this approach is more friendly.

contact details it.png

To make the whole process easier and less confusing for users I made pop-up modals over the review quote screen. So, users still could make the connection between the both the contact details page and schedule technician page and the previous step. I thought this was the fastest way for loading information than having to make an entirely new screen which would result in longer page loading times.Once users have completed providing contact details, they submit their information and progress to next step where they choose the date and time for the technician’s visit. You can see that next step on the screen below.

Schedule Technician Visit it.png

On the left side of this pop-up modal, there is a calendar where users were able to see which dates are available. This screen shows how it looks when the particular date is selected.

On the right side, I made a separate card with available or unavailable times for scheduling.

 

 

 


MICROINTERACTIONS


I thought lot about the importance of microinteractions and possible animations for the website throughout my design process. Little animations reveal a sense of companies caring about their users and their feelings by going a step further with their design to delight those using their services. I decided to include some animations. I wanted to create a hover effect on the building type section. On this section a hover effect causes the area to change color. Clicking on one of the options, causes the particular building type to be selected. 

Additionally, I decided to animate get quote button, to make it more eye catching for users and encourage and incite them into progressing to the get quote process.

My success screen had a small icon animation. I recommended including this animation to our client because that way Fire Extinguisher could show their users that they really care about them through going that extra mile with their design. All of these you can see on gif below.

FireExtinguisher-gif.gif

I encountered some problems exporting my Sketch files to Proto.io, and I needed to find another solution to make a prototype. I chose to learn Principle to make these animations. I had only a few hours to prepare something for the presentation. I gave my best, finished everything on time and was delighted to see the satisfaction on our client’s face upon being presented with our efforts. 

 


RESPONSIVE MOBILE CONCEPT

Once I completed my desktop version I decided to mock-up a few responsive mobile screens. It wasn’t a requirement, but I decided to go a step further with this project to show its true design potential and to my dedication to the work.

Once I completed my desktop version I decided to mock-up a few responsive mobile screens. It wasn’t a requirement, but I decided to go a step further with this project to show its true design potential and to my dedication to the work.

fe mobile responsive moc.png

The mobile version is almost the same as the desktop regarding content, but of course, adapted for small screens. The mobile homepage had a different navigation bar from its desktop version with options now concealed within a hamburger menu in the top left. I wanted to stay consistent with the desktop design layout on the building type screen with only a few minor amendments. I used a larger font size for better readability and arranged all options in a more vertical layout. The review quote screen mostly stayed the same as on the desktop. 


CHECK PROTOTYPE BELOW


STYLE GUIDE

The last step in my design process was creating a style guide. I created a style guide to provide a precise UI instruction for future designers or developers. You can see style guide here.


FUTURE RECOMMENDATIONS

There were some future recommendations that I had for Fire Extinguisher’s website as a whole. According to the feedback received from users, I realized that they didn’t like constantly being offered products and services’ while trying to complete their tasks on the site. Some users said the use of Is it really worth the risk? on some sections of the homepage where they were being advised on fire safety as being too forceful, and many perceived this as a fear enhancing tactic. I suggested removing or changing this type of language. I suggested lessening the amount of content on the homepage as users also expressed being overwhelmed by the amount of content.

I also suggested making the Shop by category to be the next section. Users are led to see on the homepage after the Get your quote section so that they can easily purchase items if that is the only reason for them being on the website to ensure that those looking for a quick transaction were not being forced to go too deep into the site.

I recommended that our client keep the quote form process page layout as they were laid out in the prototypes because users expressed the quote process on this layout was easier to navigate. Furthermore, high quality of photography, consistency and my color palette were perceived by the users that I tested with as more professional and trustworthy, and I suggested that this might be a good design direction to keep pursuing.


WHAT I LEARNED

Working on this project with two great teammates was a great experience for me. I enjoyed every single day collaborating with them and making decisions as a team. I learned how important is to be on a great team and how team support is like having the wind at your back particularly when working long hours.

I learned how to conduct user testing efficiently and how important is to design websites that are both functional while still being exciting and appealing to users. I also learned how to listen to the users, and infer their wishes and intentions and how hearing their particular needs allowed me to build a better experience for them.

We had only three weeks to complete everything, and I had some trouble using Proto.io, so I needed to react fast and learn another program to make microinteractions and animations that communicated my design decisions adequately to my client. I learned how to use Principle in a few hours, and that made me happy and very proud of myself. I realized how important it is to react fast and learn quickly in order to finish work on time.

My greatest learning curve within this project came from working, presenting and collaborating with the client himself. This experience, in particular, made me more confident in my skills of presenting and explaining my design decisions. I learned how to educate the client about wider aspects of his product and about the importance of the design process in creating meaningful user experiences.