Search & Filter

Overview

The ability to easily sort and filter search results is essential to customer success in finding the right product. The existing, horizontal filter feature was confusing for customers who were often frustrated with the experience. Problems included issues with labeling, size and arrangement, and functionality issues.

We asked, "How can we make filtering and sorting searched items easier for customers to use?"

Current state

The image below shows a search results page located by navigation path. User testing and analytics revealed key issues:

Customers often confused the terms filter and sort. We replaced "filter" with "refine" to clarify, but when seen alone, "refine" still caused confusion.

The centered filter categories took up two full screens, hiding products from view. Some users didn’t realize they’d reached the search results page and reported feeling “lost.”

An additional issue was the filter behavior: after selecting a checkbox, the page automatically scrolled down to show results below the large filter area. While intended to reassure users results appeared, it forced them to manually scroll back up each time to adjust filters—causing significant frustration.

Below is a view of the page after a filter set was applied. You can see that the filter options are no longer visible.

Show only

User testing showed customers clearly understood filtering when labeled “Show only,” recognizing that results displayed matched their selected filters.

View this page in Axure

Customers are now able to select filter sets from an array of filter categories.

Managing filter sets

When customers selected a filter set, it was difficult for them to manage selected options. On mobile, customers had to scroll horizontally to view and manage chosen filter sets. The sets were difficult to view at a glance, Customers had to perform time-consuming removal one by one.

The improved feature allows users to easily view and manage filter sets without horizontal scrolling and offers the option to delete selections individually or all at once.

The graphic below shows the mobile experience changes, highlighting the original design’s horizontal scrolling to view and delete selected filter sets at marker 3.

Sidebar filtering

The redesign moved the filter set to the left of the search results, adopting the sidebar filtering interface common on desktop sites. This layout makes filters easier to skim and supports more options without page-width limits. It reduced confusing scrolling, letting customers select multiple filters while still viewing products.

View this page in Axure

View this page in Axure

Below is a mockup of the desktop view of the new design .

Responsive mapping

Because Ricoh-USA is a responsive website, and because the search was designed for mobile first and then for desktop and tablet, maps were created for the development team to add clarity about where sections would be located, hidden, or revealed on different devices.