John Lewis Partnership
Homepage
John Lewis was in the midst of a visual refresh called 'Joyfully Bold.' I was tasked with using this refresh as an opportunity to explore ways to improve the homepage for John Lewis customers and take advantage of any new business opportunities.
My role
I was the sole UX designer for the team and worked with:
Project Manager
User Interface (UI) Designer
A UX Researcher as and when requested
Developers
I led multiple stages of the process including:
Competitor analysis
Heuristic analysis of existing page
Ideation
Wireframing
User survey
Video usage guidelines
Discover
The first step I took was to familiarize myself with both the current homepage and the partnership's strategic business goals.
To grow, the partnership had identified a need to broaden its reach as a brand to a younger customer, who tends to see the brand as too ‘old’. However, they needed to achieve this without alienating their existing customer base.
The John Lewis Partnership devised 4 pillars to help them achieve this growth:
Inspire and Engage
Expertise and Advise
Joined-up John Lewis
Ease and Convenience
On these pillars sits 12 big bets, namely:
Always Right Search
Joyfully Bold Content
Flexibility Built-in
Voyages of Discovery
Digitally Enabled Destinations
Loyalty Recognised
Elevating the Partner Difference
Know Me and What I Really Want
Real Relationships and Connections
JL Approved Collaboration
My-Way Shopping
Community Counts
Discovery Workshop
I set up and ran a discovery workshop with members of my own product team and John Lewis content creators and editors, to ensure that as a team we were focusing on the right problems and asking the right questions. The objectives I set for the team by the end of the workshop were:
Write a problem statement
Set discovery goals and objectives
Plan discovery and wider research activities
Define how we measure success for the redesign
Research Plan
The top priority actions emerging from the workshop were:
Conduct a thorough competitor analysis of online retail home pages to determine areas of improvement
Test how well the existing CMS components work once the new UI changes have been implemented
Gather analytics on current homepage usage
The three tasks were split between me (conducting the competitor analysis), my UI Designer (looking at the visual refresh of existing components), and our PM (gathering analytics data for the team).
Competitor Analysis
I embarked on a comprehensive review of 32 competitor homepages in the retail space.
I was looking for ideas that we could bring into our own homepage that aligned with the strategic objectives.
Reviewing the existing John Lewis homepage
I moved on to reviewing the existing John Lewis homepage with comparisons to competitors, suggesting areas we could introduce, change or move. For the review, I also looked at heatmaps of customer engagement and past research into the homepage.
Define
User survey
We commissioned a UX researcher within John Lewis to conduct a user survey to find out about shoppers’ thoughts on the existing homepage and a shortlist of new potential additional features.
Objective
We wanted to understand what customers think about our homepage and competitor homepages and what users’ intent is when they visit a homepage.
The research questions were:
What do customers want from a homepage?
Which components are useful to customers on a homepage?
What priorities do customers have when viewing a homepage?
Methodology
We ran a remote unmoderated Usability Hub test with and recruited 10 men under 35, 10 men over 35, 10 women under 35, and 10 women over 35 for a total of 40 participants. The goal was to identify potential changes that would appeal to John Lewis' younger target audience, while still retaining the loyalty of the older demographic.
Participants were shown images of 10 components of homepages with descriptions. They were asked to rate their usefulness to them, the frequency they feel they would use them, and where they belong on a website (homepage position, or not on a homepage at all)
Afterwards, they were asked to rank the components by usefulness, and then position them on a homepage (build a homepage task), followed by ranking statements around their goals when visiting a website.
Overall rankings of potential new components
The chart below shows how the participants ranked the proposed new additions via usefulness and how often they would actually use it.
Organisation scores
Heatmaps had clearly shown, that the further down the page something is placed the less likely it is to ever be seen by a customer. I wanted to understand where our participants would like to see our homepage content. We asked participants to place 9 pieces of content in the order they would like them to appear on the homepage. Higher scores indicate a desire for content to be higher up the page.
Statement ranking
We asked the participants how much the following statements were applicable to them:
I want to easily get to product information, such as price and size
I want to see products recommended for me
I want to see what’s on offer
I want to see what’s popular
I want to see what’s new
I want to see categories recommended for me
I want to know what John Lewis’ values are
I want to know what events are in store
The results gave us a clearer understanding of what the customers considered important to them.
All of this customer research helped me understand not only what John Lewis should feature on their homepage, but where the various elements should be placed on the page.
Develop
Wireframes
I produced wireframe designs of 3 different scenarios of the homepage, business as usual, sales and a special occasion.
I presented the wireframes to my own team and key stakeholders within John Lewis.
The feedback was then incorporated into high-fidelity mockups by our team’s UI designer, with my input.
Later I went on to create specific templates for Black Friday.
Business as usual wireframe
Sale wireframe
Special occasion wireframe
Black Friday wireframe
Deliver
My involvment on the project ended before they went live. I recommended A/B testing of each change before a full launch.
The high fidelity designs were put together by one of John Lewis’s in-house UI designers.
The first round of changes were introduced with the implementation of the ‘Joyfully Bold’ refresh, many of them aiming to appeal to the younger demographic that John Lewis was aiming to attract.
Multiple hero images were replaced with a single image but with the option of multiple, related CTAs (e.g. a summer fashion theme, with Men’s, Women’s and Kid’s CTAs.)
Offers were prioritised under hero
Instagram feeds from customers was introduced
‘Recommended for you’, kept a prominent position and I suggested a much greater use of AI algorithms to make the recommendations and user experience more personalised and relevant to the individual customer, citing Farfetch as an example of a competitor who is ahead on this.
A slim message area was introduced just under the navigation
Guidelines for video usage was introduced, discouraging its over usage on the home page
Homepage now
Lottie Beadle
Digital Product Manager at John Lewis