background

Pyroweb

Client

Pyroweb

Role

UX Designer

Pyroweb, a rapidly growing Chicago start-up, approached our team for a badly needed overhaul of their online quote and sales process. The project dealt specifically with fire-extinguisher.net, the company’s national, consumer-facing website.
  • Image

Marco Alcala, the founder and CEO, fields thousands 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 assist them in purchasing these products and services online instead. Our challenge was to help those responsible for fire safety in commercial and residential buildings feel confident in the knowledge that their online order would ensure compliance. We needed to take the confusion out of this daunting process.

Image

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.

Henrichsen’s Fire & Safety

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.

Image

Martin Mack Fire & Safety

Again, this website served purely as a brochure for the company. There was no online store, rather a list of services available and some contact details.

Image

Illinois Fire & Safety

This website was slightly more content heavy but still lacked the key functionality of self-assessment and purchasing products online.

Image

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 our patronage due to the size of the job.

Their apparent willingness to let go of smaller opportunities presents an opportunity for more agile companies like Pyroweb, who can take advantage of a high volume, low-value sales strategy. 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 Protection.

Who are the users?

Having gained a better insight into the domain and Pyroweb’s competitors it was time to understand fire code compliance from a user’s 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. After grouping insights to dig deeper into our users’ behaviour, we discovered some consistent trends between all these interviewees.

Image

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 it sorted.”

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. All of these people just want this issue taken care of.

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
background

Defining the problem

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.

Our interviews with potential and existing users were revealing. We discovered enough about their goals, frustrations and knowledge of the domain to frame our challenge.

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.

Image

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.

Image

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.

Image

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.

Image

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.

Image

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.

Image

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.

image

Proposed User Flow Chart

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.

Just get it done

Make the process quick and easy, regardless of prior knowledge. Maintain consistent communication throughout 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

Design should be designed to be accessible, understandable, and ultimately easy for these users to address their fire regulation needs without sacrificing the necessary level of detail required.

Speak my language

Language and design should be clear and conversational, mimicking the tone of Marco’s sales calls. 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

Visual and verbal emphasis should be placed on compliance certification of products and services throughout the experience. It can’t just be done by anyone. “We are the experts. Trust us.”

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.

image

Concept One: The Expert Guide

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

User feedback:

  • Progress feedback throughout the concept resonated with users
  • It felt too quick and simple to complete
  • Some testers felt there were too many pages
image

Concept Two: 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.

User feedback:

  • Users liked being able to input property square footage data
  • Business owners liked the professional appearance
  • Detailed and the amount was received positively
image

Concept Three: 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.

User feedback:

  • Users wanted to add multiple specialist rooms
  • They liked the examples and clarification under each visual
  • Contradictory feedback regarding the one page aspect
  • “I like having the detail of it covered here next to the question. It helps me know what fits our building.”
    Miguel
    Small Business Owner
  • “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.”
    Ivan
    Construction Consultant
  • “ 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.”
    Jane
    Property Manager

Convergence strategy

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.

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.

Image

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

Image
  • “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?”
    Annabella
    Church Manager

Usability testing discoveries

Users didn’t realize the process was stepped.

Language lacked clarity in some areas.

The form was overly complex and unwieldy.

Users felt they wouldn’t complete the process.

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.

Image

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

Image

Simplifying the form structure

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.

Image

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.

Image

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.

Image

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

Image

Future Considerations

After presenting our research and designs to Marco, we offered him some recommendations for which direction to take this product going forward which he gladly took on board.

Image

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.

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 to give Marco an idea of how the final product could look.

background

Design Learnings

What users say ≠ what they do

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.

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.

A prototype is just a prototype

We built our prototype in Axure, spending a lot of time developing functionality with input values and variables before the design had really been validated. I learned that a prototype should only be as functional and high fidelity as necessary to achieve the testing goals.