Designing a product page for an already established brand to enhance engagement and optimize user experience
E-commerce platforms often struggle to balance aesthetic appeal with seamless usability on product pages. This redesign project aimed to solve that tension by creating a product page that delivers an elevated shopping experience. By prioritizing clear information hierarchy, intuitive interactions, and brand adaptability, the new design achieves both functionality and a visually compelling layout, tailored to diverse user needs. Additionally, the client sought to refine the user experience through A/B testing, reduce frequently asked questions by improving design clarity, and introduce a layout distinct from competitors to position their brand as innovative within the e-commerce space.
Overview
My Role
User Experience Design
Visual Design
Prototype
Platforms
Desktop
Mobile
Year
2020
To comply with a non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the view of
E-Commerce Canada and its clients.
The original product pages presented several issues that negatively impacted user experience and sales performance:
Cluttered Layouts: Overloaded with unnecessary information and poorly placed visual elements.
Confusing Navigation: Inefficient browsing and purchasing pathways, leading to user frustration.
Lack of Scalability: Designs were difficult to adapt to different brands and products.
The Challenge
The Opportunity
This redesign offered an opportunity to:
Enhance information clarity by establishing a clean, user-friendly layout.
Improve conversion rates by streamlining key user actions like adding to cart and viewing related products.
Build a scalable design system adaptable for various product types and brands.
Research & Discovery
To understand user pain points and business objectives, I:
Worked based on the existing user data to analyze browsing behaviours and pinpoint frustrations.
Reviewed analytics data to identify high-dropoff areas on existing pages.
Benchmarked competitive e-commerce platforms for insights into best practices.
Insights from analytics highlighted that the majority of the client's users accessed the platform via desktop. As a result, the redesign focused primarily on optimizing the desktop experience while ensuring responsiveness across devices.
After the research, we concluded what elements need to be prioritized in order to ease the user pain points and listed them out from P1 to P3.
The Approach
Design Framework
The redesign process centred on creating a flexible framework with a focus on:
Visual Hierarchy: Highlighting key details such as product images, pricing, and CTAs (calls to action).
Interactive Features: Integrating dynamic elements like image zoom, product variants, and recommendations.
Responsive Design: Ensuring a consistent and seamless experience across devices.
Customizability: Allowing easy adaptation to meet brand-specific requirements.
Collaboration & Testing
Partnered with engineers to ensure smooth implementation of interactive components.
Iterated designs based on client feedback, refining layouts and functionalities to enhance user satisfaction.
The redesigned product pages delivered measurable improvements:
Increased Engagement: Placing the image gallery at the centre of the page significantly increased the time users spent on each page. This design choice encouraged users to scroll and browse additional information, leading to deeper engagement with the content. Testing revealed that Product Page A, which emphasized detailed product information over brand and policy content, resonated more with the client’s clientele due to the hand-made nature of the items. Hotjar data and user feedback post-launch further validated this approach, showing users appreciated the clear separation of product details and found the layout easier to navigate.
Improved Usability: A cleaner layout and intuitive interactions led to higher user satisfaction.
Scalability: The modular design system allowed easy application across various product categories and brands.
This project highlights the power of user-centered design in transforming e-commerce experiences, blending aesthetic appeal with practical functionality.
