Supplier Search

Creating a robust search UI card for supplier search

Finding the right supplier in a large list of potential suppliers is a difficult task. How could we help a public sector user find the right supplier in a long list of potential suppliers? I redesigned the supplier search result card to allow users to sort and quickly parse the various data points in a search result card.

My Role:
I led the design of the search experience between May 2022 and August 2023. In addition, I worked alongside Bryan Postelnek the Sr Product Manager at Procurated for all search UX goals.

Date Launched:
June 2022

Poor Supplier Selection within Search Results
It was difficult to pick out a supplier within the search results page. Users could see the suppliers names and ratings. However, they could not see which suppliers had a small business designation, an important requirement for many state and local governments. Additionally, users could not see the exact star rating count or the logo of the supplier.

A possible MVP?
I was not involved in the first iteration of the supplier UI, but I tried to iterate by adding a few data points. Soon I found that adding more than six data points to the existing UI did not make sense without obscuring information or scrolling horizontally, as it was designed to be a row.

Getting insight into best practice for UI Cards

Considering Similar Platforms.
Throughout my work with Procurated I was thankful to have access to platforms that collected review data and maintained a large database of suppliers. Some of the platforms I frequently looked to in my research were G2, Capterra, Trustpilot and Yelp. Looking through these platforms confirmed that suppliers were listed as cards, not as simple one line rows.

Qualitative Data
We did not have the luxury of conducting interviews or surveys to validate the need for a UI refresh. However, past user interviews confirmed that buyers needed to quickly look through the search results page without having to click through to each supplier profile. The cards had to answer basic questions. For example, users needed to know whether a supplier fit with their state’s small business designations.

Prerequisites
A good UI card has 3 main characteristics:

Leveraging the UI component library

n 2019, Procurated utilized an outdated web framework without a consistent UI library, highlighting the need for one. As one of my primary responsibilities, I designed and sustained a comprehensive component library to consistently address this ongoing need. The supplier UI card consists of pre-existing UI components sourced from the component library.

The Result

The supplier search card was part of a larger enhanced search initiative which included displaying public search pages without the need for a public sector account. This initiative brought an eightfold increase in MoM supplier profile claims and nationwide boost in impressions of Procurated's ratings.