Weather app image
Weather app image
Weather app image

Introduction

Introduction

Introduction

This project was to launch a new Heating Repair Service from scratch, for BOXT.

At the time of this project in 2021, BOXT only offered new boiler installation, not repairs. We saw that a high percentage of users in the “my boiler is broken” persona segment usually exited the funnel before checking out. Paying £2,000+ upfront to an online company to replace your boiler is a daunting thought for a lot of people, so a <£100 repair could be a lower barrier to engage with the brand.

We knew from research that usually the first port-of-call for someone when their boiler breaks was to enquire to have it repaired. Our installation engineers were capable of repairs, and carried these jobs out for other companies, so there wasn't an operational overhead of re-training engineers for repairs.

With repairs we would make less money, but it would give a person with a broken boiler a lower barrier to entry to becoming a BOXT customer, and it would enable us to show our value and build brand loyalty. Once that customer came to replace their boiler (or other product) we would hope they would think of BOXT.

Timeline

Approx 5 months, whilst working on other projects.

My contributions

I was Product Design Lead (UX) on this project, working alongside a Product Manager, Product Designer (UI focus) and a scrum team of engineers and QAs. I was responsible for early research, defining the service map, user journey, UX Design, prototyping, user testing, and conversion rate optimisation (CRO).

After a successful launch I worked on iterations of the journey, as well as working on a version of the journey amended for a partnership with Google, to enable Google Nest Learning Thermostat customers to book repair visits for their broken heat links.

Business goals

  • Increase revenue through repair jobs

  • Acquire leads for boiler installations from repair jobs

  • Reduce the cost per acquisition (CPA) for boiler installation sales

  • Build brand loyalty with customers

Impact

Impact

Impact

KPIs taken after new service had been live for one month:

CVR vs installation journey

+180%

Installation CVR from repair leads

+69%

Margin per repair job

+23%

Cost per acquisition (CPA) for installation sales

-31%

TLDR

TLDR

TLDR

This case study is VERY LONG, as I have shown a snippet of most parts of the process. The above introduction, impact and the below screens should show enough of the goals, results and end UI, if you wish to stop reading now…

Discovery

Discovery

Discovery

This project featured lots of upfront comparator analysis and research, and lots of service design as we had to design the customer experience, the engineer experience, and the internal admin system user journeys.


Product Canvas

We kicked off the discovery with a UX/Product canvas, where we collectively discussed: target customers and their needs, what the solution could be, what competitors are doing, business goals, and what revenue streams there could be. This is also where we defined what our MVP would be, which was enabling customers to book a repair visit for NEXT DAY boiler repairs. During this exercise we also defined what the next iteration would be, which would be On demand same-day boiler repairs, with engineer tracking, similar to Uber, Deliveroo etc.

Comparator/Competitor research

During competitor analysis I discovered a few negative CX trends that we wanted to mitigate with our journey:

  • Competitors didn’t give a realistic fixed priced quote - Prices included a range “depending on the repair”, or a large payment that was 5 times the cost of a basic repair.

  • Repair lead times were very far away - There were no repair slots available under a week wait time.

  • A customer couldn’t select a time slot for their repair - A repair can take as little as 30 minutes, and with modern services customers expect to be able to choose time slots.

One of BOXT’s unique selling points (USPs) was that we gathered lots non-personal information up front to give a customer a fully transparent quote, and enable them to choose an engineer visit date, all before we even ask for any personal contact information. We wanted to bring this USP across from our industry-leading installation journey and enable a customer to obtain a quote before having to enter their email or phone number.

Service map

As a UX/Product Designer you need to be able to design at a service-level, not just a a front-end user experience. The BOXT platform has a bespoke backend system, and whenever you design a customer journey the engineer & admin back-office experience needs to be considered. The next step was to design the service map to define the customer journey, the business and back-office rules, and then Engineer App experience (the users that will be accepting and carrying out the repair jobs).

I mapped out the service map in Miro, which was discussed with multiple stakeholders, and iterated until we had a final version. See the service map below. This is intentionally zoomed out to show the scale of it, however if you would like a more in-depth overview I can show this during an interview.

Designing the Screener

Designing the Screener

Designing the Screener

A Screener is a survey that asks a customer a collection of questions to feed into a recommendation at the end. Every product/journey on the BOXT website has a Screener that powers our recommendation engine. It’s essentially a large form but chunked up in a multi-step way to improve the experience answering lots of questions.

The Screener design is the most important part of the journey and is designed by working closely with SMEs in the Operations team to translate what an engineer would ask/look at in person, and bring it online. I lead on this discovery by engaging with stakeholders to form an initial version as a flow diagram, then iterating based on feedback. See the flow below. This is intentionally zoomed out to show the scale of it, however if you would like a more in-depth overview I can show this during an interview.

