Wholesale B2B
Search EnhancementSe
The baseline
Navigational friction
01
Cognitive overload
Store managers had to scan a crowded screen just to locate the search box nested within the tab layout. This added unnecessary mental steps and slowed down their weekly restocking routines.
02
Metadata fragmentation
Crucial product details like brand names and potency levels were buried and hard to scan in the standard list view, making it difficult to compare items quickly once they did find them.
03
Interaction cost
Because the old search was trapped inside the product listing tabs, a retailer couldn't look up a quick item from their account or cart page without resetting their entire journey to go find that specific tab again.
The Discovery
User flows
To fix these journey issues, I mapped out a new path that shifts the focus from endless scrolling to direct, intentional search. Instead of forcing users to navigate through multiple pages to find what they need, the updated flow centers around a site-wide search modal that acts as a shortcut for quick restocking.
The original process required store managers to land on the platform, open the general shop view, and then locate a nested search box just to start filtering. If they wanted to look up items from different sections, they had to constantly reset their path and start over. This back-and-forth added massive friction for repeat buyers who already knew exactly what SKUs they wanted to buy.
By introducing a global search modal, we gave retailers an immediate starting point from any page on the site. The new flow introduces smart shortcuts—like quickly accessing recently viewed items or popular search terms right inside the modal. This cuts out unnecessary navigation steps, allowing high-volume buyers to move from a search query straight to size selection and cart addition in seconds.
The systemtic appraoch
Wholesale architecture
To bring the optimized search experience to life, I didn't just design a pretty product card; I engineered a flexible system that handles everything behind the scenes. The product catalog is uniquely complex. We needed a way to display strict, legally mandated details—like legal warnings and shifting potency ranges—right alongside standard e-commerce choices like size, colour, and quantity selectors.
Component Property Ops
One Component, Many Uses: I built the product card as a single master element that adapts based on the item type (like dried flower vs. topicals). This keeps the Figma file organized and lightweight for the whole team.
Ready for Developers: Every hover, active, and error state is cleanly mapped out. Developers can quickly grab exact CSS behaviors without guessing or messaging me for clarification.
Defined Layout & Spacing Tokens
Consistent 8px Grid: I used a strict 8px spacing system for all padding and margins. This keeps the design tidy and stops text blocks from overlapping or collapsing on smaller screens.
Easy-to-Tap Targets: All buttons and dropdowns have a minimum size of 48px. This ensures warehouse operators or retailers using tablets on the move can tap accurately without misclicking.
Logic & Compliance
Built-in Accessibility: Color contrasts and text sizes are baked right into the system tokens. If the system needs a global update, it is programmatically guaranteed to pass contrast checks automatically.
Regulatory Layouts: I left dedicated slots in the card layout for legally required data (like THC content and health warnings), making sure the layout doesn't break when regulations change.
The Outcome
Results
Validation
The proof of this updated layout is clear when looking at the final attention map. By moving the search experience into a clean, high-contrast modal, we successfully focused the user’s attention exactly where it matters most: directly on the search results and product variations.
Instead of searching blindly or wandering through a crowded layout, store managers are now guided down a clear visual path. This design was so successful at balancing user speed with strict regulatory rules that the entire layout has remained our active production standard for over two years without requiring any major modifications.
01
Faster Ordering Path
By bringing critical actions like size selection directly into the search results modal, we created a fast shortcut for repeat orders. Retailers can now search, select, and add items to their carts in significantly fewer clicks.
02
Long term stability
The design has required zero major updates or structural changes since its launch. This long-term durability proves that the component system was built with a strong foundation that easily scales as new products are added.
03
Fewer order errors
Requiring buyers to pick their product details inside the search modal before adding to the cart acted as a natural guardrail. It successfully cut down on incomplete or accidental orders, reducing customer support overhead.
