UI for New Features: Filter and Search

An unreleased loyalty program gives customers cashback and reduces two pounds of CO₂ for every dollar the user spends at a participating store. The accompanying app lists businesses and sales near the user, sorted by location. Users may want to search for a specific store to look up its deals, or if they want to find a place to buy a specific item from, they'd want to filter by type of store and/or any ethical practices the store follows (no animal testing, fair trade, etc.)

The initial search pane; created using Justinmind Prototyper (free version)

I developed a prototype of this feature for use by the graphic design and engineering teams.

Another person working on the app thought we should assign companies badges for having various noble certifications, e.g. FSC ethically sourced wood, USDA organic, fair trade cocoa. I expanded on the idea by suggesting that users filter results using the badges and see the badges on the first pane instead of having to click on each company's page to see them. The ensuing feature solved several problems:

• users who want to purchase from ethical sources cannot distinguish between companies in this manner
• if a customer wants to find a store to purchase a type of good, they cannot filter the search results by type of product sold (electronics, gifts, clothing, food)

After talking through the features, I had the following notes:

As you can see from the notes, I originally envisioned two tools:

1.  "master filter" on the left menu to filter search results by badges. The main interface would not indicate the stores were being filtered by which badges; you would be able to tell because all of the businesses would have the appropriate badge in their first display bars. You would have to edit the filter to change them.
2. search function in top right of main screen (drawn on second notebook page.) Contains both the badge filter, type of product filter (furniture, gifts, etc.) and the search-by-company-name feature.

However, after some thought, I decided that having both the badge filter and company-name-search in the same place eliminated the need for the "master filter," especially if I indicated which badges the companies were being filtered by.

Thus followed some crude wireframes:

First screen upon login; displays businesses by location. Notice the badge under Starcafe, which in a higher-fidelity prototype would properly read "no animal testing."

Upon clicking on the magnifying glass search symbol

Hitting the Back button would send you back to the first page, with this search cleared.

The badge and company group selection for the filter. Only when you select at least one Type of Establishment or Badge does the Search button appear.

I decided to leave the badges on each company's bar to keep the look cohesive with the non-badge-filter look, which also includes badges when appropriate (e.g. in the first frame.)

I liked that when filtering, you know what you are filtering by thanks to the "Clothing" and "green" indicators. However, I figured that a user may want to permanently keep a certain badge (or company type, although that may be rarer) and would thus not want to see the filter specifications and the badges on each company bar.

I could move the filter symbol next to the search symbol, separating the two features. I could add to the filter menu a checkbox to show/hide the filter indicators on the main screen and the badges on each company bar.

Or, I could still put the filter symbol next to the search symbol, but have that trigger a dropdown menu with the badge and company type options. However, displaying the menus would probably crowd a mobile display.

I went with the first idea:

upon clicking the new Filter button

deselecting "show filters selected"

Filtered, but without the filters and badges showing

Finally, I achieved the goals of the filter-and-search system. Users can search directly for a company, or filter and sort by type of store and badges. They can decide whether to display the filters and badges. I could fine-tune the show filters option by making different options for collapsing the filter selection at the top versus each company's badges, but I didn't think it was necessary. Further user testing will help sort out that issue.