John Lewis
Optimised e-commerce shopping basket experience to boost customer conversions.

Impact
+0.7%
Conversion rate
+1.2%
New visitor conversions
+0.6%
Continue to checkout
-0.4%
Basket abandonment
Introduction
Increased conversions by 0.7% and reduced basket abandonment by 0.4% by redesigning the John Lewis shopping basket to eliminate unnecessary navigation and provide critical product information at the point of purchase.

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.
Defining the problem
Analysis revealed that 40% of basket users were navigating back to product pages to verify basic details they couldn't find in the basket itself. This seemingly small friction point increased abandonment by 0.4% and resulted in lost annual revenue; a clear signal that customers needed more information at the point of decision.



The heroes of this story
While analyzing basket behavior, we discovered that different customer types hit the same obstacle:incomplete product information,but for very different reasons. The common thread: All three groups were forced to leave their basket to find information that should have been right in front of them.
The Browsers (Explorers)
'Wait, does this come in navy too?' They're spontaneous and impulsive, but the moment they spot an item in their basket and can't remember if there was another color option, they bounce back to the product page. Often, they get distracted and never return—converting casual interest into abandoned baskets.
The Researchers
'I need to double-check the dimensions before I buy.' For higher-value purchases, they need reassurance. When technical specs aren't visible in the basket, they navigate away to verify details. This back-and-forth erodes confidence and increases the likelihood they'll abandon to 'think about it.'
The Bargain Hunters
'Is this the best price for this size?' They're comparing options constantly. Without clear size/color availability and pricing in the basket, they navigate away to check if a different variant offers better value. Each navigation is a chance to lose them to analysis paralysis.
Customers hire our product to get something 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.
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.
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?
optimise 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, colour, quantity) directly within the basket, ultimately leading to a smoother checkout process.
Benchmarking
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, colour, 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, colour 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-optimised. 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 colour directly within the shopping basket facilitates the user flow proceeding to the checkout and improves the overall user experience. This eliminates the need for users to navigate back to the product page if they realise 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?
optimising 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.
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.
Explore ways of bringing personalisation into the customer experience. Leveraging data and customer preferences from all touchpoints.


