Research Approach
To better understand the pain points and business requirements that need to be met, our team began discussing the purposes of the Product Filter Page and identifying the current issues.
After stakeholder meetings and UX team meetings, we developed the following research questions:
1. Can users find what they’re looking for and what are they interacting with?
2. Are users able to learn about our products easily?
3. What are the next page paths from this page?
4. What enhancements can we make to improve overall revenue?
Heatmaps & Recordings
By observing the heatmaps and recordings from Hotjar, we realized the following pain points:
Heatmaps (Hotjar)
- Users are interacting with the product filters quite a bit, however:
a) Higher-priority product categories were lower down the list within the filters.
b) There was no clear order of what users should interact with first and what the brand wants to push. - All the detailed filters representing products like chairs, desks, and accessories were mixed together. It was almost impossible for users, especially first-time users, to tell what is what.
Recordings (Hotjar)
- Users were primarily shopping for and looking at chairs, resulting in extremely low visibility for other products.
- There was a high use of filters; however, many users dropped off after filtering a few options.
- The sizing guide was used frequently, but users did not seem to move on to the next step (product page).
Data Review and User Interviews
Data Review
a 30-day analysis of the bounce and exit rates for the Product Filter Page (/collections/all) revealed an unoptimised bounce rate. An ideal bounce rate should fall within the 25-40% range, while anything higher than 55% is considered high.
User Interviews
To briefly understand and confirm the reasons behind the high bounce rates, we conducted short, concise interviews with 12 employees from different departments. We prepared five questions, some of which included tasks to perform on the product filter page. The questions and common answers were as follows:
1. What is your favorite product design/ variant from our brand? Can you try and find it?
• The common answer we received was that users who did not use filters initially and just scrolled down the page found it very difficult to find the product they were looking for due to the page displaying every single product category from the brand. Especially for mobile, we realised the filters were not thumb-friendly as the CTAs were so close to each other.
2. What is your first impression when you land on this page?
• Users did not know what the main priority of the page was, and many said it seemed cluttered and confusing.
3. From this page, where would you go when you need more information about product features?
• The majority of users didn't know where to go and just used the main navigation.
4. From this page, where would you go when you need product support?
• Multiple users said that if they wanted vague product support like tech specs or comparisons, they wouldn't know where to go as there were no elements for these.
5. What do you think about the presentation of product images on this page?
• Many users said the products looked quite cheap and the product card design did not give a premium feel for the price of the products.
Previous Wireflow Process
Here is the wireflow process, which highlights the importance and role of the Product Filter Page within the user’s shopping journey. As a landing page for users coming from various routes, it currently presents an issue where the page does not provide the best introduction to the brand and its products.
Previous research, including stakeholder meetings, monitoring recordings, and user interviews, identified that the main problem is this single page displays every product (chairs, desks, accessories, spare parts, etc.), making it difficult and time-consuming for users to find what they are looking for.
Heuristic Evaluation
After understanding the business goals from stakeholders and progressing with various research methods to identify the project objectives, I conducted a comprehensive audit of the current state. This audit considered previous learnings, noted each category's pain points, and identified areas for improvement.
Desktop Audit
.png)
Areas for Improvement (Desktop)
Based on previous research, these are the key findings and areas for improvement we identified for desktop:
1) Develop a clear and organised product filter to enable users to seamlessly explore and find their desired design or product.
2) Optimise product cards for a premium look and feel, with clear titles, status, and prices.
3) Display product images at their best, and explore options to show different views if possible.
4) Organise a better place for supporting content. They should be easily accessible when needed but should not dominate the page.
Mobile Audit
.png)
Areas for Improvement (Mobile)
Based on previous research, these are the key findings and areas for improvement we identified for mobile:
1) Users need to scroll significantly to reach the products, which is the main purpose of the page.
2) Product filters are poorly optimised, with checkboxes on the far left, making them hard to reach with the thumb, and the CTAs are too close to each other.
3) The sales pop-up modal resembles terms and conditions and does not effectively convey its purpose.
