Overview

Research & Discovery

Usability Testing

Iterations & Improvements

Solution

Impact & Solution

Enhanced Navigation for B2B Ecommerce Platform

Enhanced Navigation for B2B Ecommerce Platform

FireAlarm.com is a B2B fire safety distributor with thousands of SKUs. As Lead UX/UI Designer, I redesigned their mega menu and product discovery experience to turn a cluttered header into a clear starting point for shopping, learning, and exploring brands—without breaking existing systems.

FireAlarm.com is a B2B fire safety distributor with thousands of SKUs. As Lead UX/UI Designer, I redesigned their mega menu and product discovery experience to turn a cluttered header into a clear starting point for shopping, learning, and exploring brands—without breaking existing systems.

Impact

  • Product discoverability increased by ~40%

  • Menu-related drop-offs decreased by ~30%

  • Navigation now supports promos, brands, and content without overwhelming users

Methods

  • Reworked the information architecture into clear product families

  • Simplified the mega menu and moved detailed filtering into a dedicated search/filter experience

  • Analyzed user behavior (click maps, drop-offs, “quick backs”) to validate decisions

The Challenge

Analytics from Microsoft Clarity showed that nearly a quarter of users struggled with search and bounced after dead clicks or quick backs. Another large group dropped off while just browsing the shop, often turning to Google instead of using the site’s navigation.

The original search tried to show everything at once with deep subcategories, inconsistent labels, and weak brand visibility which was making product discovery feel like work and limiting cross-sell opportunities.

Analytics from Microsoft Clarity showed that nearly a quarter of users struggled with search and bounced after dead clicks or quick backs. Another large group dropped off while just browsing the shop, often turning to Google instead of using the site’s navigation.

The original search tried to show everything at once with deep subcategories, inconsistent labels, and weak brand visibility which was making product discovery feel like work and limiting cross-sell opportunities.

Original Search

Original Search

Original Search

How might we enhance product discoverability, while balancing a seamless shopping experience that drives engagement and conversions?

How might we enhance product discoverability, while balancing a seamless shopping experience that drives engagement and conversions?

Research & Discovery

Using Microsoft Clarity, I saw that 24.49% of users struggled with search and 28.57% dropped off while browsing the shop page. This confirmed we were losing potential sales before users ever reached “Add to Cart.”

Using Microsoft Clarity, I saw that 24.49% of users struggled with search and 28.57% dropped off while browsing the shop page. This confirmed we were losing potential sales before users ever reached “Add to Cart.”

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.

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.

Competitor Analysis

I studied large, technical ecommerce sites like CarParts.com, SupplyHouse.com, and ADI.com to see how they handled massive inventories. The strongest patterns: clear product families at the top level, visible brand entry points, and a tight connection between navigation and filters.

These examples guided my approach: keep the menu focused on high-level families and brand discovery, and let a dedicated filter experience handle the detailed attributes.

I studied large, technical ecommerce sites like CarParts.com, SupplyHouse.com, and ADI.com to see how they handled massive inventories. The strongest patterns: clear product families at the top level, visible brand entry points, and a tight connection between navigation and filters.

These examples guided my approach: keep the menu focused on high-level families and brand discovery, and let a dedicated filter experience handle the detailed attributes.

How might we enhance product discoverability, while balancing a seamless shopping experience that drives engagement and conversions?

Usability Testing

I ran qualitative interviews and task-based tests with FireAlarm.com’s core users: contractors, technicians, and facility managers.

Most participants described the original navigation as “cluttered” or “confusing,” and several admitted they used Google instead of the menu when they felt stuck. This reinforced the need for a simpler, more intuitive inventory structure that matched how they actually think about products.

I ran qualitative interviews and task-based tests with FireAlarm.com’s core users: contractors, technicians, and facility managers.

Most participants described the original navigation as “cluttered” or “confusing,” and several admitted they used Google instead of the menu when they felt stuck. This reinforced the need for a simpler, more intuitive inventory structure that matched how they actually think about products.

Photos from User Testing featuring my emotional support coffee :)

Photos from User Testing featuring my emotional support coffee :)

Photos from User Testing featuring my emotional support coffee :)

From the research and testing, users clearly needed:

  • Architecture and Structure

An ordered structure of top-priority filters with simplified names on the menu to avoid overwhelming visitors with excessive, non-essential data.

An ordered structure of top-priority filters with simplified names on the menu to avoid overwhelming visitors with excessive, non-essential data.

An ordered structure of top-priority filters with simplified names on the menu to avoid overwhelming visitors with excessive, non-essential data.

  • Controlled Information

Diminishing friction by decreasing the number of deep sub-level categories while preserving an easeful navigation.

Diminishing friction by decreasing the number of deep sub-level categories while preserving an easeful navigation.

Diminishing friction by decreasing the number of deep sub-level categories while preserving an easeful navigation.

  • Advanced Filters

The ability to finely choose products based on their manufacturer, brand, or other attributes that are beneficial for industry-specific customers.

The ability to finely choose products based on their manufacturer, brand, or other attributes that are beneficial for industry-specific customers.

The ability to finely choose products based on their manufacturer, brand, or other attributes that are beneficial for industry-specific customers.

Streamlining For A Smarter Way to Browse

Based on these insights, I proposed a mega menu as the primary navigation pattern. I refined category names to be more recognizable, tested different groupings, and limited how many options appeared at once to avoid choice overload.

Early iterations used more precise industry language (like “Fire Suppression” instead of “Fire Sprinklers”) and surfaced advanced subcategories directly in the menu. This helped with clarity, but exposed scalability and maintenance issues as the catalog grew.

Based on these insights, I proposed a mega menu as the primary navigation pattern. I refined category names to be more recognizable, tested different groupings, and limited how many options appeared at once to avoid choice overload.

