pyroweb | alex.

Pyroweb is a provider of fire safety equipment and services. Marco, the owner of this rapidly growing Chicago start-up came to us with a very specific challenge. We had to design a new online quote and sales process for Pyroweb’s consumer facing national website, www.fire-extinguisher.net.

Marco fields hundreds of inbound sales calls every year from owners, managers and proprietors of residential and commercial buildings who rely on his expertise to help them ensure their property is compliant with local and national fire regulations. Unfortunately, these regulations are complicated, filled with jargon and difficult to locate for those responsible for maintaining fire code compliance. Marco asked us to develop an online process that would help reduce the number of calls his smaller customers make to him and help them purchase these products and services online instead. Our challenge was to help those responsible for commercial and residential buildings feel secure in the knowledge that their order would ensure fire code compliance. In his words, we needed to take the confusion out of this complex and sometimes daunting process.

Domain research

We set into our initial research with the goal of developing a deeper understanding of the entire quote and sales cycle for these products and services. We wanted to better understand the user’s needs and interactions throughout the process of becoming fire code compliant. Furthermore, we considered it vital to evaluate the level of knowledge the average customer had of fire safety products, services and regulations.

Fire safety occupies a subset of the entire property management and construction domain. Unlike in other traditional industries, where technological prowess has been harnessed to achieve huge advances in user and customer experience, we found that this field was a total dinosaur when it came to technology.

We discovered that there were two main types of competitor to Marco’s business. The smaller, independent contractors who had been in business for decades targeted localised audiences. Their websites would specifically emphasise their local connection in order to differentiate themselves from less personal, national operators. The vast majority of these websites had virtually no e-commerce presence and certainly no way to obtain a comprehensive quote online. Their digital experiences certainly left a lot to be desired, but a strong local reputation was keeping them in business. A typical example is Henrichsen’s Fire & Safety Equipment Co., as shown below.

Aside from the visual design of the site, there is no online store of any kind, let alone a process that assesses a customer's needs and suggests suitable products and services. This trend seems consistent across the board amongst all the local competitors. Martin Mack, Accurate, and Illinois were all guilty of the similar offences.

Then there were the national operators. These enormous companies had operations across the entire country. They offered a huge array of products and services. However, their sheer size meant that they couldn’t tailor all their services to meet every local fire code, especially following an amendment to the fire safety laws. This is where they lost business to the more nimble local operators. We phoned one company to request a quote for a typical order Marco would deal with and they refused due to the size of the job. Their apparent willingness to let go of smaller opportunities presents an opportunity for more nimble companies like Pyroweb, who can take advantage of a high volume of low-value sales. Most of these websites had a more polished look, with a robust e-commerce option and login options for regular customers. Examples included Cintas and Consolidated Fire.

User research

Having gained a better insight into the domain and Pyroweb’s competitors it was time to understand fire code compliance from the users’ perspective. We reached out to some typical examples of customers that Marco deals with on a regular basis, including property and construction managers, landlords, facilities managers and small business owners and tenants. We discovered some concurrent behaviours between all these interviewees.

People only think about fire safety when they have to think about it. Fire code compliance is not an enjoyable activity for anybody. Our subjects for user research included a landlord of multiple residential units, several business owners and a property manager. They expressed their disdain towards the entire process, whilst acknowledging that it is a necessary evil.

I just wanted them to get the job done. My expectation was for them to come as soon as possible and get the job done.

Most people contacted Pyroweb only after having been inspected or receiving a notice of upcoming inspection. This meant they were generally panicked or under time pressure to resolve their need at the time of contact. The initiation for this usually came when a fire marshal or insurance company had given them requirements to meet fire code compliance.

Some customers would call when they’re in the process of opening of new site or business. These people were aware that they required some sort of equipment to be fire compliant but generally lacked the exact knowledge to be able to choose the correct equipment themselves. They could be construction managers, property developers or architects. Again, there was a definite time factor at play in this case.

If we hadn't been able to get our license renewed we might not have been able to open that weekend.

