The Product

OCS B2B search experience leverages Algolia, a cloud-based platform that provides business search and discovery solutions.

The Problem

Retailers are limited to only finding products within the product listing page of the portal.

The Goal

Implement a global search within the portal so that Retailers can search for and add products to their cart anywhere within the portal

My Role

UX designer

Responsibilities

Low and High fidelity prototyping, wireframes

Project Duration

September 2023 - January 2024

A new B2B search experience was designed to revolutionize how users navigate the B2B platform. By integrating Algolia, the business transitioned search from a product-centric feature to a global, easily accessible tool. This strategic shift empowers users to quickly find what they need across the entire platform. While the implementation of this new search function has presented challenges, such as slower search times, we are committed to optimizing performance and delivering a seamless user experience.

Overview

Pain Points

Current B2B search experiences often fall short of expectations, leaving businesses frustrated and unproductive. Lengthy search times can significantly impede workflow efficiency, while the limitation of search functionality to product listing pages hinders comprehensive information discovery. This restricted search scope often results in users spending excessive time navigating through multiple pages, ultimately impacting overall productivity and customer satisfaction.

Performace

System takes an incredibly long time to load all the results of the page

Location

Search is only accessible in the product listing page

Target State

Integrating Algolia's cutting-edge search technology to significantly enhance Retailers' search experience by delivering highly relevant, accurate, and speedy search results. The optimized search functionality will drive user engagement, increase conversions, and improve overall customer satisfaction.

Improve Search Relevance

Delivering search results that precisely match user intent, leading to higher click-through rates and reduced bounce rates.

Increase Conversion

Optimizing product discovery and purchase journeys through relevant search suggestions and personalized recommendations.

Starting the Design

To effectively implement a global search into the portal the simple solution was to add a search field to the navigation header at the top of the page. The goal is to allow the retailers to look for and add products anywhere within the portal so utilizing the real estate within the global header made sense. Now to understand how the experience would look and feel I needed to know how a retailer currently searches and adds a product to their cart. To capture this I created a user flow of the existing experience.

The retailer is still able to search and add products to their cart with this process. However, they are severely affected by the performance and information architecture within the page as seen below.

With the screenshots above you can see that the search has some prominence with it being at the top of the page however it is limited to the tab it is on and acts as a filtered search.

With the new user flow the retailer is capable of doing a lot more allowing them to adapt to a specific flow if they desire or utilize all of them. Should the user have selected any products there is also a previously viewed product list to the right of the overlay to provide more context of the last things they viewed.

Global Header Design

This global header search approach gives retailers back the power to navigate and search for products the way they want to. On click of the search bar, an overlay appears giving a list of popular keywords and any recently searched terms they have made. Providing them with some quick ways to find the products they may be interested in. Based on the requirements of the business I was able to design the following user flow and mokcups for the new the global search.

As a retailer, I want the ability to search anywhere within the portal using the global search bar

Acceptance Criteria

  • Implement a global search bar in the main header of b2b portal

  • Search bar should be visible on all pages of the portal

  • Retailers should be able to search products, content across the portal

Search Results

Here is the big part of the experience, how will the products be displayed to the retailers? I took the liberty of designing a similar layout to the Product Listing Page. When the system gives the retailer a set of results each product will have its name and brand to the right of the image while displaying three attributes below. Initially, I had designed for two attributes size and price. However, these attributes can have multiple values based on the product which means that each product card would look different to some degree. The business identified THC and CBD to be just as important and based on the space available it decided to have these instead of the price.

Now typically, on the Product Listing Page, there is a default size selected that displays the price on the “Add to Cart”.To apply this similar experience in the search I implemented an extra step before it. The select size prompt in the CTA is there because when the Retailers view the results they have no idea which size variant is selected, and some products have a colour option as well. To reduce confusion the “Select Size” prompt is a transition into all the other details necessary to make the final decision of adding a product to the cart. Once it is selected the retailer can choose the size, colour and quantity and see the price dynamically change based on what was configured.

Lastly should the results from the overlay not provide what the retailer is looking for they can select “View All Results” to see the remaining products within that search. While I wanted to display as many products as possible within the search overlay. I didn’t want to overload the user with all the results, this would also inadvertently create a second version of the product listing page with more steps to complete the task.

Takeaways

Impact: 

With the new experience and enhancements made to search sales have improved by 25%.

What I learned:

This project was an invaluable experience that allowed me to hone my skills in information prioritization and compact design. I am particularly proud of the innovative solutions developed through a research-driven approach.