Jason Parry's profile

Overstock Search Filter

This is a walkthrough of a redesign for Overstock's search/filter experience. The main problems being addressed with the current design are:

- The current design gets cluttered with multiple filters selected
- it's difficult to find the filter the user wants
- the interface is clunky (hover to expand is delayed, some of the menus are misaligned, and the way some filter lists are displayed is unnatural)
- the current design partially covers product tiles when expanded and looks visually cluttered.

Selection Interface
The first problem addressed was the dsiplay and selection of filters. The top five most relevant filter categories are shown to the user, with a 'show all filters' button to the right. When a filter category is selected a drawer opens up (pushing the products below it down).

The drawer pushing products down (instead of covering products) reduces urgency in selecting a filter because it’s not covering page content and getting in the way. This also allows us more room to display filters because the drawer spans the width of the container.

Filters can be displayed in different formats like a list of pills/checkboxes, or even a visual selector with illustrations, icons, or photos if it provides added value in that filter category.
Current Active Filters
The next thing to address is to display a list of active filters. In the old design each filter was displayed in a pill with the name of the filter category, e.g. ( Mattress Type: Memory Foam ). This became very lengthy very fast and difficult to read.

With the new design the filters are organized by filter category to eliminate the need to show the category multiple times.
This improves the experience but can still introduce a problem with legibility when there are many filters activated. When the user selects more than 5 (number can be tweaked after more testing) the display is changed to show a summary of the filters, rather than each filter individually.

Clicking ( Show Details ) will expand the summary to show all individual pills again. Or clicking on a summary pill like ( 2 Sizes ) will expand that category in the selection area so the user can quickly edit their selection.
Note: When there are too many filters to fit on one line, the whole category wraps to the next line so that all filters remain grouped by category.

Show All Filters
Clicking show all filters shows a dropdown list of all filter categories. Selecting a category from the list will show the options for that category in the drawer.
Overstock Search Filter
Published:

Overstock Search Filter

Published:

Creative Fields