top of page

John Lewis & Partners

- Improving technology journeys

John Lewis & Partners product description page screens on laptop and mobile devices

With the surge in demand for computing products in 2020, this was an area of John Lewis that could benefit from further focus and optimisation in order to better aid users in their research and purchase journey, in order to improve conversion.

Objective

I led UX and service design, working in a cross-functional product team which included other specialisms such as buying and trade, product management, insight, UI design and development.

Initially, we wanted to quickly understand whether there was potential for improvement. We decided to run a survey to gather thoughts and opinions from users who had recently purchased a computing product, or were looking to in the near future. We also interviewed other John Lewis partners as well as friends and family to understand their experiences.

Approach

"It’s difficult to understand whether the product is right for me"

"I don’t know what is best for my needs to narrow down options"

I ran a series of playback sessions with the main stakeholders to present our research findings. This helped everyone to be aligned on background to lead a workshop based on empathy mapping.

Empathy mapping helped ensure everyone had a clear understanding and agreement of user needs and pain points before we started to think about any sort of ideation.

John Lewis technology customer empathy map

Once we'd identified our key user type from the empathy mapping output, I ran a further workshop based around an opportunity solution tree exercise. The aim of this exercise was to gather as many ideas as possible from the team as potential solutions for the pain points identified.

The ideas were then grouped into themes and voted on by everyone to understand what ideas we thought had the most potential, based on likely impact and effort.

John Lewis opportunity solution tree example
John Lewis technology ideation workshop

As a team, we felt it was right to start with looking at ideas for the website’s product description page, as this was the area of the site where the majority of product information was available. This meant it was a major decision making point for users regardless of whether their intent was to purchase online or offline.

In order to reduce the amount of development work so we could launch a test quicker, we aimed to use components which already existed in our design system.

The theme of 'humanisation' came out as the biggest opportunity from the workshop, which we defined as making computing products more relatable to the customer. Often the information and terminology used around computing products would be misunderstood by customers, leading them to lack confidence in deciding what product was best for them.

John Lewis product description page information architecture examples

Using the components available, I looked at a series of layout options across mobile and desktop breakpoints, with the aim to better organise and explain information about the product. I then compared these with competitors to get further design inspiration around how they were humanising their products.

After sharing ideas and gathering feedback from the team, I put together more detailed wireframes that we could then put in front of users to gather feedback and understand whether we were addressing the main needs.

John Lewis technology product description page initial iteration

Compared to the existing PDP layout, our new structure was well received by users in testing, quoting words such as ‘organised’ and ‘appealing’ in reference to the design and level of information.

One of the main things I also focused on was trying to ensure the main differentiators of the products such as processor, RAM and storage capacity could be better understood. I worked with our UX writer to look at ways to explain this information using use cases in order to make them more relatable.

Technology producy specs with use case descriptions

After various rounds of testing and learning, conversion on mobile devices improved back above previous levels. From all the insight gathered as part of this, we were also able to build up a backlog of additional improvement ideas for further discovery and testing, which we could keep adding to as part of continuous iteration.

Based on the initial success of the design, we also decided to rapid-test some of the design improvements across other technology product categories using the same components. A number of these changes led to improvements in conversion there too.

Results

John Lewis technology product description page special offer iterations on mobile device screens
John Lewis technology product description page special offer iterations on mobile device screens

This iteration of the new PDP design was launched as an A/B test across all breakpoints. As a result, the conversion rate of the new PDP design variant increased significantly on desktop and tablets, but decreased slightly on mobile.

 

The next priority was therefore to try and understand more about the mobile-specific journey. We ran mobile-specific user testing to gather more feedback on potential design iterations. 

One example was that we observed users in testing unable to find the special offers information.  This was important as special offers are often presented ahead of this point in the journey, meaning users would be likely to go searching for them on this page.  Therefore, one iteration we A/B tested was positioning a link to find out more about special offers near the pricing, with a mention of how many special offers were available.

bottom of page