Redesigned Content Layout, Product Categorization, Search and Advanced Filter System to enhance Product Wayfinding
Improve Product Discoverability and Improve conversion for JV Hardware
In collaboration with our engineering department, we have facilitated JV Hardware's successful digital transformation. By implementing enhanced search functionality, faceted filter options, and advanced product categorization tailored to different customer segments, we have significantly their website's discoverability and increased conversion rates.
Project Type
UX Design, User Research, Web Design
Team Member
Team Member
Xiaoping Shang, Josh (Technical Engineer), Albert Lam (Chief Product Manager)
My Role
UX Researcher, UX Desinger, Graphic Designer
Duration of Completion
8 weeks
Problem
The product manager received complaints from clients indicating a decline in business sales. To address this issue, we initiated a thorough investigation to identify the underlying problems affecting the customer experience and conversion rates on the website. Using data-driven insights from Google Analytics / eWebShop analytics, and qualitative research methods such as surveys and interviews, we uncovered several critical pain points that are likely contributing to the drop in sales.
Upon reviewing our data, we identified a considerable bounce-off rate on the homepage. It appears that many users are exiting during their product browsing experience. Feedback indicates that users find "Products difficult to locate, and there is insufficient information updated post-purchase."
Object
What I Fixed
Optimized Navigation & Search: Implemented thematic categories, dynamic filters, and intelligent search to improve product discovery and reduce friction.
Real-Time Product Updates: Introduced live stock indicators, global notifications, and automated price adjustments to enhance transparency and decision-making.
Designing a framework that provides guidance on handling requests for site-wide JV Hardshop messaging and notification banners.
What I Achieved
CONVERSION RATE
+12%
FIRST 3 MONTHS POST LUNCH
DROP-OFF RATE
-15%
FIRST 3 MONTHS POST LUNCH
CUSTOMER COMPLAINT
-20%
FIRST 3 MONTHS POST LUNCH
RESEARCH
Analytics Review
The Google Analytics data reveals critical UX friction points across three key areas: high bounce rates indicating first-impression failures, checkout process abandonment due to procedural complexity, and poor conversion rates for hybrid online/offline services.
The trends hinders the following challenge
Difficult Product Navigation and Discovery
Home Page: A 60% bounce rate may indicate challenges related to initial impressions or ambiguous navigation options. Search Bar Usage: An 80% bounce points to potential frustration stemming from an ineffective search function. All Products Page: A 52% bounce rate suggests confusion, due to an overwhelming number of categories or a suboptimal navigation structure
Incomplete Product Information
Potential customers encounter incomplete or unreliable product information, causing uncertainty and distrust. This manifests as drop-offs after viewing product details, likely due to missing specifications, inadequate pricing context, or inconsistent stock information. The lack of clear, comprehensive details hinders informed purchase decisions.
Inadequate Real-Time System Updates
The website fails to provide timely and accurate information about product availability and other critical updates. Users are often unaware when items go out of stock or when there are changes in pricing or specifications.
Define Target User Group
Our Platform has 3 types of users, construction workers, community members, and regular product explores.
Construction Worker
-
Needs: Immediate access to tools and materials for on-the-spot use.
-
Pain Points: Difficulty verifying product availability and stock levels, leading to wasted trips.
-
Behavior: Contractors often know what they need and expect clear categorization and real-time stock visibility.
Home Solution Seeker
-
Needs: Expert advice and recommendations for solving specific problems (e.g., mesh repair, plumbing issues).
-
Pain Points: Lack of personalized service or product suggestions that address their unique challenges.
-
Behavior: These customers are less product-focused and more solution-oriented.
Regular Product Exploers
-
Needs: Browsing products online to plan in-store pickups.
-
Pain Points: Inconsistent product categorization and lack of a recommendation system to guide their exploration.
-
Behavior: They may abandon the site if they cannot easily find what they are looking for.
To Identify the friction points between the current the customer and our website, a journey map is crafted.
.png)
Design Sprint
Narrowing down the challeneges
After successfully conducting research, analyzing the website structure, organizing product information, and reviewing current search functionalities, compiled the identified issues on an affinity map. A meeting took place with four participants: JV Hardware, myself, the product manager, and engineer. We prioritized the problems using an impact and effort.
The Must Solve:
The Poor Search Functionality
The search system is inadequate, providing irrelevant results due to poor indexing, lack of typo tolerance, and no predictive/autocomplete suggestions. Cause of the poor navigation, customers are losing patience with our website, thus, resulting in a high bouncing rate.
Lack of Real-Time Stock Visibility and Recommendation
Users encounter discrepancies between online stock availability and in-store inventory, with no alternative suggestions for out-of-stock items or personalized recommendations.
Insufficient Notification System and Order Tracking :
The notification system fails to provide proactive updates about order status, while the order tracking feature lacks clarity and real-time updates specific to in-store pickups.
How Might We
Improve our customer satisfaction thourgh
Enhanced Search Function
By implementing thematic categories, dynamic filters, and intelligent search features to simplify product discovery and reduce frustration.
Proactive Notification System
By introducing live stock indicators, global alerts, and automated price adjustments to keep users informed and confident in their purchases.
Tailored Shopping Experiences
Implement clear categorization, breadcrumbs, and thematic navigation paths to help users quickly locate products.
DESIGN STRATEGY
Ideation
I then began sketching out the website, breaking up each category, section and feature separately. It was important to refer to my competitor feature analysis and look to incorporate features that would be familiar to the users.
PROTOTYPE
What We Do
After a series of analysis, audition and comparison. We identified the major problems and came up with the series of solutions.
Solution Overview
What the new update will feature:
Improved Navigation & Wayfinding – Added intuitive categories and breadcrumbs for seamless task-based browsing and navigation tracking.
Advanced Faceted Filtering System – Implemented adaptive, product-specific filters for more relevant and efficient selection.
Dynamic & Intelligent Search – Enhanced search with typo tolerance, synonym recognition, personalized history, and category-based autocomplete.
Enhanced Page Layout & Visual Hierarchy – Optimized page structure to highlight key products, features, and calls-to-action for better usability.
Real-Time Stock & Price Update System – Provided instant stock updates, alternative suggestions, and dynamic pricing adjustments for a smooth shopping experience.
Intuitive categories and thematic task-based categories with navigation tracking.
I didn't just categorize products by their original segments; instead, I create tailored pathways based on our user personas to better meet diverse needs in product discovery.
Adaptive, product-specific filters for more relevant and efficient selection.
The system is progressive, allowing users to apply multiple specifications simultaneously through a multi-select function, enabling them to refine their search with two or more criteria at once.
The new design features faceted collapsible filters that include category-specific filters, thematic filters, and functional filters, providing a tailored and intuitive user experience. The arrangement logic is thoughtfully prioritized based on customer survey feedback, ensuring the filters are both highly functional and aesthetically pleasing, while remaining user-centric to align with the needs and preferences of our audience.
Dynamic & Intelligent Search
Users can input random keywords, and the automated predictive search will guide them in finding related products as needed.
Related Products will be displayed on the right side, providing users with quick access to items associated with their search.
If users can't find the exact results they're looking for, AI Integrated search systems will suggest possible search outcomes based on their previous inputs and offer helpful recommendations.
Such key words suggestions can be found on product page as well.
Dynamic frame for notification system
A notifcation framework that provides guidance on handling requests for site-wide JV Hardshop messaging and notification banners.
The notification disruptors seek to understand the visual hierarchy of messages pertaining to JV Hardware products and order statuses. The aim is to this hierarchy to convey urgency and grab attention effectively. By customizing messages for various statuses, they strive to communicate clearly and engage the user's focus.
The primary categories include Urgent Attention, Informational Attention and Mild Informational Attention. Red signifies high urgency, yellow indicates a warning, and represents informational content.
The above outlines two scenarios in which one of the user's is out of stock. The user will receive a notification via the disruptor at the top, and an embedded cross-link will direct them to the product page.
Unlike regular status products, notified products on the left (such as those that are out of stock or under a manufacturing recall) cannot be ordered or retrieved by users. In these cases, the relevant suggestions section will be prioritized to offer solutions for customers, ensuring it appears at the top.
JV Hardware, a look refreshed
Enhanced Page Layout & Visual Hierarchy – Optimized page structure to highlight key products, features, and calls-to-action for better usability.
.png)
Added AR and Image search function
"With improved technology enabling users to search and discover products, whether browsing online or exploring in-store, customers will never feel lost."
Accessibilty assuraed
To cater to our diverse user base and their varying needs, we inclusivity by addressing accessibility throughout the discovery process.
.png)
Total of 9 Color Blind mode is designed, tailored for different user with accessbility in vision.
User select font size based on their needs.
The accessible button is also available throughout the shopping experience.