work

John Lewis

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

John Lewis presentation image

Impact

  • +0.7%

    Conversion rate

  • +1.2%

    New visitor conversions

  • +0.6%

    Continue to checkout

  • -0.4%

    Basket abandonment

My contribution

Identifying and articulating customer and business needs

Identifying friction points in the experience

Writing the problem statement and solution hypothesis

Design exploration, ideation and prototyping

Testing and measuring impact

Planning next steps

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.

presentation image

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.

presentation image
presentation image
presentation image

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.

presentation image
presentation image

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.

presentation image
presentation image

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.

presentation image
presentation image
presentation image

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.

Explore other projects