Intro
Our mission at John Lewis is to provide an unparalleled shopping experience by optimising our basket experience for our customers to enhance user engagement, streamline the shopping process, and boost conversions.
work
John Lewis
How a sleek, optimised e-commerce experience with the shopping basket boosts customer conversions.
Impact
Conversion rate
+0.7%
New visitor conversions
+1.2%
Continue to checkout
+0.6%
Basket abandonment
-0.4%
Who are we designing for?
Understanding the diverse motivations of our users is the exciting challenge that fuels our design process. We've identified 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.
Pinpointing the snags in our customer experience.
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, color, 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.
The Problem
Our data revealed a crucial issue: users frequently left the shopping basket to seek additional product information, leading to increased cart abandonment and lower conversion rates. This obstacle highlighted the existing product cards' shortcomings. They lacked the detailed information or editing capabilities that 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. By integrating detailed product information and advanced editing functionalities within the shopping basket, we can empower them to make quick, informed decisions and modify selections with ease.
'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.
Provide the right capabilities
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.
Baymard institute benchmarching
Is a leading authority on e-commerce user experience. They offer a wealth of resources to help businesses improve their online stores and increase conversion rates.
◍
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—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.
◍
Enhanced editing functionality (Implementation in phase 2)
Integrated features that allowed users to modify product attributes such as size and color directly within the basket. Additionally, we introduced options to add product variants, streamlining the decision-making process.
◍
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 cart abandonment rates.
◍
Conversion rate boost:
A slight increase in users proceeding to checkout resulted in a higher overall conversion rate.
What are the next steps?
Our commitment to continuous improvement involves closely monitoring key metrics like click-through rates, conversion rates, and time spent on product pages. Analyzing these insights will guide future enhancements to optimize the shopping experience for our users
Explore other projects
MVF Global
BuzzSumo
