Meet fire code requirements
Client: Fire Extinguisher Role: UI designer Tools: Sketch, Illustrator, Photoshop, InVision, Principle Timeframe: 3 weeks
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.
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.
Use of red and orange colors in some areas of the site appeared aggressive and unbalanced.
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.
Small business owner/tenant
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.
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.
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:
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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.
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.