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.
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.
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.
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:
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.
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.
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.
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.
RESPONSIVE MOBILE CONCEPT
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.