Improving the process of buying flooring for retail and trade customers.

Details

Client

UK Flooring Direct

Project

Website redesign

Postion

Lead product designer

Services

Research, ideation, design, prototyping, user testing

Role

I was brought in to lead the new product's user experience. My broad remit was to help direct the generative research, plan and deliver the UX/UI work stream, and help define the overall product vision and strategy. A UX researcher and a UI designer were to aid me in this. I reported to the CDO.

Challenge

UK Flooring Direct (UKFD) decided to migrate the website to a new platform, which will enable increased release capability and frequency.

The challenge was to improve the digital experience for both retail and trade customers by resolving usability issues, driving greater engagement, and, ultimately, conversion. The business was also keen to differentiate itself from its competitors.


Discovery

Customer interviews

As UKFD had abundant quantitative data but needed more generative research on their customers, we convinced them of the benefits of undertaking this research before starting the project.

I worked alongside a researcher to plan and recruit for customer interviews; we decided on 3 cohort groups - UKFD retail customers, UKFD trade customers and competitor retail customers - and undertook twenty-eight interviews. The research was intentionally broad, but some of our key aims were to gain a rich understanding of:

  • Who our customers are and their behavioural differences.
  • The end-to-end experience when embarking on a home improvement project (flooring).
  • Customer motivations, needs and problems throughout the above experience.

Analytics data

I engaged the analytics team to examine all the key metrics that help explain user behaviour. Building out high-level user flows across the retail and trade segments was particularly helpful, allowing us to see the entry points, the progression of customers from each step, and, crucially, where they tended to drop out. See Fig. 1.

As UKFD was keen to improve the overall conversion rate, I undertook a more in-depth analysis of the behaviour and interactions of the basket and checkout pages.

External and internal search term data validated our customer research findings. Customers tend to search by room, style (parquet, plank, etc.), and, to a lesser extent, type (laminate, vinyl, etc.).

Tree testing & card sorting

To understand how people categorise flooring, I used Optimal Workshop to evaluate the information architecture and help improve product findability.

After benchmarking the current navigation, I ran several open and closed card sorts to understand how customers might conceptualise, group, and label flooring products. The final task was to test the new navigation model to see if it performed better than the current navigation. See Fig. 1.

Figure 1. Top: High-level user flows, left: pie tree from benchmark test, right: pie tree after final IA.


Defining the scope

Thematic analysis

The researcher coded the initial interview feedback, and together, we grouped the codes and defined the themes. We kept refining the themes until we were happy we had answers to as many of the research goals we initially set out. Some key themes were:

  • Choosing flooring: What are the different types, Not easy to find the correct floor, Does this floor work with/in [room].
  • Fulfilment: When can I get it delivered, How is it delivered, Warranties and returns, Aftercare policies.
  • Purchase cost: Budget vs quality floor, How much flooring do I need, What accessories do I need, Have I got everything, What is delivery cost.

Empathy maps

We used adapted empathy maps to crystallise the customer research (see Paul Boag). There were four retail customers and two trade customer maps (see Fig. 2).

Empathy maps focus more on user goals and behaviour than personas, so they are helpful when making informed design decisions. We sent them to all stakeholders and anyone in the business who would benefit from them.

Lo-fi journeys

To identify opportunities based on the customer's problems and needs, we mapped the themes onto the thinking, feeling, and pain point lanes of lo-fi user journey maps.

For each empathy map, we created maps for the sample and purchase journeys (ordering flooring samples and purchasing products were separate journeys); we then had workshops with the UX/UI and product teams to brainstorm the opportunities.

Figure 2. Empathy map.

Figure 3. Lo-fi user journey.


Design solutions

Roadmap, WoW & delivery

The roadmap was divided into the following streams: basket & checkout, finding products, merchandising /viewing products, account management, and engage and inspire. We then broke these streams down into smaller chunks of work to fit into the delivery plan and 2-week design sprints.

We had a clear set of customer problems and needs that aligned with each workstream, which brought focus and allowed us to define clearly the goals we wanted to achieve with our solutions.

Basket & checkout

Hotjar recordings of customers in the checkout showed they had problems with the long single-page checkout screen and accessing the actual delivery costs and options, particularly on mobile devices.

These issues, allied with the insights from our research, led us to define goals for the new basket and checkout:

  • Show the actual delivery cost and options as soon as possible.
  • Simplify and improve the usability of the checkout process.
  • Reduce dropout rate and increase conversion.

First, I broke down the basket and checkout process into stages and components based on the required information and the customer tasks. This helped me understand what was needed without being constrained by a ‘standard’ basket and checkout flow.

The initial design revolved around a delivery option mechanism shown to customers at the basket step (see Fig. 3) that I tested (unmoderated) on usertesting.com. The general feedback was the screen was creating cognitive overload (“too much going on”) and that they wanted to use the basket as a wish list to store possible purchases (our analytics data confirmed this was happening on our site).

The next iteration kept the basket and checkout separate, and variations of the checkout flow were tested. The key design was an accordion style to chunk the information. This tested positively on desktop but not on mobile devices, as some customers got ‘lost’ when trying to edit information.

The final solution kept the basket and checkout separate entities, and the checkout flow became stepped, with the delivery mechanism being the first step. This allowed the options and actual delivery costs to be shown as quickly as possible and simplified the checkout process.

Further workstreams

After the basket and checkout, I worked backwards, completing the product page, listing pages, and search pages.

Figure 1. Top: High-level user flows, left: basket and checkout elements, right: delivery module.