SERP (Search Engine Results Page)
Designed several enhancements to certain elements that were underutilized within the current SERP.

Marketplace & Search

One of my biggest contributions to this company was enhancing their widely used marketplace. Within the marketplace, buyers can search for products, brands and suppliers, request for samples and quotes, and eventually complete their transactions online through the e-commerce platform.

The Problem

The problem here is that certain elements and tools were underutilized. The product team had to decide which of these elements should be highlighted more and which should be hidden.

The Scope

Categories Section
The Categories section was not being used at all or very little, the cards were also very large and took up the majority of the page. The user cannot even view the first row of product cards because of this section. So I designed a smaller, more concise card, and a row of only one and the rest of the cards would be hidden under this button. 

All Filters Button
The All Filters button, although very pronounced with a large sized button and highlighted in a green primary button color, was being underutilized. So I designed a side panel that will expose all the filters by default. This also resonates well with the common Marketplace patterns you see out there in the wild.

Compare Feature
I also designed another common marketplace pattern with the Compare component. The user can now select up to four products to compare their attributes.

Product Cards
And lastly I’ve updated the Product Card’s footer buttons where I’ve added an Overflow button that will provide a set of ‘Quick Actions’ that can help the user expedite their process and transactions.

Success Criteria

Discovery of Current and New Features
By exposing the current and new features that are easily accessible, we hypothesize that these elements that are underutilized will gain an increase of usage.

Adoption
With an increase of usage, this will improve the overall quality of the SERP

Retention
From discovery to an increase of usage, this could lead to a higher customer retention rate that will indicate our users are satisfied with the SERP and the services it provides.

Focusing on the New Features

Filter Panel

Most online marketplaces such as Amazon, Walmart and Best Buy, will provide a filter panel in their UI. I wanted to create a similar component for our users, something that is a familiar pattern that will help our users find the products they need.

In our Marketplace UI, filtering is needed because the data is complex and oftentimes user-generated. In the Chemical Industry, we’re typically dealing with long chemical family titles and attributes that many products contain. Filters are relevant for any data table interfaces, list-type pages, and in this case – card-based views.

Below is a video of how the elements of the filter panel works:

  • It independently scrolls to view all the categories within the filter.

  • The user can search for various filters within the panel.

  • Clicking on the parent level filter panel will open a child level panel that will contain a list of items pertaining to the category.

  • Selecting an item from the child level panel will add a filter chip above the Product cards to indicate a new filter has been applied.

Compare Features

As I continued conducting comparative and competitive research on online marketplaces out there in the wild, I noticed another very common feature is comparing products to each other.

Below is a video of how the elements of the compare features works:

  • By clicking on the “Compare” checkbox within the Product Card will invoke the Compare Bar at the bottom of the page.

  • The Compare Bar can collect up to four products to compare.

  • Clicking on “Compare Items” within the bar will navigate the user to the Compare Page where the user can view and compare the product’s respective attrbutes.

  • Within the Compare Page, the user can scroll through the attributes, highlight the differences, download the content within a digital PDF, request samples, quotes and documents, and also favorite the products they’re comparing.

What did we learn?

One of many KPI’s that we measured for success included an increase of traffic to the SERP and Product Pages. By including visibility to current and new features, it made our user base understand what is accessible to them. This increase of traffic became an increase of lead creation and ultimately total sales volume.