Product Listings Page Design
​
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 product list page and information architecture for products, based on hierarchical structure and filtering system. That stands with 2 company's goal:
1. Building trust with users by creating a consistent and reliable shopping experience.
2. Simplifying product discovery to boost conversions and encourage basket-building.
​​
Role
UX/UI designer and researcher 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.
​
Accomplishement
+30% increase on user navigation time
Before
After
"58% of shoppers leave due to poor experience."
Competitive audit
Conducted with direct (10 websites) and indirect (30 websites) competitors
SWOT
Information architecture
A key consideration in designing the information architecture was organizing categories and subcategories that are broad enough to allow for future expansion, while still being intuitive and easy for users to navigate.
PodConverge has its own design system. I followed this framework closely also expanding elements where necessary.
Category page
Designed tabbed navigation bar for quick access to different product types, enhancing user navigation.
Designed subcategory cards with images, allowing users to easily identify and navigate to specific product types.
Product card
Tags for quickly identification
Easy overview of provider
Enhanced filtering
Product list page
Use of tabs to filter products by category.
Filter options improving user search efficiency.
Suppliers card
Product page
Usability study
After conducting user testing, I identified opportunities for improvement in the first iteration.
Improvement note
Next step
The next step is to iterate on my design based on the feedback received.