top of page
Logo-14.png

Product Listings Page, PLP Design

DESIGNING EFFICIENCY

​

In this case study, I will share my journey through designing Product Listings Page (PLP) for PodConverge webpage. I will discuss the challenges I faced and how I created a solid PLP based on hierarchical structure and filtering system to allowing users to easily navigate through our product list.

​

Role:

UX Designer & Researcher

Client:

PodConverge

Category:

Product Listings Page (e-commerce)

Year:

2024

Overview

About PodConverge

​

PodConverge is a startup company that bridges the gap between leading print providers in North America and individual businesses.

​

Role

A solo UX Designer responsible for conceptualizing and creating the product list page, product cards and product page.

​

Target users

  • Small businesses

  • E-commerce entrepreneurs

  • Independent artists and designers

Challenge

The appropriate layout is the core of a good product list design. Users must be able to quickly understand each category, and how it differs from the others in order to decide where to click. 

Approach

In order to have an easy to use a product listing page I used the highlighted subcategories separately from other filters approach  which helps to increase the discoverability of the subcategories and encourage users to navigate to a more specific group of products to reduce the number of items listed and avoid choice overload.

Result​

T-shirt.png

Discovery phase

Collecting Data and Transforming Insights into Action

My design journey began with an extensive discovery phase. During the process of Illuminating the most crucial aspects of paving product listing pages (PLP), I couldn’t avoid speaking and brainstorming about a list items experience. I started by analyzing a product list of our providers. That's helped me to trust the card sorting phase.  This analysis helped me to not reinvent a wheel 

Imagine you have a nine-bedroom house filled with furniture and belongings, and you need to downsize to a one-bedroom apartment. To make this transition smooth, you must carefully organize everything, get rid of duplicates, and ensure every item has its place. This is akin to what I did for PodConverge's website.

​

Faced with integrating a multitude of products and categories from various print providers, I meticulously sorted and arranged them to create a cohesive and easy-to-navigate information architecture. By placing each product and category side by side, I eliminated duplicates and ensured comprehensive coverage, resulting in a streamlined, user-friendly platform. This process made the complex structure of the site more accessible, just like fitting all your belongings into a smaller, well-organized space.

​​
 

Extracting data from existing providers

warning_194330.png

Problem

Many products were not listed under clear categories and could only be found using the search function. This required a careful manual review to sort and organize each product correctly.​

Screen Shot 2024-03-25 at 4.24_edited.png
Screen Shot 2024-03-25 at 4.24_edited.jpg
Screen Shot 2024-03-25 at 4.25_edited.jpg

Gather input to Design

After extracting the product categories and subcategories, we moved on to creating and organizing our information architecture. A key consideration in this process was to design the categories to be broad enough for future expansion while remaining easy for users to navigate.

Screen Shot 2024-06-18 at 3.54_edited.jpg
star_3004112.png

PodConverge's visual design is built based on the Ant Design System. For this project, I stick to our design system guidelines to ensure consistency and coherence in the UI.

Navigation bar

Page-Header-2.png

Sub-category card 

Product overview card 

Card (2).png
Card (3).png
Card-3.png
Product-card.png
Product-card.png

Additional filtering options for products with variations to enhance user navigation and findability.

Catalog pages

Men's Clothing-5.png
Women's Clothing-4.png

Product summery page

Tank Top.png
T-shirt.png

Conclusion

As the sole UX Designer on this project, the journey from initial discovery to successful product handover has demonstrated the power of user-centered design, strategic planning, and the value of a flexible and skilled approach to design.

bottom of page