The problem

Marco, the owner of Pyroweb, had recently launched his business with the goal of “taking the confusion out of fire safety compliance.” His business had experienced strong growth, but he was becoming overwhelmed by the number of sales calls he received. At the time, Marco was fielding the majority of inbound sales calls. Customers relied on his expertise to ensure they were purchasing the correct products and services in order to meet the fire code requirements of their building. 

Marco wanted to develop a personalized fire code compliance assessment and quote tool for, the consumer facing website of PyroWeb. He hoped this tool would reduce his sales call volume while maintaining a positive customer experience.

Kickoff meeting with client to discuss project goals, scope, and current state

Understanding the landscape

Our team had no previous experience in fire code safety, so the first step in our process was diving into research. We wanted to develop a deeper understanding of the entire sales cycle, from customer awareness to a completed sale. We also wanted to understand the user’s needs and interactions throughout the process of becoming fire code compliant. Finally, we felt it was important to know an average customer’s level of expertise and understanding of fire safety products and services, as well as the local fire codes.

We learned that fire code regulations vary by location, but more importantly by the type of building and business. In order for fire safety companies to give an accurate quote, they need to collect specific information about the building, existing equipment, and type of business. This includes information such as:

  • Type of building
  • Number of floors
  • Square feet of each floor
  • Number of hallways
  • Length of hallways
  • Number and type of current extinguishers
  • Date the extinguishers were last inspected

Businesses are required to maintain fire code compliance by updating service tags on fire extinguishers annually, as well as ensuring the space meets all requirements before opening to the public. Fire marshals conduct periodic inspections to check fire code compliance. If businesses are not up to code, fines, fees, or even business closure can result.

By conducting a competitive analysis, we found that there were two broad types of competitors in the space, small local fire safety companies, and a few large national companies. Smaller, localized companies were typically in business for decades and had strong connections in their local communities. But they lacked a strong online presence and did not offer any online quote process.

Small, local competitors lacked a strong online presence.

There were also a few large companies that offered fire safety products and services nationwide, such as Cintas and Consolidated. These companies had more modern websites, but none had an online quote option, only a number to call for a quote. They also specialized in larger deals. Smaller businesses reported having a difficult time getting a timely quote.

Empathize and Define

After getting a better understanding of the domain and competition, we wanted to understand what the process of becoming fire code compliant was like for customers. PyroWeb put us in touch with current and former customers with whom we conducted in-depth interviews. The first thing we learned was that customers only think about fire safety compliance when they have to. There is usually an external trigger that prompts their online search and ultimate call to Pyroweb. The most common external triggers we identified were:

We also found that there were varying levels of knowledge surrounding fire safety among potential customers. While some customers knew exactly what they needed, others “only knew [they] were supposed to have something, but had no idea what.”

But overwhelmingly we discovered that fire safety compliance was perceived as a hassle in the eyes of customers. Non-compliance was a scary prospect due to potential fines, business closure, and public safety. Users just wanted to be brought up to fire code compliance as soon as possible and then to move on with their lives.

“I just wanted the job to get done. My expectation was for them to come as soon as possible and get the job done.” - Small business owner
We conducted a contextual inquiry by sitting in with Marco as he fielded sales calls.

Contextual inquiry

Our team sat in on actual sales calls with Marco in order to develop a better understanding of the current sales call process. This was one of the most insightful steps we took to understand our potential users. 

We heard that callers often didn’t know the specifics about their space, but Marco was able to talk them through to get enough information to give a quote. He also put callers at ease who were often times stressed about upcoming inspections. The callers left confident a technician would come out and they would pass the inspection. We were able to hear the exact questions Marco asked and typical responses from customers.

Working to identify insights from in-depth user interviews.

After talking to a variety of different customers, common goals and frustrations began to emerge. We identified four primary groups of users for PyroWeb:

We initially identified four potential user types.

Of these four, the Property Owner/Architect and Construction Contractor stood apart from the other two groups because they often knew exactly what they needed. The process of becoming code compliant was familiar to them as it was a recurring event in their jobs. Therefore, we decided the Owner/Architect and Construction Contractor were less likely to need a tool to evaluate their fire safety needs and give a quote.

We narrowed down to two main users.

In contrast, small business owners and property managers often had not gone through this process before. Their primary goals are to get their business up and running or to keep the doors of their business open. They want to avoid fines and fees but also want to to keep customers and employees safe. These customers were already overwhelmed with tasks on their plate and did not have time to spend on learning fire codes to ensure their building was compliant.

While small business owners and property managers shared a lot of the same characteristics, they also differed slightly in their journey in obtaining fire code compliance. Our team developed customer journey flows to help illustrate these differences.

Customer journey flow for new business owners.

