UX | IxD | Content Strategy
A fire-safety compliance service where users input property details for a quote to address their fire-safety needs
PyroWeb, a Chicago-based startup that provides a fire-safety compliance products and services, wanted to convert a sales script read over the phone into a digital form process. Our client, Marco, had previously been conducting these calls, collecting the data to later input into a beta algorithm. He came to us in need of a way to decrease his time on calls and inputting these data points so he could grow the company in new markets.
Through research, usability testing, prototyping, and wireframing, we presented a viable and unique product to our client in three weeks.
As we conducted research for this project, we wanted to answer a question he presented during our kickoff meeting:
How can we take the confusion out of fire compliance?
We looked at the current market to see how they were tackling this question. We found that there were two types of competitors in the space - small local fire safety companies, and a few large national companies.
Smaller, localized companies had strong relationships within their community, but they lacked a strong online presence and did not offer any online quote process. The large conglomerates, on the other hand, had the online presence yet only had a number to call for quotes. They also specialized in larger deals. Smaller businesses reported having a difficult time getting a timely quote.
Before we talked to users, we needed to know what the current sales call was like - for both Marco and his users. This helped us pinpoint the parts of the sales script that could translate into our digital form.
From the calls, we learned that fire compliance needs are determined by:
the type of building
the approximate square footage (if it was larger or smaller than 3,000 sq ft)
the current equipment in the space
the date of the last inspection
But we didn’t know if our users knew this or had this information on hand. We also didn’t know how important understanding fire compliance was to our users. We sat down with small business owners, office space managers, building owners, property managers, general contractors and architects to find out.
As it turns out, not all of those users would benefit from a digital form. We found that each type of user had different needs.
Owners, architects and general contractors are frequently thinking about fire compliance and they already have a lot of knowledge on this topic. They already know the specifics of the equipment they need so going they don’t need something to help them figure it out. They said over and over again that they can just call Marco to place an order. These were not our users.
On the flip side, small business owners and property managers may know about their property but they don’t know how that translates into their fire safety needs. And they don’t always know their property specs or their needs. This is where we saw the opportunity.
Currently, business owners 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.
"I knew I was supposed to have something. I didn’t know what it was."
Our solution would need to follow these guidelines:
The insights from our research helped us determine these design principles to guide our decision-making. Our users wanted something quick, easy and to-the-point and we kept these in mind to develop three concepts.
We thought a form would most efficiently capture the data points we needed and aggregate them into a final quote. But we wanted to explore other ways of taking data points to determine a final quote.
We looked at three different industries currently tackling this aggregation method - health insurance, tax preparation, and car insurance.
These sites were accomplishing the task of collecting multiple pieces of information, even helping users recall data. We iterated on these designs and came up with three approaches - natural language, expert guide and visual one-page.
From our initial concepts, we learned that:
Both parties wanted more information in the final quote. They wanted to see how the quote was aggregated as well as a confirmation of their information inputs.
“I want to see the fire marshal codes that I’m meeting with this quote. How do I know I’m meeting all the regulations?”
They also need examples to clarify some categories. Our users aren’t familiar with the technical classifications of their property, so listing out examples or a brief description will limit confusion.
“I like having the detail of it covered here next to the question. It helps me know what fits our building.”
Though we need to keep the process simple, it can’t be at the expense of information. There are some questions that we just can’t eliminate due to the nature of the service. But we found that the beta form had questions that didn’t inform the quote. We needed to pare down to the essentials to minimize any potential drop offs.
“I’ve got a lot on my plate, so I want to know that I can do this quick… But I still need to see exactly what I’m choosing and getting here.”
Visuals also help simplify the process. As the heuristic of recognition rather than recall states, designers should minimize the user's memory load by making actions and options visible.
“I like that it’s made to look easy. The job is probably more complicated, but if I know I can do this with efficiency and ease then I’m going to choose that every time.”
With these insights, we mapped out the core quote details to simplify the entire process. We also strategized the visuals, where to incorporate confirmation call outs, and the examples needed for each question.
Before jumping into 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. We needed this structure because each question would build on each other, determining the flow and the final quote.
With the insights from our concepting, we determined to move forward with a visual one-page form, utilizing accordion panels to avoid cognitive overload. Users explicitly stated they wanted everything on one page. Yet we quickly learned that users may say one thing, but they really want something else.
“Yeah, see I would probably quit at this point.”
“I thought it was pretty overwhelming.”
So we had to pivot. In order to understand and address this drop off, I researched survey best practices and statistics. According to SurveyMonkey, questionnaires that took more than 7-8 minutes to complete had completion rates dropping anywhere from 5% to 20%. Our current prototype took an average of 24:49 minutes. The level of detail was exhaustive, causing users to prefer calling over this digital form.
On top of its lengthiness, the language we used wasn’t clear to our users. Some users didn’t realize we incorporated steps into the process and some users didn’t fully understand some of the questions and the final quote.
We determined there were a few questions we could cut and a few questions we could combine. We also incorporated conditional formats so users would only see what they needed.
This learning opportunity allowed us to move forward with a user-centered design. We incorporated a way to get confirmation of their property details as they progress through the form and restructured the questions to be more succinct.
Because users struggled to follow the steps and some didn’t even see the steps, we brought that feature above the fold. We also wanted it present throughout the process, with interactions to indicate where users are in the process.
Here’s how these screens evolved:
In our initial round of usability testing, we heard users say they were confused about why they had to list out all this information. They also wanted to reference the information as they went through the form. Additionally, we added the information aggregator in an effort to confirm those details.
Here is this section’s evolution:
Our quote page went through several iterations based on testing feedback. It needed to confirm everything users had just done in the form. It also needed to show how the quote is formed based on that information. And it needed to reinforce the safety measures that the equipment addresses.
Here’s how the quote page evolved:
With our final version of our prototype, we compared our first prototype to our finalized prototype and found that we:
Increased the completion rate by 50%
Decreased the average time of completion from 24:29 to 11:04
Though we’re not quite in that 7-8 minute range identified as the ideal timeframe, we’re much closer in our final iteration of the form. We also enhanced the quote aggregator and combined the scheduling page with the final quote page, which increased the likelihood of scheduling an appointment.
While mobile was not within our scope, we wanted to develop mockups of mobile screens for the developers. We wouldn’t be helping them develop an app, so we needed to determine the breakpoint for the web responsive site.
Also, having our design be mobile-responsive would answer a use case from our property manager user. Our research pointed to a specific use case where this user assesses the needs of their property while on site. Having something they can use in the moment would enhance their experience with PyroWeb and make it more likely for them to become a returning user.