John Lewis & Partners

Product cards redesign and Quick view feature implementation in basket

John Lewis & Partners

Impact

  • Conversion rate: +0.7%

  • New visitor conversions: +1.2%

  • Continue to checkout: +0.6%

  • Basket abandonement: -0.4%

What problem am I solving?

The product cards within the shopping basket play a crucial role in the online shopping journey by providing users with vital information about the items in their basket. Quantitative data indicates that users currently encounter a lack of essential information and editing functionality. These pain points prompt them to navigate away from the basket to better inform their purchasing decisions. The objective of this project is to validate assumptions by addressing user concerns and eliminating friction points, ultimately enhancing the overall shopping experience.

presentation image
presentation image

Who am I designing for?

Identifying our users is critical for making informed decisions and reducing risk.

Casual shoppers (Browsers)

These customers contribute significantly to store traffic but are less likely to make purchases, often abandoning carts or returning products, and typically engage in small, low-revenue transactions without brand loyalty.

Researcher-orientated shoppers

Research-oriented shoppers are meticulous in ensuring they make informed decisions, investing time in thoroughly understanding products across various brands, particularly in high-price markets.

Bargain hunters

Their primary focus is to economize and secure the most favorable price, as they persistently seek the lowest prices and are open to exploring numerous stores in their quest for discounts.

What are they struggling with?

In the current online shopping journey, users encounter significant pain points, including incomplete information on product cards, limited editing functionality within the shopping basket, and challenges in streamlining purchasing decisions due to a lack of essential details.

presentation image

The remedy

The proposed redesign of the basket product cards will likely result in improved user engagement, enriched shopping experiences, and the possibility of higher conversion rates on the John Lewis website. The expected results encompass several key aspects:

Improved product information

The existing cards may not provide sufficient information about the products, leaving customers with unanswered questions. We will aim to include comprehensive product details, such as size, color options, availability, and customer reviews, allowing users to make informed purchasing decisions without the need for additional clicks.

Implement editing functionality

Incorporate the functionality to modify product size and color, and introduce the option to add product variants.

Visual enhancement (UI)

Improve the visual appeal by creating engaging and effective displays. This involves showcasing product images, descriptions, prices, and other pertinent details in an attractive and user-friendly manner.

Streamlined user experience

Current basket cards may cause frustration; redesign aims to streamline the user journey by optimising layout, ensuring clear navigation, and minimizing steps for viewing and managing contents.

Responsive design

Due to rising mobile usage, it's crucial to craft a responsive design for John Lewis's website. Redesigned basket cards will be mobile-optimised, ensuring a consistent, enjoyable user experience across platforms.

Accessibility

Redesigned basket cards will adhere to the latest web accessibility standards, ensuring usability for individuals with disabilities.

presentation image

Project Outcome

Following the product card redesign, we observed the following improvements:

Increased engagement:

Users spend slightly more time on the shopping basket page, suggesting that the visually enhanced product cards capture their attention.

Decreased basket abandonment:

The slightly improved design and more prominent CTAs lead to a small reduction in cart abandonment rates. Users find it slightly easier to navigate and make decisions about their purchases.

Minor conversion rate boost:

We noticed a small increase in the number of users proceeding to checkout from the shopping basket page, resulting in a slightly higher conversion rate.

presentation image

The process behind the solution

A systematic and creative approach to solving problems and creating solutions that meet specific objectives: Empathise + Define + Ideate + Prototype + Test + Implement = UCD

Competitor Analysis:

Evaluate and analyze competing products or services in the market. This analysis helps identify industry standards, understand user expectations, and identify potential gaps and opportunities.

Discovery:

At this point, I gather information and insights about the user needs, define project goals and objectives, and identify the target audience. This stage involves collaborating with stakeholders and understanding the project's requirements, constraints, and vision.

Sketching:

Sketching involves ideation and conceptualization. I sketch rough ideas and concepts to explore different possibilities and visual directions. It's a creative phase that encourages free-flowing ideas and enables quickiteration.

Wireframing:

The process of creating low-fidelity visual representations of the design. It focuses on layout, information architecture, and the overall structure of the interface focusing on the user experience and functionality.

User testing:

Gathering feedback from real users to evaluate the design's effectiveness. I create prototypes or interactive mockups and observe how users interact with them. User testing helps uncover usability issues, validates design decisions, and ensures the final product meets user needs.

Development:

The development phase involves translating the design into a functional product. I work closely with developers to implement the visual elements, interactive features, and backend functionality.

Design QA:

Quality Assurance ensures the design is faithfully implemented and meets the established standards. Designers review the developed product against the original design specifications, ensuring visual consistency, usability, and adherence to brand guidelines.

presentation image

What are the next steps?

Next, we are in the process of closing the loop, a critical phase where we meticulously monitor the outcomes stemming from the implementation. This step is pivotal as it enables us to gain valuable insights into the effectiveness of our efforts. By closely examining the results, we not only ensure the success of the current implementation but also lay the groundwork for future enhancements. As part of this iterative process, we remain committed to refining and optimizing our approach based on the observed outcomes.

presentation image

Back to top

Explore other projects