Enhanced Navigation for B2B Ecommerce Platform
When tasked with redesigning this complex B2B eCommerce platform, I focused on streamlining navigation, improving product discovery, and enhancing the overall shopping experience.
Through strategic UX/UI improvements, I introduced a more intuitive onboarding flow, advanced search functionalities, and a scalable design system, leading to a measurable increase in user satisfaction and conversions.
E-commerce, B2B Sales
Role
Lead UX/ UI Designer
Team
1 Project Manager
2 Developers
4 weeks
Challenge
This company's inventory was massive and difficult to navigate, making it hard for users to find the right products quickly. The complex structure led to frustration and drop-offs, impacting sales and overall user experience. My goal was to simplify the menu, improve organization, and create a more intuitive browsing experience that helped users find what they need.
Results
By introducing the mega menu’s structure and organization, the design made it easier for users to navigate, find products quickly, and complete purchases. A cleaner layout and intuitive categories reduced frustration, leading to lower drop-off rates and higher conversions. Now, users can browse with ease, creating a smoother and more efficient shopping experience.
40%
Increased Product Discoverability
30%
Reduced Drop-off Rate
Stephan
President, Co-founder of firealarm.com
Decoding User Needs
To begin, I analyzed the current user behavior with Microsoft Clarity and found that 24.49% of users struggled with search, showing quick backs and dead clicks due to poor indexing and unrefined results. Additionally, 28.57% dropped off while browsing the shop page.
Qualitative User Interviews confirmed the issue—confusing navigation made product discovery difficult. This reinforced the need for a clearer, more intuitive inventory structure to improve engagement and conversions.
Overwhelming inventory
Large inventory of products made it difficult to find specific items.
Inefficient Search
Instead of browsing the site, users relied on Google searches to land directly on product pages, limiting product discovery.
Lack of brand visibility
Users were unsure which brands were available on the site and didn't want to be bothered to explore.
Original Menu Search
Competitor Analysis
I researched industry-leading eCommerce platforms like CarParts.com, SupplyHouse.com, and ADI.com to see how they handle large, technical inventories. By analyzing their navigation structures, I began to brainstorm on a system that prioritizes clear categories, brand visibility, and a seamless search experience.
Industry Competitors
From this Competitive Analysis research I discovered that users required:
Architecture and Structure
Controlled Information
Diminishing friction by decreasing the number of deep sub-level categories while preserving an easeful navigation.
Advanced Filters
How might we enhance product discoverability, while balancing a seamless shopping experience that drives engagement and conversions?
Streamlining For A Smarter Way to Browse
Based off of the research, a Mega Menu was the best solution. I then iterated on product categories and visual structure to make browsing more intuitive while avoiding choice overload. By analyzing the user's behaviors and running usability tests, I refined category names for clarity and quick recognition.
For example, renaming "Fire Sprinklers" to "Fire Suppression" better reflected the full product range, reducing user confusion and improving search efficiency. I also found that showing too many options at once overwhelmed users. To fix this, I limited visible choices, keeping users focused on their immediate task without unnecessary distractions.
Version 1
Version 2
This was a step in the right direction. We separated each overarching product title to reduce information overload. At this stage, I began implementing a design strategy where the menu unfolded like a page, allowing users to subconsciously recognize that a subcategory was a child of the selected element. While this approach worked for some cases, many subcategories contained additional layers of subcategories. This posed a challenge, as the design extended beyond the container constraints of the WooCommerce platform. I had to pivot once again.
Version 3
Solution
The mega menu underwent a significant changes over time to align with industry terminology and actual user search behaviors, drastically reducing friction and decision fatigue. This cut down on a lot of the "huh?" moments and made things way easier to find.
Additionally, an updated and robust search filter integration was added to work alongside the mega menu, empowering customers to browse efficiently by brand, product type, or specific industry needs. The design was meticulously crafted to prevent information overload, maintaining a smooth and intuitive user experience. Ultimately, these refinements to the mega menu significantly enhanced usability and increased engagement, driving higher conversions.
