A multi-step web form that delivers customized fire safety compliance assessments and quotes
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 www.fire-extinguisher.net, the consumer facing website of PyroWeb. He hoped this tool would reduce his sales call volume while maintaining a positive customer experience.
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:
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.
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.
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
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.
After talking to a variety of different customers, common goals and frustrations began to emerge. We identified four primary groups of users for PyroWeb:
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.
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.
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.
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.
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.
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.
To ensure that we were designing with our users in mind and grounded in research, we developed the following design principles to guide us:
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
In addition to our research, Axure prototype, and annotated wireframes, our team also delivered some recommendations for PyroWeb to implement going forward.
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.