OkCupid: Match Search

Overview

Match Search allows users to search for potential partners on OkCupid. Its large set of filtering tools lets them hone in on who they are really looking for. It is a powerful system, but it is also quite complex. I worked closely with one of our designers to completely update the information architecture and visual design, and implemented the filters in React.

Our goals were to clean up the organization of the filters, and to make the experience feel more responsive by handling the search and results display entirely in JavaScript. To make the filters more digestible, we split them into two groups: basics (e.g., gender and age) and advanced (e.g., personality traits).

Basic filters

Since the basic filters are the most commonly used, we tried to make their interface and interaction very light: we settled on a popover design which, upon dismissal, executes a search.

Advanced filters

The nature of the advanced filters, however, both requires more options and more explanation, so we opted for a slide-down section with groups of related filters.

Advanced filter tags

The last touch is the tags that appear after adding an advanced search filter. These tags appear once advanced filters are set, and they serve a few purposes: to remind the user what filters they have set; to allow faster access to a particular group of filters within the advanced filters section; and to allow for quick deletion of advanced filters.

Results

After a period of A/B testing, we saw an increase in searches, number of filters applied, and even a bump in revenue from the more front-and-center presentation of our premium filters.