There are varying levels of knowledge surrounding fire safety. Industry old-timers would have a rough idea what they needed but still want confirmation from a certified professional, whilst some small business owners would have absolutely no idea what, if anything, was required by law.

To summarise the key insights we gained from talking to users:

They must be triggered to call or address fire safety
They don’t always know their property specs or their needs
They know they need it, so they just want it done
Their roles determine their needs

All of these people wanted one thing. They just want it taken care of.

Defining the users and their problem

Our interviews with potential and existing users were revealing. We discovered enough of about their goals, frustrations and knowledge of the domain to frame our challenge. Business owners and tenants 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.

We categorised Marco’s customers into four types, rather than individual personas. We felt that users types would be more effective than personas in this project because of the functional nature of this transaction. There is very little choice or personal input in the process of ordering fire compliance products and service. Rather, the differences between user types are more situational and we felt that by using personas we would be including redundant information in our design process.

There were two types of experienced industry professionals.

The Property Owner or Architect’s goal was to avoid fines, fees, and closure due to fire code violations. He usually helped tenant complete the process by connecting them with a service provider. This type of user wanted the job done done quickly and move on. Their main concern was the safety of tenants and mitigating the risk of liability.

The Construction Contractor provides adequate safety for his employees on site. The main motivation for this type of user is to ensure the order received matches the construction site health and safety specification and order sheet.

Both of these users are an important part of Pyroweb’s business model. They generally place high value and volume orders but their prior knowledge of the industry affects their approach when it comes time to purchase. They are busy and often away from a computer when placing orders for fire safety products.They would rather call someone to talk through their order and develop a relationship with the vendor to possibly acquire a better price. Obviously, this is not possible through an automated online process. We also felt that it was overzealous to try and design a product that would be highly effective for all user types in 3 weeks. Instead, we wanted to create something that was extremely helpful for the more novice user base, which we hope Marco will build upon and expand in the future. For these reasons, we chose to focus on the Small Business Owner and the Property Manager. Marco was happy with us choosing to focus on these user types because they constitute a disproportionately large percentage of his telephone sales time in relation to sales revenue.

The small business owner’s primary motivation was to keep their business open. They wanted to keep employees and customers safe and avoid fines and fees from a pending fire safety inspection. They want to get their fire compliance resolved as quickly and painlessly as possible.

Their frustration came from wasting an excessive amount of time. Already overburdened with administrative duties, trying to ensure fire code compliance is just another thing to deal with. Furthermore, they often don’t even know what they need. They often lack the personal contacts to solve this problem have to research online themselves.

Existing businesses have to gather their property information and check their inspection status before even scheduling an inspection. Then they have to check the state of the current equipment before searching for companies like Pyroweb and calling for a quote. It is only after running through a sales call that they can actually schedule and prepare their inspection.

New businesses have to visit the business licensing office and register their business employer identification number and department of revenue number before applying for business licenses and permits. After paying the required fees they can schedule an inspection from the fire department. After that is done, most users search online for a reputable company before calling for a quote and preparing for their inspection.

Property managers need to maintain fire code compliance to avoid fines, fees, and closure due to fire code violations. They want to help tenants complete connect with a service provider like Pyroweb but lack the confidence that tenants complete this task without their help. They don’t have time to deal with delays and finding a good price is important to them. The constantly changing fire codes are a huge burden for them.

The process for ensuring fire code compliance is long and tedious enough for every type of customer before they have even called Pyroweb. We needed to make sure that they could move through the process as painlessly as possible.

Being present in sales calls

One of the most valuable methods of research we conducted in this project was the contextual inquiry we performed with Marco. We sat in on 5 sales calls which gave us insights into the process that we had not fully understood before. We were able to hear the exact concerns of users and what kind of questions would cause friction during the process. After the calls, we debriefed with Marco and clarified a few other blurry areas. Firstly, we needed to nail down exactly what information was required for Marco to accurately recommend equipment using the algorithm his data engineers had designed. They required exact square footage, stairwell and storey counts as well as confirmation of a basement. Details about the existing fire safety equipment were also necessary to establish the current state of compliance and to recommend upgrades during the process.