For new business owners and tenants, fire safety compliance is sandwiched between a host of other administrative duties in preparation for opening the business. They have been told they’ll need to pass a fire safety inspection, but are often unfamiliar with the specific fire codes in their area. They’ll conduct a search online and read through the websites of the first results and then call for a quote.

Existing business owners' customer journey flow.

For existing businesses, there is often fire safety equipment already in the building. Not only do they need to ensure they are meeting requirements overall, but also need to ensure that the existing equipment has been inspected and retagged within the past year.

Property managers are often helping their tenants become fire compliant.

In contrast to business owners, property managers are not always in the space when they call and occasionally don’t have immediate access to the building they are inquiring about. But they want to get a quote for their tenant and then pass off the contact information.

Design Direction

From our in-depth interviews and customer journey maps, we were able to identify the following primary problem for our potential users:

Business owners/tenants and property managers don’t feel confident in their knowledge to purchase the necessary products and services to ensure fire safety compliance and they need to be expertly guided through the process.

Design principles

To ensure that we were designing with our users in mind and grounded in research, we developed the following design principles to guide us:

Just get it done

Remember the customer is often under stress due to an upcoming inspection. Make the process quick and easy, regardless of prior knowledge. Maintain consistent communication through confirmation and reminders until the service is complete. The customer should feel confident and trust they will meet fire code on time and within their budget.

Universal but specific

Ultimately, we are serving a wide variety of users - business owners, property managers, office managers, contractors, etc. - as well as experience levels. The product should be designed to be accessible and understandable for a novice user who is unfamiliar with fire regulations without sacrificing the necessary level of detail required for more advanced users.

Speak my language

Language as well as design should be clear and conversational, mimicking the tone of Marco’s sales calls. It’s also important to customize the experience per user - for example, business owners have a different vocabulary than contractors or property managers. The design should communicate the importance of efficiency, reliability, timeliness and professionalism - all of which Marco’s users deem essential.

Trust us, we're the experts

Most of our users are not overly knowledgeable of fire safety regulations and trust us to ensure their compliance with the codes. Visual and verbal emphasis should be placed on compliance certification of products and services throughout the experience.

Designing, Testing, and Iterating

Keeping our design principles in mind, our team worked to develop as many solutions as possible. We eventually settled on three concepts. We designed a few key screens first on paper and then in Sketch to test with potential customers.

Concept 1:
Natural Language

The first concept our team explored was a “natural language” form that guided the user through the quote process by having them complete sentences with drop down options.

Concept 2:
Visual One-Page

We also worked on a concept we titled “visual one page”. In this concept, the entire quote form was displayed on one page with image based tiles.

Concept 3:
Expert Guide

In the third concept, the user was guided through the quote process by a guide. Using conversational language, questions were presented one at a time in short digestible chunks. The goal was to translate the experience customers’ got on a sales call with Marco to a digital platform.

Concept testing

We recruited business owners and property managers to test our three divergent concepts. In these tests, we focused less on user flow and functionality and more on the overall idea and screen layout behind the concepts.

We identified some overall takeaways from our concepts tests. We learned users:

  1. Wanted more information on the final quote page
  2. Liked imagery and additional details to reassure them that they will pass inspection
  3. Preferred a balance of simplicity and comprehensiveness
  4. Reported that they liked the “all on one page” layout

Initial prototype and iterations

Using these takeaways, our team converged on a single concept and designed an initial prototype. Before starting to design the prototype, we used our research to develop a detailed user flow. This included where the user would start the quote process, each major section, and the questions that would need to be asked in each.

Having this flow gave structure and purpose to our designs and ensured all important screens were included.

After sketching up some initial designs, we decided to build a responsive, accordion-themed quote form. We chose an accordion design because users stated they liked the one-page form, but we didn’t want to overwhelm them with all the questions and content at once. We wanted to break the form up into digestible chunks of information. In our design, questions would collapse and expand as users input information.

We chose to build the prototype in Axure due to its more advanced interaction functionality. We envisioned a prototype that responded to user's previous inputs.

Existing equipment section in initial design.

The first prototype was separated into four main sections: Building Type, Building Details, Existing Equipment and Quote. As a user finished a section, it would collapse and the new section would take over the screen.

Users were overwhelmed with the amount of information they had to enter on certain questions.

We developed a test plan and tested on users. The results showed there were significant usability issues with the initial prototype. Some of the key critical feedback we received included:

  1. Users felt lost in the process because even though the four main sections were numbered, all sections were not visible when one was expanded.
  2. Users were overwhelmed with the amount of information being displayed, especially if they indicated they had a larger building.
  3. Users were unsure their responses were collected accurately because previous questions were no longer visible without clicking on previous steps.
  4. Users wanted more information on the quote page.
