Product Listings Page Design for PodConverge
DESIGNING EFFICIENCY
​
Created a solid product list page and information architecture for products based on hierarchical structure and filtering system, allowing users to easily navigate through product list.
​
Role:
UX Designer & Researcher
Client:
PodConverge
Category:
E-commerce
Year:
2024
Project overview​​
Created a solid product list page and information architecture for products based on hierarchical structure and filtering system, achieved 30 second reduction after user testing and first iteration on navigation bar.
About Podconverge
PodConverge is a Print-on-Demand (POD) startup that integrates 6+ POD providers into a single unified platform.
​
Main users
Artists, designers and small businesses who sell POD products.
​​
Goal
Allow users easily navigate between 2500+ products, compare different providers, and select the best options based on quality, speed, and suitability for their design or store.
Role
A solo UX designer, researcher and data analysis responsible for extracting data-heavy products from 6+ Print on Demand providers to a solid taxonomy and created the product list page (PLP), product cards and product page.
​
Visual overview
Time management
As a solo designer in a startup company, effective time management was critical to meet deadlines and provide regular updates to the CEO.
​
I divided the project into two phases:
​
-
Designing the Product List Page (PLP). This case study dives deeper into this phase.
-
Designing the Catalog Page
Collecting data
Before anything else I needed to put the hat of data analyst and extract extensive data/products from nine print on demand providers that our platform would be integrate with.
Challenge
After extracting data now I was facing with 2,500 products. My first challenge was creating information hierarchy that allows users to quickly understand each category and subcategories.
Approach
To create an easy-to-use product listing page, I implemented two strategies:
​
-
I incorporated a quick overview option for the product list to enhance accessibility and usability, allowing users to check the list in a matter of seconds.
​ -
I designed the subcategories to be displayed separately from other filters, which improves the discoverability of the subcategories and encourages users to navigate to more specific groups of products.
Phase one
Design Product List Page
The design and features of a PLP impacted user’s success rates at finding products they wanted to purchase by 400%!
A Baymard Institute
Discovery
Collecting Data
The product listing page (PLP) is crucial for keeping customers engaged on any e-commerce site. To create a user-centered PLP, I undertook an intensive discovery phase focused on understanding our target users and their needs. Additionally, I analyzed other Print-on-Demand (POD) providers and benchmarked against various e-commerce sites to blend the best design practices with an easily navigable product list that meets user expectations for our platform. ​
Main target users
-
Creators (artist & designers)
-
Small businesses
-
E-commerce entrepreneurs
Competitive audit
Benchmarking and competitive analysis is one of my favorite steps; it helps me to identify best practices, uncover opportunities for differentiation, and ensure our product stands out in the market. It’s also inspiring to see how other companies innovate and excel, providing ideas and motivation for enhancing my design decisions.
Key insights
-
58% of shoppers leave due to poor experience.
-
Effective product listing page design can significantly boost the growth of e-commerce stores.
-
To support the multiple ways people browse through products, a polyhierarchy can improve find-ability.
Product list architecture
Define Phase
Translating Insights
Key insights
1. Users showed a preference for navigating through fewer, more specific product groups rather than large, overwhelming lists.
2. Users favor clear, distinct subcategories to enhance navigation and reduce confusion.
Solutions
-
To address this preference, I implemented a more streamlined navigation structure by organizing products into fewer, more specific categories.
-
I designed a separate subcategory button to enhance and simplify navigation for users, helping them find the products they are looking for more easily.
Design phase
Gather input to Design
After extracting the product categories and subcategories, I moved on to creating and organizing our product listing page. 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.
PodConverge has its own design system. When designing the user interface (UI), I followed this framework closely also also expanding elements where necessary.
I designed the main categories as tabs, allows users to switch between different product types, the tabs provide quick access to each main category.
Designed subcategory cards with images to represent each subcategory, making it easy for users to identify and navigate to specific product types.
Implementation of effective subcategory navigation
In our product list page design, I highlighted available subcategories above the main product listings and separated them from other filtering options. This enhances the discoverability of subcategories, making it easier for users to navigate to more specific product groups. By encouraging users to drill down into these specific subcategories, it effectively helps them find the exact item they are looking for.
Conclusion
As the only UX Designer on this project, my journey from the beginning to delivering a successful product taught me a valuable lesson: focusing on users, planning carefully, and staying flexible are crucial for success.