Using the data we collected we began designing a user flowchart which essentially aimed to replace the sales script that Marco uses during his calls. This visualisation allowed us to decide exactly what questions would need to be included in the online process and how they would need to be structured and ordered.

Guiding our designs

With that in mind, we put a lot of thought into our design principles for this project. We wanted to use them to build trust, authority and a sense of simplicity with deliberate design decisions throughout our product.

Our concepting process

We began ideating with our design principles at the front of our minds. After profiling potential users and mapping their current journeys we began concepting. During the concept testing process, we wanted to determine what elements of our designs would resonate with Pyroweb users. We found new users to put concept tests in front of in order to avoid bias. This time, we focused solely on business owners and property managers. Some of them had ordered fire safety equipment before while others were totally new to the process. We were careful to understand what users were feeling as they went through each screen. Whilst crafting our concepts we made sure we aligned the design with our design principles. We each designed one concept to test.

Concept 1: The expert guide

A guided form that walks users through the quote process, mimicking a sales call with Marco

Feedback

The depiction of progression throughout the concept resonated with users
Users felt this concept looked quick and simple to complete
There was some confusion with the fire marshal character. “Is he part of the branding now?”
me testers felt there were too many pages/screens

Concept 2: The natural language form

A natural language form that allows users to pick and choose the qualifiers that best describe them and their property in a fill-in-the-blank format

Feedback

Users liked being able to input data on the property square footage section
Business owners liked the professional appearance
Users wondered what the categories would be for each dropdown menu
They also liked that the final quote was detailed and the amount was very apparent

Concept 3: The Visual One-Page Quote Form

A one-page form that guides users through the quote process using imagery to depict categories. This was the concept I was responsible for designing.

Feedback

Users wanted to add multiple rooms and items such as kitchens and storage rooms
They liked the examples and clarification under each visual
Contradictory feedback regarding the one page aspect

Concept Testing Synthesis

Users want more information on their final quote

I like having the detail of it covered here next to the question. It helps me know what fits our building.

Users need examples to clarify categories

I like having the detail of it covered here next to the question. It helps me know what fits our building

Users want a simple process, but not at the expense of information

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 help users feel like the entire process is quick and easy

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.

Overall, our concept testing process showed us that a form that felt complicated was frustrating for users and that was something we really wanted to address.

Convergence strategy

We reflected on user behaviour and reactions during our concept testing and synthesized some of the data into requirements for our product. It was important to include more information on quote page to understand the products and services they had ordered. Imagery and details together help assure users that they have the right information so we were keen to add visual aids throughout. We needed to balance simplicity and comprehensiveness. Users had to feel like the process was not too arduous whilst being confident that the information they were being asked to provide was comprehensive enough to formulate a quote. Visual indication of user progress through the form helped them feel like the quote process was quick.

First attempt at prototyping

We combined all of the most successful features into an initial working prototype. The process was quick and messy, but our product was complete enough to perform initial tests. It could be described as a simple visual form that simplifies the fire code quote process but still informs users of the details of their quote. During concept testing, users had indicated a slight preference for all the information to be displayed on one page. Based on this research, we used structured everything within an accordion style stepped process. After a very quick turnaround, we put our product in front of users. We arranged tests with small business owners and property managers, the key user types we had decided to target in this project. The first stumbling block for users came when they had to enter the number of fire extinguishers they had on each floor. This confused them. Users weren’t sure if the floor should include any equipment in the hallway.

Some of the responses we received showed us that we had not got it right this time. Users were confused by the fire extinguisher count. Some didn’t know if the entire floor included the hallways, others said they don’t use their hallways so they don’t know. Then, on the service and installation question page, it was just too much to ask a user to provide so many inputs.:

The steps could be a little better. As you scroll down you figure it out. Maybe just having a little bar at the top.

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?

So what did we get wrong?

Users didn’t realize there were steps to the process until the end
Language needed to be clearer
There were areas of confusion surrounding language
It was TOO comprehensive
Users felt they wouldn’t take the time to complete

Rethinking our designs

