b2b e-COMMERCE PLATFORM
Improve product findability for cabinet business buyers
Role
UX Designer
Team
10 Developers & PM
Timeline
Feb 2022 - Aug 2022
Context
In 2021, Noviland, a national cabinet supplier, launched a B2B platform to offset the impact of COVID-19 on offline sales.
After four months of low online orders, I was brought in to lead a redesign aimed at boosting sales and enhancing the user experience.
IMPACT
My contribution
Led user research and usability testing to uncover key pain points, then translated insights into improved filter designs with wireframes and prototypes for web and mobile, using design tokens.
Collaborated closely with the founder, PM, and developers to align business goals with user needs.
PROBLEM
According to the Google Analytics 4, I found out:
of users visited category pages but didn't proceed to check out.
of users leaves the site after scrolling category page just a little.
of users didn't reach product page.
USER INTERVIEWS
I led user interviews with 10 participants (5 current users and 5 potential users) to understand their shopping habits, and found out they struggle to quickly find the cabinets they need.
💡
Clarity
80% Users are confused due to navigation poor visual hierarchy & direction.
📌
Goals
85% Users want more filter categories and better filter accuracy.
Challenge
How might we help users quickly find what they're looking for?
brainstorm process
I aim to streamline the product search experience by restructuring navigation and implementing more precise filters, helping users find what they need faster and more accurately.
USABILITY TESTING & ITERATIONS
Two rounds of usability testing were conducted with six regular users. The filters went through two iterations based on their feedback.
Navigation Testing
original design
Problem: Overwhelming information density and unclear hierarchy & relationships.
1ST ITERATION
Change 1: Dropdown > Tabs
(Replace nested menus with tabs showing higher-level categories.)
Final design
Change 2: Keep only the room categories relevant to shopping
(Minimize the time and effort required to take users to the category page.)
Filter Testing
ORIGINAL
Problem: Real-time feedback cannot be provided, and multiple selection often produces either too many irrelevant results or no results at all.
1st iteration
Change 1: Checkbox > Radio
(Switched to single selection to enable faster and more accurate filtering, providing users with an immediate overview.)
Final design
Change 2: Primary filter displayed horizontally, with sub-filter categories positioned on the left and scrolling alongside the user.
(For more accurate filtering, capture user attention at first sight for high-level filtering, while displaying the remaining filters vertically to allow users modify filters while scrolling.)
Final Design
Previous NAVIGATION Design
Previous FILTER Design
filter final design
Takeaways
In the real world, design decisions are often driven by the need to achieve business goals. It’s essential to ensure that designs align with these goals.
Foster collaboration and clear communication across cross-functional teams to better understand constraints from diverse perspectives.