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.
Who am I designing for?
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.
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.
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.
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 optimizing layout, ensuring clear navigation, and minimizing steps for viewing and managing contents.
Due to rising mobile usage, it's crucial to craft a responsive design for John Lewis's website. Redesigned basket cards will be mobile-optimized, ensuring a consistent, enjoyable user experience across platforms.
Redesigned basket cards will adhere to the latest web accessibility standards, ensuring usability for individuals with disabilities.
Following the product card redesign, we observed the following improvements:
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.
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
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.
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 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.
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.
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.
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.
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.