We went back to the drawing board with our design. For me, this was a great lesson in not always listening to what your users say they want, but rather observing their process and deciding yourself what they need.

We started by reducing the size of the main display. It was too large and users were getting lost in the page. We paired it down and added a sidebar to collect user inputs which would offer them feedback as they progressed through the form.

The second stage of the form is where most users got frustrated during the first round of testing. It was overwhelming, complicated and tried to cater to every type of user, rather than the property managers and small business owners we were supposed to be targeting. By simplifying the inputs, we excluded the more seasoned professionals such as construction and facilities managers, but we improved the user experience for our target groups by a substantial margin.

The one page, accordion structure seemed like a nice idea in theory, and it’s something that our users had indicated they would like in our initial research. However, when it actually came to putting it in front of them this structure was confusing and jarring. We reorganised the entire form structure into a stepped, paginated process. User feedback ratings should that this structure was far more easy to follow and understand. Our test participants knew immediately what area of the form they were currently in and how many sections were left to complete.

Designing for a smaller screen

Whilst designing mobile screens was not part of the scope of our project, we decided to mock up a few key screens to show how elements could be translated from the desktop version to a smaller device. The use case for mobile is particularly compelling for our property manager persona. Our research showed us that this type of user commonly realises their tenants or clients are breaching fire code when they are visiting the property for a different reason. By having an easily navigable mobile form, the property manager could order new products right there and then without worrying whether or not the tenant would do it later. This is an area where Pyroweb could really gain a competitive advantage over other service providers in the area, whose mobile experiences were not the most pleasant.

From left to right: Henrichsen, Martin Mack and Illinois Fire © Safety all give users an awful online experience. The text is barely legible, input fields and buttons are unusable and mobile was clearly an afterthought for these companies.

We came up with some designs that were more suitable to mobile screens. They show the key information from the desktop interface, while allowing for easier input on smaller screen.

Future Considerations

We offered Marco some recommendations for which direction to take this product going forward which he gladly took on board:

We advised him to conduct a rigorous audit of his sales process. If possible it would be beneficial to reduce the steps necessary to give an accurate quote to as few as possible. To maximise conversions it would be necessary to decide which information was absolutely essential to include.
Depending on the inputs users enter during the process, it may not be possible to offer a quote. We encouraged him to allow users to continue through the form even in those cases. With the correct content, users who couldn’t pass through the form could be converted to a closed sale with a simple phone call to clarify the missing data points.
A big part of Pyroweb’s business strategy was to upsell additional products that weren’t necessary under fire code but could minimise loss of or damage to expensive equipment in the case of a fire. We urged Marco to carefully think about where to place the upgrade options to minimise the negative on his users’ experience.

Pyroweb is currently working with a UI team to bring our user research and design to life and plans to implement our work by Q3 2017. By that stage we hope to see users able to go through this entire flow on the fire-extinguisher.net website. Marco was very happy with the and had already showcased our prototype to his business partners. The week after our project finished Marco was pitching Pyroweb to venture capitalists and used our product as part of his company expansion showcase.

Where I grew as a designer

Don’t always listen to what users want
It is our job as designers to learn what users and businesses are currently doing and evaluate how we can make it better through research, design and testing. We made the mistake in this project of listening what users said they wanted during concept testing and following it too closely.

Be proactive with clients
Marco was a great client but he is an extremely busy guy. There were times when we felt he might not have understood the severe time crunch this project was under and it really helped to be proactive and communicate with him immediately when we needed something. Quite a lot of the research and testing participants he had organised for us ultimately fell through. Instead of waiting for him to find new people, we found them ourselves.

A prototype is a prototype, and nothing more
We built our prototype in Axure for this project. Initially, we spent a lot of time trying to get it to be fully functional with input values and variables before the design had really been validated. Because we had to pivot quite drastically to a different direction, this turned out to be time that was poorly invested. I learned that a prototype should only be as functional and high fidelity as necessary to achieve the testing goals.

UI concept

Although high fidelity screens were not part of the project brief, I designed a desktop and mobile screen using some of the Pyroweb brand colours.