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:
Product Designer
Client:
PodConverge
Category:
E-commerce, SaaS
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
Product designer and researcher responsible for extracting data-heavy products from 8+ Print on Demand providers to a solid taxonomy and created the product list page (PLP), product cards and product page.
​
Accomplishment
+30% increase on user navigation time.
​
+4 new features based on user feedbacks.
​
Before
After
Our value proposition
I worked on understanding PodConverge’s value proposition by comparing it with competitors in the market.
Competitive audit
Conducted with direct (10 websites) and indirect (over 30 websites) competitors. I analyzed how they approached navigation bars and designed their pages, drawing ideas that could inform my approach while aligning with our unique goals.
SWOT
"58% of shoppers leave due to poor experience."
These led me to the ‘How Might We’ stage, where I framed key design challenges:
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 components where necessary.
Navigation bar
I started by designing the navigation bar, aiming to accommodate the wide variety of products we offer. My first initial design featured a breadcrumb bar on the top and a clickable flash navigation on the bottom to reveal more options. However, my first round testing revealed a challenge, users found it difficult to see the full scope of available products.
​
To address this, I shorten the titles and introduced a ‘View All’ option in the navigation bar. This allowed users to see the entire catalog at a glance, making it much easier to explore all the categories.
Category page
Beneath the ‘View All’ option, I added product cards that included both images and titles. This visual approach helped users quickly understand and navigate through the options, streamlining the browsing experience.
Product card
For the product card, I used color coded label to make it more recognizable on a glance. In addition to improve usability, based on user feedback. I also introduced new features, options like ‘Best Available Price’ and ‘Best Available Shipping Price’ to the product cards. These features empowered users to make more informed decisions and added value to their shopping experience.
Product list page
Usability study
To rapidly improve my design and create a user-centered product, I conducted moderated user testing. I asked three potential users to complete assigned tasks and observed their behavior and struggles to identify areas for improvement.
After testing with users, I found that they preferred a quick view to the product image in more detail. To address this, I added a feature where users could hover over the image to see both the front and back of the product. This gave them a clearer, more immediate understanding of what they were looking at, without needing to click through to a separate page.
Before
After
-
The original design made it hard for users to clear selections in the filters. I added a ‘Clear All’ option and a close button for each selected filter, making the process much easier and faster.
-
Second, information about the quantity of products give clarification so I added that information on top of the page.
Before
After
What I learned
One of the key things I learned during this project is the importance of continuous user feedback. Testing the design early and often helped me uncover pain points I hadn’t anticipated, such as the need for a clearer view of product variations and the ease of unselecting filters.
I learned how valuable it is to be flexible in the design process. While I started with certain ideas, being open to iterating based on user feedback allowed me to refine the design in ways that truly improved usability and satisfaction.
Next step
My designs are on the developers hand, stay tuned the magic will be reveal soon.