UX/UI
Improvements

Phase 1

Parts selection

Overview

In order to improve our current experience in selecting parts we’ve conducted a series of interviews and a usability testing using a high fidelity prototype.

The concept aimed to prove the hypothesis that adding more visual elements to the journey, clearly define paths and break the boiler pack into a customisable selection would create a more coherent and improved experience for the user.

The objective

In order to improve our current experience on the selecting parts journey the following actions were taken into account:

1. Streamline the way products are presented, giving more information about each one before they can be added to the basket.

2. Enhance the visual representation aspect of all products which aimed to help the user quickly recognise what is being selected to avoid mistakes and ordering wrong parts for example.

3. Add a range of recommended parts that would fit a boiler for example – Give flexibility to the engineer when choosing the right fit for the job and transparency for their customers when a quote is created.

4. Introduce the ‘add to basket’ concept where every element can be easily accessed and reviewed during the selection process.

5. Simplify the navigation, bringing consistency to the top nav so the user is able to move seamlessly between screens.

research

The approach

A series of interviews were conducted with 8 engineers. I’ve used a prototype concept that aimed to prove the hypothesis that, adding more visual elements to the journey and clearly define paths where the products can be found would create a coherent and seamless experience.

Identified problems

• Currently, there is no clear visual representation of parts in the app which is leading to some misunderstanding in some cases. A ‘list only’ approach was making it more difficult to recognise which part was being added to the quote

• The navigation needs consistency

• Have the ability to check what has been ‘added to the basket’ before adding your earnings is an area to be improved

Current

Proposed

The findings

After the prototype was put to test with 8 engineers the following patterns started to emerge:

A picture is worth a thousand words!

By introducing images of products and parts we could see an immediate positive reaction that seemed to solve a lot of their current problems. Some of those include: The ability to see exactly what the product looks like, which made it really practical to browse and distinguish each part displayed. Another point raised throughout the interviews was the fact that having images will help with a current lack of transparency with their customers as they ‘don’t know what you’re charging them for if you can’t see the picture’

 

“It’s a lot easier to navigate through”

The overall consensus was that the new version is more informative and a lot easier to navigate. As mentioned by some engineers ‘not having to scroll back and forward to find what I’m looking for’ was a great improvement. They were really pleased with the fact that you can now see ‘pictures of the boiler and add the parts all on one screen’.

 

Segmenting the journey

According to the feedback gathered, breaking down each journey into subcategories i.e heating, spares, bathroom and electrical, made the journey really clearer and would help them focus on the task in hand.

 

Build your own pack

From an engineer’s perspective the new layout would help them avoid mistakes when building a pack as they knew exactly what parts were being selected. The flexibility to choose which flue would better fit a particular boiler was perceived as a huge advantage too. Things to consider with this approach – some engineers would like to see the price of a boiler plus a flue but still have the ability to build their own pack by swapping and adding parts.

UX/UI
Improvements

Phase 2

Warranty + Price transparency

Overview

Following up from the findings in Liverpool a second round of research conducted in Leeds helped us move forward with the initial concept. Taking warranty into account when building a pack has been proven to be extremely important, specially because different parts (filters) influence the overall output of a particular pack. The research proved that introducing warranty before building a pack brought clarity to what to be expected in the next step.

The new proposed layout had positive reactions with regards to price transparency as well, as it clearly displays a breakdown of costs for each part.

The objective

In order to improve our current experience on the selecting parts journey the following actions were taken into account:

1. By introducing warranty as a step prior to ‘build your own pack’ we are able to suggest pre-selected parts that will go with a particular boiler.

2. Grouping the warranty options will to help the search when looking for boilers. The objective here is to help them find what they need without having to scroll through multiple options as all the extra parts will be available under one pack.

3. Streamline the way products are presented, giving more information about each one before they can be added to the basket.

4. Enhance the visual representation aspect of all products which aimed to help the user quickly recognise what is being selected to avoid mistakes and ordering wrong parts for example.

5. Add a range of recommended parts that would fit a boiler for example – Give flexibility to the engineer when choosing the right fit for the job and transparency for their customers when a quote is created.

6. Introduce the ‘add to basket’ concept where every element can be easily accessed and reviewed during the selection process.

7. Simplify the navigation, bringing consistency to the top nav so the user is able to move seamlessly between screens.

 

Identified problems

After our first prototype concept was tested, warranty came up as a one of the main issues when building your own pack as the filter selected would have a direct impact on the number of years which meant that in order to create an easier journey for the user we had to re-think how warranty should be presented.

The way our packs are presented currently doesn’t give the engineer the a breakdown of costs for each part and sometimes they have to go back and forth to find other parts to complement their pack.

The prototype

research

The approach

A series of interviews were conducted using a reiterated version of the first prototype tested in Liverpool to include warranty and the pack concept broken down with pre-selected parts.

The findings

After the prototype was put to test, the following patterns started to emerge:

Warranty is extremely important

The logic of having warranty as a first step had a really positive reaction. Engineers perceived this step as an advantage when quoting for a customer. They can see upfront the price difference between a 2, 7 and 10 year warranty for example. This would allow them to present the option to the customer before starting the journey to build their own pack.

 

I would like to see boiler + flue

After gathering more feedback on the breakdown of parts that go with a boiler it seems that having a flue already preselected with the pack made more sense for engineers. They liked the fact that you have the ability to add/replace a horizontal flue for a vertical one for example.

 

More options for the pack

The ‘need more?’ Section where we present ‘add chemicals’ and ‘add stats’ was perceived as a very useful solution when building the pack as they can get everything in one place. On that section they would like even more options to facilitate the journey “probably TRVs and extensions as well”.

 

The Basket

Introducing the basket concept was seeing as a great addition to the flow, it gave more clarity to what was ordered and if they forgot something it was a chance to review everything before proceeding. “The current version sometimes can be a pain as I get to the end and think – ‘how do I go back?’ I have to finish setting up my price before I can look at what I’ve ordered.”

Other case studies

Take a sneak peek