HOUSECALL PRO - Increasing engagement

Role: Creative director, responsible for user research, interaction, UX/UI design, prototyping & testing and marketing - Built and led a team of 8 people


Web-Showcase-Project-Presentation.jpg

OVERVIEW:

Founded by ex-Qualcomm executives, Housecall Pro is a cloud-based field service management app for service professionals to automate workflows and streamline technician dispatch. This solution includes a native mobile app and complementary web portal and serves a wide range of industries, such as carpet cleaning, window cleaning, plumbing, electrical, HVAC, and more.

BACKGROUND:

I joined this startup as a design consultant to help identify and improve the design for Housecallpro.com. Within a few months I was hired as the creative director to lead the company's first major redesign. This laid the groundwork for many iterations that increased brand awareness and site's engagement rate.

As with any startup you are working many hours and wear multiple hats. Working here allowed me to have hands-on input at every stage of the design process: research, ideation, design, build and test. It also allowed me to work with company executives, build and lead a team, develop a design strategy and implement a design system.

MY ROLE: 

I led the first iteration of this project with the support of a visual designer and a developer. (Over the span of 2 years as the workload increased the team grew to 8 people) I worked with the executive team, product design, data and marketing team to develop a vision/brand for the company and was responsible for implementing it across all marketing collaterals, with the primary focus being Housecallpro.com. In addition, I also worked closely with the product team to adapt and implement the design system on the app to allow for a more cohesive experience for the user. 

 CHALLENGE: 

The company had grown fast and was at a point where they wanted to scale. The challenge was to increase engagement for Housecallpro.com.

MY APPROACH

Artboard – 12.jpg

DISCOVERY

COMPETITIVE BENCHMARKING: 

At the time Jobber and Service Titan were the two main competitors. Jobber was focused on field operations and Service Titan was catering to large companies with 50+ employees. Housecall Pro on the other hand was offering small to medium size business owners full control on operations, finances and customer management. 

Insight: 

  • Housecall pro had one message for all industries (HVAC, electrical ect) However, Jobber and Service Titan were catering to each industry separately. With further research we found that the motivations and needs of each industry are different. 

Artboard – 8.jpg
 

SALES CALLS AND DEMO:

With very little unprecedented data available about the Home service industry, I took it upon myself to research and understand the customer motivations and needs. I began by sitting through live and pre-recorded sales calls and demos to understand the users pain points and the conversion barriers.

Insight:

  • People had questions specifically to their field and weren’t interested in other home service industries.

  • Preferred talking to a person

013019-software-advice-v3-1-hero.png
 

ANALYTICS REVIEW: 

A good amount of data was available in Google analytics and Tableau. The challenge was sorting through the data and finding meaningful patterns. I worked with the data analytics team to extract relevant data. We were able to identify the location of customers and where they were concentrated, how big the company was and which industry was more prominent. This helped in prioritizing our workload.

Insight:

  • 70% of our customer base was in North America, 25% in Canada, 5% other parts of the world

  • Companies varied in size from 1 - 20+ people

  • There are over 50+ types of home services industries

Artboard – 6.jpg
Artboard – 11.jpg
 

HEAT MAPPING:

I studied over a 100 heat maps and scroll maps to understand engagement on the current site.

Insight:

  • Users were mostly engaging with the navigation for Login and/or going straight to pricing

  • Very little engagement with critical elements and less than 20% scrolled all the way. 

Artboard – 7.jpg
 

CUSTOMER OBSERVATION/INTERVIEW

I interviewed users from our top 8 industries. The interviews were conversational and tailored to the user. 

Insights: 

  • The blue color industry has been neglected and are thirsty for recognition and belonging to a community.

  • Hard working / Patriotic

  • A lot business are owned by baby boomers and not very tech savvy

  • Blunt and straightforward

  • Loved their trucks

  • Super busy and needed something to help save time 

  • Competitive within their category

Artboard – 9.jpg
 

USER TESTING:

Qualitative data collection was extremely important in this project. User testing was conducted frequently. Our initial testing confirmed our assumptions about the lack of engagement with the site.

Insights:

  • User found the navigation buckets confusing 

  • Lack of clarity of information on the homepage. 

  • User preferred short, straight forward copy 

  • User wasn’t sure if the product was right for them and didn’t think they needed all the features. 

Artboard – 14.jpg
 

SITE AUDIT:

Alongside analyzing existing data I did a site audit to understand :

  • how the pages are laid out and connected 

  • Where and how are the customers arriving to the website. 

  • What the action does the user need to take 

Insight:

  • Current navigation was based on the journey of the field worker and not so much the business owner. 

  • There were different CTAs for different pages that lead to the same outcome on onboarding a customer. (this was confusing)

Artboard – 2.jpg
 

STAKEHOLDER INTERVIEWS:

This project drastically affected multiple different areas of the organization, which at times had conflicting interests. I conducted interviews with representatives from Product, Marketing, Sales, Customer Support, and Executive Leadership to understand each part of the company’s unique requirements and concerns for the design. Cross Reference internal feedback and user feedback, helped prioritize the design changes, allowed me to get external teams buy-in and also balance the business needs.

Artboard – 10.jpg
 

OTHER FEEDBACK:

Housecall Pro had a facebook channel with many users. It provided a lot of unsolicited feedback. At times probably the most useful as users would share elements they found extremely frustrating. It gave us a great opportunity to identify and iterate on some of our design as we continued designing and building. 

Artboard – 5.jpg
 

DESIGN GOAL: To increase engagement and bring consistency.

S.M.A.R.T GOALS:  Once we identified our design goal I set up measurable goals focused on increasing site traffic, conversions and streamlining the design process.


 DESIGN

IMG_4079.jpg

AFFINITY DIAGRAM:

In order to streamline the design process and provide a cohesive experience for the customer we needed to redesign the web and implement a design system. We started by working together with the key stakeholders and mapping out the customer journey and the business ecosystem.


 

Artboard – 13.jpg

NAVIGATION: 

After understanding the journey we reorganized the navigation system and bucketed the information so its easy and intuitive to find and based on the users needs. I also worked with the stakeholders to identify a consistent CTA.

 
Artboard – 1.jpg

WIRE FRAMES: 

Once we had a solid direction for the design, I began to produce multiple variations of wireframes. We took a mobile first approach knowing that 80% of our customers would access the website via phone. I then put the designs in front of users and internal stakeholders for testing and feedback. This helped me narrow the design down to a single design framework, and move into visual design.

Artboard – 21.jpg
 

VISUAL DESIGN: 

At this stage we began to implement brand elements that I developed for Housecall Pro and build on that to develop a design system that will bring consistency across the web. At this point I worked with Ben, a new art director/designer on my team to create guides with input from the engineering team.

 CLICK TO SEE DESIGN SYSTEM

( pw: Housecall123 )

Artboard – 3.jpg

INTERACTION DESIGN:

In the past, designs were very static and felt staged. We used interactions to bring some life to the pages. We implemented video clips in hero areas, carousels to bucket information, hover states that revealed images or new colors to help engage the customer and draw them in the content.

Artboard – 15.jpg
 

EMPTY STATES: 

We wanted to keep the spirit of the company serious and bold and use empty spaces to bring a little bit of wit and fun.

Artboard – 16.jpg
 

ACCESSIBILITY:

Accessibility and device compatibility were important to us as 19% of the U.S population is disabled. The design needed to perform across multiple different devices by utilizing a fully responsive design and abide by the Web Content Accessibility Guidelines.

Artboard – 15.jpg

 DEVELOP

BUILD: 

We built and replaced pages on the web incrementally. Making sure that the business continues to run as normal as we implement design changes. I worked closely with the engineering team right from the start. It was helpful that our desks were in close proximity. However, my team and provided fully annotated designs to avoid any confusion.

Artboard – 19.jpg
 

QA TESTING: 

Ben (the art director on my team) and I regularly did Q and A after a page was shipped primarily making sure the design was working as intended on the web and mobile; and that it was consistent across multiple browsers (Safari, Firefox, Chrome and Internet explorer, were our top four)

 

A/B TESTING: 

A/B testing is something that was celebrated in the company and with the help of the engineering team we ran this frequently. Testing design elements, content placement and flows, allowing us to measure the impact of our design changes. At the launch of our new navigation and homepage we ran an A/B test to see how the old design performed vs the new. We ran this for a month before we committed to the new design. The numbers spoke for themselves with a 40% increase in traffic to the site and 20% increase in page engagement.

Artboard – 17.jpg

IMPACT

Artboard – 2.jpg

WHAT I LEARNED:

Roadmap to improve:

Knowing the amount of work put into the redesign. I was happy with what we achieved but not fully satisfied with the outcome. I still see a lot of potential for improvement in the aesthetics, interaction, copy and usability. But I was able to implement a roadmap that has legs to grow and improve. 

Objective approach:

Design at times can become quite subjective, however i learnt that setting up measurable goals right from the start and testing regularly can help take the guesswork out and focus on the needs of the user and the business. 

Team: 

I learned that our agile team worked great together. I found that even when we were in tremendous pressure we were able to deliver because we had built trust and were able to work with each other's strengths and weaknesses. 

Leadership: 

Everyone in the company had a stake in the site and the ability to manage those relationships and turn insight into action allowed me influence people by practice and elevate the value of design. For me that's priceless. 

 FINAL DESIGN

HOUSECALLPRO.COM

Artboard – 22.jpg
Artboard – 23.jpg
Artboard – 25.jpg