Revamping John Lewis Product Pages for Better Conversions

Introduction

I embarked on a project to redesign the product pages of John Lewis's website. My goal was to create a more user-friendly and visually appealing interface that would ultimately lead to a significant increase in conversion and purchase rates. I focused on addressing user frustration stemming from a cluttered interface and difficulty in identifying key product details.

• Project Name: John Lewis Product Page Redesign
• Role: UX/UI Designer
• Duration: October 26, 2023 – November 10, 2023
• Team Size: 1
• Tools Used: Figma

This project aimed to improve the online shopping experience for John Lewis customers by creating a cleaner, more intuitive product page design. The target audience comprised both male and female online shoppers who found the existing website design cluttered and confusing.

Problem Statement

The primary problem was the cluttered and overwhelming design of the existing John Lewis product pages. Users struggled to quickly find key product information, such as pricing, sizes, and customer reviews. The "add to cart" button was not prominently displayed, leading to a higher than desirable drop-off rate. This resulted in lower conversion and purchase rates, impacting overall business performance. I observed this through informal user surveys and my own experiences shopping on the site.

Objectives and Goals

My primary objective was to redesign the product page to improve user experience, increase the conversion rate, and boost the purchase rate. Key Performance Indicators (KPIs) used to measure success included: Conversion rate, Purchase rate, and Drop-off rate. A successful outcome would show a noticeable improvement in all three KPIs post-redesign.

Research and Insights

My research involved a thorough analysis of the existing John Lewis product page interface. I also conducted a competitive analysis, reviewing similar e-commerce sites to identify best practices and areas for improvement. This provided a framework for understanding existing user flow and pain points.

Ideation and Concept Development

My design process began with sketching and brainstorming various design concepts. I explored different layouts to prioritize key information and ensure easy navigation. I created two distinct mockups, each with a different approach to information architecture and visual design. These were tested with a small group of users to gather feedback. Feedback from these tests directly influenced the design iterations that followed, leading to a refined final design.

I used Figma for wireframing and prototyping. I focused on simplifying the visual design while maintaining John Lewis's brand identity. Key design decisions centered on: improving information hierarchy, creating ample breathing room between elements, emphasizing the "add to cart" button with clear call-to-actions, and ensuring a seamless mobile experience. Multiple iterations of prototypes were created and tested, improving based on feedback gathered.

Challenges and Solutions

A major challenge was balancing the need for a complete redesign with the desire to maintain brand consistency. My solution was to create a design that was both fresh and familiar, incorporating elements from the existing design while significantly improving usability. Another challenge was the need to improve the mobile responsiveness, while ensuring the design remained consistent across various screen sizes. This was addressed through responsive design principles implemented in Figma.

Final Outcome

The final design is significantly cleaner and more straightforward than the previous version. Key elements have more breathing space, reducing visual clutter. The "add to cart" button is now more prominent and eye-catching. Overall, the design is more user-friendly and intuitive, ensuring users have an easier time finding what they need and making a purchase. The design was tested with user feedback post-redesign and improvements were noted based on user experience.

Learnings and Reflections

This project reinforced the importance of user-centered design. Through iterative prototyping and user testing, I learned how critical it is to gather and incorporate feedback throughout the design process. The ability to balance creative design with user needs was instrumental in creating a successful solution. If I were to do this project again, I would conduct more comprehensive user research earlier in the process, to gain a deeper understanding of user needs and pain points.

Conclusion

This project resulted in a significant improvement to the John Lewis product page design. The cleaner interface and improved usability have the potential to boost conversion and purchase rates. Future steps involve A/B testing the new design on a live environment and collecting data to measure the impact of these changes on key performance indicators. Further iterations may be conducted based on the data collected.