John Lewis
How a sleek, optimised e-commerce shopping basket experience boosts customer conversions.

Impact
+0.7%
Conversion rate
+1.2%
New visitor conversions
+0.6%
Continue to checkout
-0.4%
Basket abandonment
Overview
John Lewis aims to offer customers an excellent shopping experience. As a designer, my role is to create solutions that effectively address both customer needs and business requirements.

Who is the hero of this story?
Understanding the diverse motivations of our customers is the exciting challenge that fuels our design process. Three key groups, each inspiring us in unique ways:
The curious explorers (Browsers)
They bring vibrant energy to our store, creating a dynamic atmosphere. While they may not always make an immediate purchase, they represent a wealth of untapped potential, ready to be inspired and perhaps discover their next cherished item.
The information seekers (Researcher-orientated)
Driven by a desire for informed decisions, they dedicate their time to understanding value, especially in our premium offerings. This presents a fantastic opportunity to showcase our expertise and build lasting trust through comprehensive and compelling information.
The value champions (Bargain hunters)
They are passionate about finding exceptional value and recognize the importance of a great deal. By meeting their discerning needs, we can demonstrate the true worth of our products and build a loyal following who appreciate smart choices.
The hidden friction in our customer's journey
It all starts by discovering the friction the customers are encountering. Customers encounter several frustrating limitations in the current online shopping journey, such as incomplete product information and limited editing functionality within the basket.
The information dead end
Imagine reaching a crucial crossroads only to find the signpost missing. That's the frustration of incomplete product details, forcing shoppers to abandon their basket and embark on a separate, often fruitless, search. This detour can easily lead them away from their intended purchase.
Limited editing functionality
The inability to modify product choices directly within the basket frustrated users, forcing them to start over if they needed to change size, colour, or quantity.
The shadow of doubt
When vital product information is missing, confidence crumbles. This lack of clarity casts a shadow of doubt over potential purchases, preventing users from making swift and assured decisions, ultimately stalling their journey to checkout.
Definig the problem
Contentsquare analysys revealed the crucial issue of customers leaving the shopping basket going back to the product page to potentially find additional product information, leading to increased basket abandonment and lower conversion rates. This obstacle highlighted what customers needed to make confident purchasing decisions directly from the basket. Our mission was clear: validate customer concerns and design a solution that would provide all necessary information and functionality within the basket, ensuring a seamless and satisfying shopping experience.



Hypothesis formulation
Placing customers in control of their shopping experience is key. We can empower them to make quick, informed decisions and modify selections with ease by integrating detailed product information and advanced editing functionalities within the shopping basket we'll be able to improve their confidence and help them move to checkout without starting parallel journeys.
'Jobs to be done'?
I focus on the underlying reason why customers use a product or service. It's about understanding the job they're trying to get done.
Efficiently find and purchase desired products.
Make informed decisions about product choices.
Customize their shopping experience to meet specific needs.
We must provide the capabilities to solve the friction
The brainstorming session explores the necessary capabilities to provide to the customer, enabling them to achieve their goal.
Create a seamless shopping basket experience that minimizes navigation by presenting all essential information at a glance?
Present comprehensive product details (descriptions, specifications, reviews) within the basket to enhance customer confidence and satisfaction?
Create a basket interface that minimizes customer effort and maximizes convenience by providing all the necessary information and intuitive editing features, ultimately leading to a higher purchase completion rate?
Optimize the shopping basket experience by prioritizing customer needs for clear product information and effortless editing functionalities, ultimately boosting conversion rates.
Increase basket efficiency by allowing customers to effortlessly modify their selections (size, color, quantity) directly within the basket, ultimately leading to a smoother checkout process.
Benchmarching
As a leading authority on e-commerce user experience, the Baymard Institute recommends achieving a positive basket experience...
Enhance basket clarity by featuring large product thumbnails and displaying core product specifications directly within the basket. This allows customers to easily identify and review their selections at a glance
Increase basket efficiency by enabling customers to effortlessly switch between product variations (size, color, etc.) directly within the basket. This promotes a smoother checkout process and minimizes errors.


The solution part one—product card redesign
Having identified key user pain points, I designed a solution that directly addresses these friction points, creating a smoother shopping experience.
Improved product information
Enriched the product cards with comprehensive details, including size, color options, availability, and customer reviews. This enhancement ensured that users had all the necessary information at their fingertips, reducing the need to navigate away from the basket.
Visual UI enhancement
By redesigning the visual elements, we created engaging and effective displays. The new design showcased product images, descriptions, and prices in an attractive, user-friendly manner.
Streamlined user experience
We optimised the layout to ensure clear navigation and minimized steps for viewing and managing basket contents. This redesign aimed to reduce frustration and enhance the overall shopping journey.
Responsive design
Recognising the rise in mobile usage, we ensured the redesigned basket cards were mobile-optimized. This consistency provided an enjoyable user experience across all platforms.
Accessibility
Adhering to the latest web accessibility standards, we made sure the redesigned basket cards were usable for individuals with disabilities, promoting inclusivity.


Impact
Following the product card redesign, we observed the following improvements:
Increased engagement:
Users spent more time on the shopping basket page, indicating enhanced interest and engagement.
Decreased basket abandonment:
The improved design and prominent calls-to-action led to a reduction in basket abandonment rates.
Conversion rate boost:
A slight increase in users proceeding to checkout resulted in a higher overall conversion rate.



The solution part two — Product editing functionality
Offering users the ability to modify product attributes like size and color directly within the shopping basket facilitates the user flow proceding to the checkout and improves the overall user experience. This eliminates the need for users to navigate back to the product page if they realize they've selected the wrong variant. It's a key part of a well-designed e-commerce flow that anticipates user needs and reduces friction.
What's next?
Optimizing the shopping basket experience is a long-term strategic endeavour that goes beyond simple A/B testing. It involves a continuous cycle of data analysis, technological adoption, and a deep understanding of evolving customer behaviors and business needs. A mid-to-long-term strategy focuses on building a basket experience that is not only efficient but also highly personalised, intelligent, and seamless across all channels.