OkCupid: Match Search
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.
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.
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.
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.