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

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.

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.

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:

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 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.

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:

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. 

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.

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.

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.

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.

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.

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.