Wholesale B2B
Search Enhancement

The baseline

Navigational friction

Moving a wholesale platform's search from a hidden, tab-nested box to a fast, site-wide tool cut ordering friction for over 1,300 retailers.

The original layout buried the search bar. Even on the "View All Products" page, search lived inside specific navigation tabs instead of sitting at the top of the site. That meant store managers had to actively hunt for the right tab before they could even start typing — instead of searching from wherever they already were.

To see how much this was costing people, I ran the product grid through a third-party attention-modeling tool — it predicts where user focus lands based on real aggregated eye-tracking data, rather than tracking these specific users live. The model showed attention scattered across the crowded grid rather than landing anywhere useful, which matched what we already suspected: buyers were manually scanning dense rows of text just to find basic details. That became the case for building something search-first.

Cognitive overload

Store managers had to scan a crowded screen just to locate the search box nested inside the tab layout — an extra mental step slowing down their weekly restocking routine.

Metadata fragmentation

Product details like brand and potency level were buried in the standard list view, making items hard to compare quickly even once found.

Interaction cost

Because search only lived inside the product-listing tabs, a retailer couldn't look something up from their account or cart page without resetting their whole path to go find that tab again.

Transitioning a major wholesale platform from a hidden, tab-nested search box to a fast, site-wide discovery engine allowed us to cut ordering friction for over 1,300 retailers.

The original layout buried the search bar. Even on the "View All Products" page, the search box was tucked away inside specific navigation tabs rather than sitting prominently at the top of the entire site. This forced a slow, step-by-step mental model where store managers had to actively look for the tab containing the search input, rather than just clicking and typing from wherever they happened to be.

As the initial attention map shows, user focus was completely scattered across the crowded grid. Because the search wasn't intuitive or easily accessible, buyers were forced to hunt through dense rows of text and manually scan individual cards just to find basic details. This visual evidence of an awkward, hidden layout became our main case for building a simpler, search-first solution.

The Discovery

User flows

To fix this, I mapped a new path that shifts the experience from scrolling toward direct, intentional search — a site-wide search modal that works as a shortcut for repeat buyers who already know what they want.

The original flow required store managers to land on the platform, open the general shop view, and hunt down a nested search box before they could filter anything. Looking up items across different sections meant resetting that path each time — real friction for repeat buyers with a known SKU in mind.

Mapping both flows side by side showed a genuine reduction in the number of interactions it took to get an item into the cart, while also giving retailers more freedom in how they got there — search from anywhere, jump straight to size selection, or browse normally, instead of one fixed path. The new modal also surfaces shortcuts like recently viewed items and popular search terms, so a returning buyer isn't starting from zero.

The system

Wholesale architecture

Designing a good-looking product card wasn't the hard part — the catalog itself is complex. Cards need to show strict, legally mandated information (health warnings, potency ranges) alongside standard e-commerce choices like size, color, and quantity, and that mix changes depending on product type.

Rather than build a separate card for every product type, I built one modular card template in Figma with rules that adapt automatically — the same structure flexing to handle over twelve product categories, instead of twelve different layouts to maintain.

Building it as a system rather than a static drawing paid off at handoff. Developers could inspect a single master component in Figma Dev Mode and see the exact spacing, type, and interaction states needed for production directly — cutting down the back-and-forth that usually eats up early sprints, while keeping every card compliant by default.

To keep this manageable, I developed a single, modular product card template in Figma. Instead of building dozens of separate cards for different product types, this layout uses smart rules to adapt automatically. The anatomy blueprints on the left show how we standardized the structure, while the variations on the right show how the card cleanly shifts to handle over twelve different product categories.

By building the card as a dynamic system rather than a static drawing, I ensured a highly efficient handoff for our engineering team. Developers can inspect a single master component in Figma Dev Mode and instantly see the exact spacing constraints, typography styles, and interaction states required for production—saving weeks of back-and-forth alignment while automatically maintaining compliance.

Component Property Ops

One component, many uses: a single master card adapts based on item type (dried flower vs. topicals, for instance), keeping the Figma file lightweight for the whole team.

Ready for Developers: every hover, active, and error state is mapped out, so engineers can pull exact behavior without messaging me to ask.

Defined Layout & Spacing Tokens

8px Grid: a consistent spacing system for padding and margins, so text doesn't overlap or collapse on smaller screens.

48px tap targets: sized for retailers and warehouse staff using tablets on the move, where a misclick costs more than it does on desktop.

Logic & Compliance

Accessibility built into the tokens: contrast and text sizing are part of the system itself, so a global update stays compliant automatically rather than needing a manual re-check.

Regulatory slots: dedicated space in the card layout for required data like THC content and health warnings, so the layout doesn't break when regulations change.

The Outcome

Results

Running the same attention model against the new layout showed a clear shift — focus concentrated on the search results and product variations, instead of scattering across the page the way it did in the baseline.

Faster ordering path

Bringing size selection directly into the search modal cut down the number of steps between a search and a completed cart addition, while still giving retailers the freedom to browse normally if they preferred.

Long term stability

The layout has been the active production standard for over two years without requiring major structural changes — a good sign the underlying system was built on the right foundation, not just a design that looked good at launch.

Fewer order errors

Requiring buyers to select product details inside the modal before adding to cart acts as a natural guardrail against incomplete or accidental orders, which reduces customer support load.

The Takeaways

Key learnings as a designer

Modeled attention data is a starting point, not proof

The attention-modeling tool was useful for making the case for a redesign and for showing the shift after — but it's a model trained on aggregate behavior, not a live study of these specific retailers. I'd pair it with direct usability testing on a project like this again, rather than relying on it alone.

A flexible component saves more time than a perfect one

Building one card that adapts across twelve product categories, instead of twelve separate cards, was the single decision that made the compliance requirements manageable. Regulatory needs change; a rigid card would have meant redesigning every time they did.

Reducing steps and adding freedom aren't in tension

I went in assuming a faster path meant a more rigid one. The redesign actually gave retailers more ways to get to the same result — search-first, browse-first, or picking up from recently viewed — while still cutting the steps needed for the most common path.

Across devices

Desktop

Tablet

Mobile

Desktop search modal

The core search modal sits over the main product catalog, with the background dimmed so store managers get a focused workspace — type one query, see instant results, without losing their place on the site. Brand names and regulatory details are organized in line, so high-volume buyers can scan, select sizes, and restock an entire category without leaving the modal.

Design remains in production as of 2026. Retailer feedback continues to cite the global search modal as the primary tool for weekly inventory replenishment.

Across devices

Desktop search modal

Design remains in production as of 2026. Retailer feedback continues to cite the global search modal as the primary tool for weekly inventory replenishment.

Desktop

Tablet

Mobile

Across devices

Desktop

Tablet

Mobile

Desktop search modal

Design remains in production as of 2026. Retailer feedback continues to cite the global search modal as the primary tool for weekly inventory replenishment.