Designing the Customer website

Designing the Customer website

Designing the Customer website

We had a Design System for our landing pages, screener and checkout, but we had to design new components to meet the needs of this new repair journey.

Landing page

The main goal of the landing page was to inform the user enough around the BOXT Repair process and costs to get them into the journey, where they could choose a repair or installation option.

We really didn’t want to give a ranged cost, hiding true repair costs behind ambiguity, like competitors. For this reason we came up with the concept of the customer booking a 1-hour inspection visit for £89. If we could fix the issue within that hour, without replacing parts, that’s all it would cost. If it was a larger job, we would provide a no-obligation quote to carry out the work then & there. We wanted to make sure this was transparent up front, so we designed a table that listed each potential cost on the landing page.

Repair Options page

The options page is where a user would choose between getting a repair, or a completely new boiler, if that was recommended. We knew that the repair journey was a good place to cross-sell boiler installation, as our screener would determine if we could actually repair the boiler, and if not, we would recommend a new boiler. We would also show content on this page to help users self-fix their issue without us needing to visit. Even though this would mean use losing out on revenue, it would build brand loyalty for the customer, and save the logistics cost of sending out an engineer, paying their travel etc.

The options page was a new pattern for us, as until then we had only designed a standard PLP for boiler installation. This meant the page needed a complete redesign to fit the new needs.

Designing the Admin back-office system

Designing the Admin back-office system

Designing the Admin back-office system

Our back-office system was bespoke but until now had only been designed to work with installation jobs and service jobs. With how we had designed our repair proposition there would be an initial inspection visit, that needs to be stored as a “job” in the admin system, and then there could be subsequent visits. I came up with the architecture of an overall parent “Job”, that had many child “Visits” connected to it. This would be linked in the UI and the database, enabling our Operations and Planning teams to get a full picture of a customer’s repair. Visits could have their own costs, line items and engineers, but all information would be rolled up into the parent job for an overview for that customer’s repair.

I prototyped this in Figma and ran multiple feedback sessions with the Operations team until we had a final version. The below screenshot is intentionally zoomed out to show an example of the design & flow. I can go into more detail during an interview if needed.

Designing the Engineer App

Designing the Engineer App

Designing the Engineer App

The Engineer app is where the engineers mark their availability, accept work, and submit all the job information through. The journeys inside the app were all designed for installation jobs, so to expand the use case to repair visits, we needed to design completely different journeys. In addition to this, an installation will take an entire day of an engineer’s availability, whereas a repair may not, so we needed to refactor how job lengths and availability worked. This meant redesigning the availability calendar and the journey for how completing jobs works.

The below is an example of a large prototype of the forms that engineers needed to fill in during a repair visit (it’s actually just a few base screen designs, but there are lots of business rules that take engineers down different routes). I prototyped this and then carried out user testing with 3 engineers to gain feedback. The below screenshot is intentionally zoomed out to show an example of the design & flow. I can go into more detail during an interview if needed.

Customer user testing

I designed a customer research study that we could conduct whilst the discovery for Repair was still ongoing, and the underlying architecture of the technical work was being developed within the sprint. I ran x4 sessions over 2 days, conducting interviews remotely. I used a participant recruitment agency to recruit users that had previously had a repair in the last 6 months, so that the experience was still fresh in their minds. I set a homework task to give feedback on competitor journeys, which would be discussed as part of the session. The research aimed to:

  • Understand a customer’s mindset when their boiler breaks and their next steps

  • See what they thought of competitor repair journeys

  • See what they thought of the BOXT Repair proposition

  • User testing of the repair journey prototype

  • Test brand approaches: illustration vs lifestyle imagery

The main output of the research was that the concept of BOXT Repair was well received all round, however there was some work to do on how we explained particular parts of the process, e.g. payment was taken after the repair, even though users were adding their payment method up front, and what was covered as part of the £89 inspection visit. I created a small deck and presented this back to stakeholders and the team.

Below is a screenshots of notes taken during and after user testing. This is intentionally zoomed out to show an example of how I work.

MVP Release

MVP Release

MVP Release

The project was very successful, leading to a +180% conversion rate (CVR) increase for the Repair online funnel vs the boiler installation funnel. This is to be expected as it is a cheaper option, however we saw a 69% lead conversion rate from boilers diagnosed with needing replacing from Repair visits. These customers that ended up purchasing a new boiler from us may not have converted through the installation funnel, so we have shown the repair journey is a great lead generation tool, that also decreased our CPA for boiler installation sales.