Client
UK Flooring Direct
UK Flooring Direct
Website redesign
Lead product designer
Research, ideation, design, prototyping, user testing
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.
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.
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:
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.).
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.
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:
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.
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.
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.
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:
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.
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.