Building Trust Through Personalized Search
Intentionally integrating AI-based personalization into a Business-to-Business ecommerce platform in order to increase sales and build customer trust.
DATA-DRIVEN UX/UI DESIGN • CLIENT WORK • 2023
UX/UI TEAM
2 designers
OUTCOME
An end-to-end, AI-powered, personalized search experience that addresses longstanding issues around trust and efficiency for B2B restaurant professionals.
Handoff to development completed and implementation for launch on site ongoing.
NOTE!
Some content in these designs has been modified to retain client discretion.
Problem Brief
Business-to-Business (B2B) ecommerce customers operate differently from their Business-to-Consumer (B2C) counterparts. B2B typically use their tools while on the clock, meaning they are limited on time and value efficiency; while they may also be interested in discovering new products like B2C customers, this is often not their day-to-day priority.
This rang true for the customers of our client, a major distributor in the restaurant industry. Customers primarily use search to navigate the online catalog, with 60% of site traffic and revenue generated from the search results page. However, the client was regularly receiving feedback about the difficulty of finding products for weekly reorders. The problem lay in an experience that was not personalized to each customer and did not cater to their efficiency-focused workflow.
Data Gathering
We (myself and another UX designer I worked closely with throughout the project) began by gathering data on customer behavior. From our previous work with the client we had context on general pain points and priorities, but wanted to dig deeper in the context of search. This included analyzing qualitative feedback from customer surveys and previous feature testing, as well as leveraging quantitative data from user sessions: top search queries, filter usage patterns, combinations of products added to cart, etc.
Quantitative data insights will be referenced throughout the following feature walkthrough sections, but some guiding qualitative insights included:
Features & Testing
The following sections detail the foundational pages and features in the search journey, as well as any updates that were made from user testing.
Features: Predictive Search
We leveraged Coveo, a SaaS AI search engine, to design and implement search components that were personalized and dynamic. Within the search bar, the Predictive Search dropdown suggests products to the customer as they type.
Default search dropdown, no query entered.
When the customer clicks on the search bar, the dropdown appears with product suggestions already populated. The Ready to Reorder section (left column) pulls items the customer has previously purchased and suggests them based on the date on which the product was last purchased and the customer’s reorder cadence. This allows customers to more quickly access products they typically purchase, without typing anything.
Search dropdown with brand query.
As the customer types, product and suggested matches update to reflect the query; in the above example we used a Brand query, as that is the most popular query type among customers. The suggestions are sorted based on relevancy, so products that the customer has previously purchased show up first, followed by similar products that the customer may be interested in (based on brand, type, price, size, etc.)
Additionally, ‘Quick Filters’ appear above the suggestions as the customer types. These are a limited number of personalized filters that dynamically update based on the query. In this example, the filters reflect sizes of Sunshine’s products that the customer typically purchases. Size and Stock level are two of the most popular filters used by customers.
The customer can filter within the predictive search dropdown by either typing the filter (see left), which the system will be smart enough to parse out, or by selecting from the Quick Filters (see right).
In an 8 person user study, the majority of participants responded positively to the suggestions, citing "If I type 'sun' and see the product I need, I'll click it" and "I like how it considers my past orders." They also responded positively to the filtering, with one participant confirming that they filter by size "99% of the time, so I would click on the [search filter]...so I don't have to go through all of them." A few participants were indifferent only because they typically don't pay attention to the dropdown when searching.
Search dropdown with brand + size query (left) and brand query + size filter (right).
Predictive search mobile view examples.
Features: Dynamic Filtering & Sorting
The Search Results Page includes product cards and a filter component that updates based on the customer’s query and their filter engagement history. By default, products are sorted by relevance, meaning that products that the customer previously ordered or are likely to order are shown first.
Default search results page with query, no filters selected.
As customers interact with the filters, the order of the categories and the selection within them updates to surface more relevant filters first. By default, we ordered the categories by most popular based on Google Analytics data on filter engagement.
Search results page with query, size filter selected.
If the customer selects a filter, either as a Quick Filter in the Predictive Search dropdown (see previous section) or within the Search Results Page, their selection is reflected within the left rail and the number of products shown is refined. Additionally, the information shown within the product cards may update: in this example, by selecting 12 oz. for size, the price range shown on the cards is updated to only show prices for 12 oz., and the number of options in the ‘View x options’ CTA is reduced.
In an 8 person moderated, think aloud user study, all users found the sequence of selecting Quick Filters in the Predictive Search dropdown and having them reflected in the Search Results Page to be intuitive. They also confirmed that the order of filter categories aligned with their current filtering behavior (by size, stock, and previously purchased items).
Dynamic filtering mobile view examples.
Default shop modal.
Shop modal with size filter.
When the customer first lands on the Shop Modal, they will typically not have any SKU selected yet. The views above consolidate all SKUs into a table, for easy price comparison and scannability. SKUs are ordered by most relevant, with previously purchased items at the top; customers can also filter the SKUs to refine the table view.
Shop modal deals table, no deal selected.
Shop modal deals table, deal selected.
Once the customer selects a SKU, we automatically transition them to the second tab, whose header updates from 'Deals' to 'Add Deals'; this indicates to the customer that they have entered the second step of adding their product to the cart.
The deals table consolidates available deals and shows a variety of price metrics so the customer can determine which deal gives them the best value; in some cases, customers may purchase more stock in order to get a better price in the moment. The deal they select is reflected in the right rail, under their selected product. Sorting by minimum quantity also caters better to businesses of all sizes, as smaller accounts do not have the capacity to order many cases at once; in future iterations, we plan to also include a filtering or sorting option by relevance, to offer more personalized deal suggestions.
First iteration of shop modal, pre-rework based on customer feedback.
As mentioned earlier, the Shop Modal required more rework after user testing than the rest of the journey. Pictured above is the original Shop Modal, which was tested in a moderated user study with 8 participants. While customers found the information in the modal helpful, they were quickly overwhelmed and noted that there would be a "high learning curve."
To address this feedback, we consolidated the SKU buttons into a table to allow customers to compare all options in a more organized way. Additionally, instead of keeping them in the same SKU selection view when they select an item, we automatically transition them to look at Deals. We originally assumed customers would prefer to have a preview of available deals ('Quick Apply Deals' above) to help them decide on which SKU they want to purchase; however, we learned that customers do not typically deviate from the SKU (i.e. size, container, etc.) they are looking to purchase, and instead prefer to see a refined view of information pertaining to the SKU they selected.
Shop modal mobile view examples.
Features: Quick Shop Modal
The Quick Shop Modal is triggered when the customer clicks on a product card from the Predictive Search Dropdown or the Search Results page. This step in the journey required the most rework, because it tackles the balance of how much to show the customer without overwhelming, while still allowing them to make informed decisions.
The Prototype
View the full flow below, from search bar to results page to shop modal.
The new search flow Simplifies Order Placement, Delivers Efficiency, and Builds Trust through:
-
Guiding customers through comparing product prices & deals and simplify catalog presentation, without sacrificing transparency.
-
Reducing time customers spend searching for their weekly reorder products by applying AI-powered personalization to surface relevant products first.
-
Increasing customer satisfaction by removing blockers and unnecessary product recommendations, allowing customers to efficiently check out.
Other Work
UX/UI DESIGN & RESEARCH
© 2023 by aleksandra.soltan@gmail.com