Early iterations used more precise industry language (like “Fire Suppression” instead of “Fire Sprinklers”) and surfaced advanced subcategories directly in the menu. This helped with clarity, but exposed scalability and maintenance issues as the catalog grew.

Iterations & Improvements

  • Version 1

    This first render was primarily to gauge the number of subcategories rather than create a final design. However, seeing all the categories at once quickly became overwhelming. Additionally, separating them in this way proved nearly impossible. It was at this point that I realized many subcategories had even more layers of subcategories within them. I had to pivot.

    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

    Almost there! In this version, I removed deep subcategories and moved them to a separate search/filter. This allowed me to organize the parent and immediate child categories efficiently while also leaving space for any blog or media my client wanted to showcase.


    The final step was refining the UI to ensure users could easily distinguish between parent and child elements without overwhelming them with too many components. This approach maintained clarity while preserving the site's overall design language and integrity.

    Version 4

    Now I ALMOST was satisfied with this version. It met all of the initial needs. Removed deep sub catagories, allowed for ads for sales elsewhere on the website, and featured a language that technicians within the industry used naturally. However during final testing stages, leadership wanted to change the mega menu to make room for future changes of the website. Not only did this need to organize their massive inventory, this now had to be made to scale for any additional content for the site.

  • Version 1

    The first version listed all subcategories in a wide grid to understand the full scope. Seeing everything at once quickly became overwhelming, and it revealed that many subcategories had additional nested layers that wouldn’t scale in this format.

    Version 2

    I separated overarching product titles and introduced a “page-like” unfolding behavior so it was clear which items were children of a selected category. This helped with hierarchy, but the menu grew beyond platform constraints and didn’t handle deep nesting well.

    Version 3

    I removed deep subcategories from the menu and moved them into the filter experience. The mega menu now focused on parent and immediate child categories, with room reserved for featured media or promos. This kept things cleaner while still supporting discovery.

    Version 4

    This version balanced clarity, industry language, and business needs—removing deep subcategories, allowing space for promos, and using terminology technicians recognized. During final testing, leadership requested a more future-proof structure that could support any new content or product lines, which led to the final, product-family model.

Solution

In the final iteration, I shifted away from tightly bound industry jargon and into a scalable product-family model. The left rail now anchors the menu with clear, flexible families like Detectors, Control Panels, Batteries, Manual Stations, Notification Appliances, Fire Sprinklers, and more. These act as stable “buckets” the team can expand over time.


Within each family, the middle and right columns break items into specific types—smoke, beam, gas, duct, and flame detectors, plus variants like combination smoke & CO and linear heat detection. Users first pick a family, then refine within that group or move into filters for more detail.


The layout itself is a reusable pattern in the design system: a persistent left rail for families, a middle column for core subtypes, and a right column for variants and accessories. This keeps the experience easy to scan for users and easy to scale for the business.

Final Design

Final Design

Final Design

Impact & Reflection

Shifting to product families instead of heavy industry jargon turned out to be a win for both sides. Users get a menu that feels cleaner and less intimidating, while power users can still drill into the exact detector or device type they need with minimal friction.

For the business, the mega menu is now a stable framework: new categories, brands, or content can be added without blowing up the IA or redesigning the header.

The biggest lesson for me was balancing “technically perfect” organization with what actually scales in the real world. Earlier versions mapped closely to industry language but were harder to maintain and overwhelming for non-experts. The final solution is more flexible, easier to extend, and still grounded in real user behavior—turning the navigation into a long-term system, not just a one-off redesign.

"Working with Natalie was a game-changer for FireAlarm.com. She took our outdated, cluttered website and transformed it into a sleek, intuitive experience that not only looks great but also drives real results. Since implementing her UX/UI improvements, we've seen a noticeable increase in user engagement and sales."

"Working with Natalie was a game-changer for FireAlarm.com. She took our outdated, cluttered website and transformed it into a sleek, intuitive experience that not only looks great but also drives real results. Since implementing her UX/UI improvements, we've seen a noticeable increase in user engagement and sales."

Stephan

President of Firealarm.com

More Projects

Developed A Communication System to Elevate Player Engagement

Designed a communication system, allowing players to share achievements and engage with their community without leaving the platform.

View case study

Premium UX Template for Framer

40%

MAU and DAU

50%

Increase in user engagment

Developed A Communication System to Elevate Player Engagement

Designed a communication system, allowing players to share achievements and engage with their community without leaving the platform.

View case study

Premium UX Template for Framer

40%

MAU and DAU

50%

Increase in user engagment

Aimlab VR

I designed core menus and in-game UI for Aimlab’s early VR prototype, translating its PC experience into a comfortable, readable, and intuitive 3D environment for players training in VR.

Bread & Butter

I created the visual identity and landing page for Bread & Butter, an AI education platform that helps everyday professionals learn how to actually use and monetize AI.

Nourish x Noir

I crafted the visual identity, packaging, and launch visuals for Nourish x Noir, a holistic, black-owned skincare brand and studio.

Aimlab VR

I designed core menus and in-game UI for Aimlab’s early VR prototype, translating its PC experience into a comfortable, readable, and intuitive 3D environment for players training in VR.

Bread & Butter

I created the visual identity and landing page for Bread & Butter, an AI education platform that helps everyday professionals learn how to actually use and monetize AI.

Nourish x Noir

I crafted the visual identity, packaging, and launch visuals for Nourish x Noir, a holistic, black-owned skincare brand and studio.

Don't be shy.
Say Hi

© 2024 Designed by Natalie Valcourt

Don't be shy.
Say Hi

© 2024 Designed by Natalie Valcourt

Don't be shy.
Say Hi

© 2024 Designed by Natalie Valcourt

Create a free website with Framer, the website builder loved by startups, designers and agencies.