From Browsing to Buying: A Case Study in Redesigning Product Display Pages for Improved User Experience
Introduction
This case study explores the redesign of an e-commerce Product Display Page (PDP) to enhance information accessibility and boost user engagement. It outlines the process of addressing usability issues, refining product presentation, and improving the overall user experience to drive conversions.
Context
-
The company's existing Product Display Page (PDP) had hidden or incomplete product information, hindering user engagement and impacting conversion rates.
Research Methodologies
-
Competitive Features Analysis
-
Competitive Brand Analysis
-
Affinity Mapping
-
User Personas
-
User Journey Mapping
-
MoSCoW Analysis
Research Findings
Critical issues were identified, including unscannable product descriptions, inconsistent product information across pages, and small-sized product images without enlarging capabilities.
Research validated the necessity for increased scannability and emphasized the significance of visual hierarchies in enhancing user interaction.
UI Methodologies
-
User Flow
-
Lo-fi Sketches and Prototype
-
Wireframes
-
Mid-Fi Prototype
-
Hi-Fi Prototype
UI Optimizations
-
Redesigned the PDP focusing on mobile-first design principles to prioritize information accessibility to facilitate seamless product browsing
-
Enlarge product images to ensure efficient screen space use and provide a more immersive browsing experience
-
Restructured the layout with a more pronounced visual hierarchy for improved scannability, providing a more intuitive flow for the user to quickly and easily extract relevant information
Prototyping & Testing
-
Usability testing results led to design changes in the structural organization of the design, resulting in streamlined user engagement and improved visibility of essential elements.
Mid-Fi Frames
Screenshots of Hi-Fi Design in Various States
Implementation & Impact
Rollout of Optimizations
-
Usability testing results led to design changes in the structural organization of the design, resulting in streamlined user engagement and improved visibility of essential elements.
Measuring Impact
-
Focusing on mobile-first design significantly contributed to a seamless user experience, which, once tested and observed, positively affected an increase of 27% of the site sales made via mobile in the first month before being implemented across all other device platforms.
Conclusion
-
This redesign focused on user-centric principles, leading to an optimized layout that met user needs and facilitated a smoother purchase journey.
-
This study underscores the significance of visual presentation, mobile-first design, and user-centric design in boosting user engagement and conversions.
Before Redesign
Mobile View of PDP
After Redesign
Mobile View of PDP
Thanks for checking out my work! If you'd like to check out the prototype for this project, please click here.