It asked me all these questions and they’re still going to send someone out. Why did I waste my time going through all of that when I’m paying you to come out to my property already? - Small business owner

This was a great learning opportunity for our team. We whiteboarded all the above reasons why our first prototype had failed, and placed those alongside user quotes from testing. Then we started redesigning from scratch.

Our first decision in the redesign was to break up the form into four distinct pages with a progress bar always visible at the top. This was to improve user wayfinding through the form, since users reported they felt lost in our first prototype. 

First Prototype

Second Prototype

Building type section, first prototype vs second prototype

We also introduced an always-present tile on the right side of the form titled “Property Details” that would dynamically record the user's inputs to reflect their answers. This would help put users at ease that information is accurate and help reduce errors.

First Prototype

Second Prototype

Building details section, first prototype vs the second prototype

This time we focused on designing each question in its own individual card format. Information grouping and content chunking will help increase user's ability to process information presented. It also provided visual consistency and easy customizability for PyroWeb. Questions could be added or removed in each section at a later date.

Another important change was reducing the overall number of questions in the form. This was a difficult decision because it could potentially lead to a less accurate quote for larger spaces. But after discussing with our client and reviewing our research, we realized it was the smaller budget calls that were overwhelming their sales operation. These smaller sized customers had the most need for the tool we were building so we decided to focus on developing the best product for them first.

First Prototype

Second Prototype

Quote page, first prototype vs the second prototype

On the quote page, we included a detailed explanation of all the products and services the customer needed to be code compliant, and what was included in the quote.

Using our second prototype, we again tested on potential business owners and property managers. This time, the testing results were significantly more positive.

  1. Overall, testers reported that the form seemed “simple and straightforward.”
  2. They reported they liked how they could see where they were in the form with the progress bar, as well as their property details as they entered them.
  3. They liked being able to see their property details on the quote page and what the quote included.
  4. Finally, average time to complete the form was significantly reduced.

Final Designs

Our final design built upon the changes we implemented after initial testing using insights from the second round of testing. We also redesigned the landing page as a starting point for the quote flow. 

While PyroWeb requested we use only a small section of their current page for the free quote CTA, we presented the new landing page alongside testing results that demonstrated users were distracted by the number of clickable paths. Upon seeing this, the client agreed that the landing page redesign was a more effective solution.

Landing page redesign that was adopted by our client.

We combined the scheduling page and the quote page in the final design. This would help prevent user drop off between receiving a quote and scheduling an appointment. And also would provide a more seamless user flow based on our user tests.

Combined quote and scheduling page in final design

We also created wireframes for key mobile screens. Users would potentially have to check tags on existing fire extinguishers, so it was important to ensure the form was fully responsive.

Results and next steps

In the end, our team was able to deliver a complete working prototype of the entire quote flow, including a redesigned landing page and a confirmation email to further instill trust after the appointment was scheduled. 

PyroWeb was thrilled with what we were able to accomplish in three short weeks, with Marco exclaiming “this is better than I could have imagined” at the end of the presentation. He plans to use our prototype and wireframes to help pitch to investors. Additionally, our work on PyroWeb will be implemented by a UI team later in 2017.

Presenting final designs to client.

In addition to our research, Axure prototype, and annotated wireframes, our team also delivered some recommendations for PyroWeb to implement going forward.

  1. Test the performance of the form using Google Analytics once it is live. Look for areas where customers are dropping off or spending more time.
  2. Once these areas have been identified, A/B test different solutions. Try different question variations or changing the order of questions. Our testing suggested our flow was effective, but further testing and refinement will definitely be needed.
  3. Emphasize to the incoming UI team that trustworthiness is extremely important to users. They are often stressed about upcoming inspections and need reassurance. This will be an important consideration as the team works to skin our wireframes.
Our final prototype will help significantly reduce sales call volume by delivering personalized assessments, quotes, and scheduling online.

Lessons as a designer

My biggest learning experience from this project was the importance of rapid prototyping. We invested too much time on developing complex Axure functionality in our initial prototype, which we then had to redesign from scratch based on user feedback. By decreasing the time spent on the initial prototype and including a few more rounds of testing, we could have arrived on our final design more efficiently. 

One thing I think our team did well was to identify problem areas based on user feedback and determine a redesign was required. Our second round of user testing supported this conclusion and the final product was significantly improved because of it.

I also learned how to manage client expectations and constructively challenge client assumptions. Our client was unfamiliar with UX and our design process. During the kickoff meeting as well as each post-sprint presentation, we included an explanation of our entire process, what we had done, and what we would do next. Because of this, our client understood the tight timeframe and was more responsive. 

We also pushed back on the assumption we would have a small area on the homepage for the CTA to our quote form. We designed our alternative and presented user testing results that supported our design. In the end, the client preferred our landing page design and plans to use it for the final product.