Product Listing Page Layout & Usability Enhancements
Role: Product Designer
Team: Product Manager, E-commerce Site Manager, Engineer
Duration: September 2024 - November 2024
A member of our e-commerce team flagged an issue with product badges obstructing key imagery on our Product Listing Page (PLP). As I worked on a solution, I identified additional opportunities to refine the layout, improve product visibility, and enhance usability—leading to a more polished and intuitive shopping experience.
The Problem
Our product badges were covering essential parts of product images, often obscuring key details or even models' faces. This compromised the visual appeal of our product pages and made it harder for customers to fully see the items.
While working on a an alternative badge placement that wouldn't interfere with the imagery, I saw a bigger opportunity to elevate the entire PLP experience by addressing layout and usability issues.
Expanding the Scope
Beyond product badges, I identified additional key areas for improvement.
- Product Grid Optimization: Analyzed PLP filter engagement rates and found that static desktop filters had low interaction levels. This insight led to moving from a 3-column to a 4-column grid, improving product visibility and enabling better product groupings.
- Expanded imagery to full-bleed, creating a more premium and immersive shopping experience.
- Downsized color swatches, allowing us to display more color options while ensuring a cleaner, more intuitive browsing experience.
- Updated Footer Design: Proposed an updated full-bleed footer featuring a large brand logo, reinforcing a luxury aesthetic and contributing to a more immersive site experience.
- Product Grid Optimization: Analyzed PLP filter engagement rates and found that static desktop filters had low interaction levels. This insight led to moving from a 3-column to a 4-column grid, improving product visibility and enabling better product groupings.
- Expanded imagery to full-bleed, creating a more premium and immersive shopping experience.
- Downsized color swatches, allowing us to display more color options while ensuring a cleaner, more intuitive browsing experience.
- Updated Footer Design: Proposed an updated full-bleed footer featuring a large brand logo, reinforcing a luxury aesthetic and contributing to a more immersive site experience.
Before & After
Filters Panel
In-Grid Content Blocks
Conclusion
What began as a simple fix for product badges turned into a broader UX and visual enhancement for the PLP. By proactively identifying layout and usability improvements, I helped design a cleaner, elevated shopping experience that better showcased our products.
Stakeholders loved the updates, and our product manager successfully integrated these enhancements into incremental sprints over the second half of the year. This experience reinforced that even when addressing a specific issue, stepping back to consider the bigger picture can lead to a stronger, more impactful solution