Nooklyn

A better way to search

How we made it easier to search for apartments while emphasizing what users cared about most—location

My contributions
Interaction design, visual design, iOS engineering
Team
1 designer (me), 1 engineer (me), 1 design manager (Moiz Malik), 1 technical manager (Alex Dimitriyadi)
Timeline
3 months, late 2020
Status
Shipped to App Store

Context

Nooklyn is a rental brokerage based in Brooklyn, NY, that offers a web-based platform and iOS app to help renters find apartments.

I accidentally discovered the app's most important feature, Search, was awkward to use. While working on a separate feature, I handed my phone to Nooklyn's testing superstar, my wife, then asked her to perform a simple search like "find apartments in Bushwick” so I could show her the thing I was actually working on.

She couldn't immediately do it. Her eyes and thumb scanned the entire screen looking for the button that would let her narrow her search before, heartbreakingly, she cycled through the other tabs looking for it. I showed her what to do but then she struggled to filter her search.

Defining the problems

Even one person struggling to use the most important feature of the entire is problematic. A product's core value proposition should be obvious, automatic, even brainless.

My wife didn’t see the Filters button. When she finally saw it, she didn’t even recognize what the icon meant. Needless to say, the design was broken.

It was the same with the Neighborhoods filter—she couldn't find it because it wasn't abundantly obvious. This was particularly unfortunate because our metrics showed that the Neighborhoods filter was, by far, the most used. In fact, the majority of searches started with only neighborhoods selected. The Neighborhoods filter should have been emphasized rather than appearing below the fold.

Solving the problems

I experimented with many different iterations of the Filters button, trying to create a style that was more attention-grabbing.

Ultimately, I realized  that the best Filters button is no Filters button. If the goal is to make it easier to find the filters, then the best solution is to remove the obstacle altogether. I moved the filters to the root view by deprecating the Filters view and adding each of its sections into a horizontally-scrolling collection.

A 1-to-1 translation from the previous version • looks good, but the filters are the wrong order

Because data showed that the Neighborhoods filter was the most used, I moved it to the first position so it would be immediately visible. Similarly, I ordered the remaining filters according to our usage metrics.

Filters are ordered correctly here

The new Filters bar solved the discoverability problem, but I thought we could improve it further given a few insights:

• Most users rarely interacted with the segmented control that took up the entire navigation bar.
• Most searches started with a neighborhood only.
• Users gravitated towards search UIs like magnifying glasses and search bars (which was the primary UI of the existing Neighborhood picker)

Given this information, I moved the Neighborhood picker to the navigation bar in the form of a search bar.

Location is emphasized and filters are ordered correctly

With the Neighborhoods filter in the navigation bar and the other filters immediately visible and ordered by usage frequency, the new search view finally reflected our users' behavior—it felt obvious.

Filling in the details

After improving Search I turned my attention to the Neighborhood picker.  It suffered from one big problem—it was very disorganized. There was a long list of every neighborhood in New York without any indicator of the corresponding borough.

I improved the Neighborhoods picker by organizing it into 3 sections:

Currently selected neighborhoods
I liked the previous design because it was always visible, but because it was so small, scrolling was difficult and you couldn't see everything at a glance. Making it a section in the collection view felt more harmonious; it freed up screen real estate for search results; and it made viewing more selections at a glance possible.

Recently searched neighborhoods
This didn't exist before which infuriated me as a user.

Neighborhoods organized by borough
This made it possible to browse by borough.

Here's how a search for "apartments in Bushwick, Williamsburg, or Greenpoint" would start:

Now that the filters had been divided, I designed new modals dedicated to each filter's data type:

Outcome

I considered this project a success based on firsthand observations of people using it compared to the old version. They automatically gravitate towards the new search bar and easily complete common searches like "find apartments in Bushwick". More complex (but still common) searches like "Find apartments in Bushwick with 2 beds for less than $2,200" were completed just as easily with the new Filters bar.