Emphasizing What Users Care About Most—Location

How we made it easier to search by emphasizing location

Company
Nooklyn
My role
Interaction design, UX design, UI design
Team
1 designer (me), 1 engineer (me)), 1 design manager (Moiz Malik), 1 technical manager (Alex Dimitriyadi)
Timeline
3 months, 2019
Key result
Improved usability of core feature
Context

Most important feature was awkward to use

Nooklyn is New York real estate marketplace based in New York. Our iOS app primarily helps users find apartments to rent.

In 2019, 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 most valuable tester, 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.

Problem

Functionality wasn't obvious

Because I'm super fun at parties (and because I wanted to see if my wife's struggle was a fluke), I asked a couple of friends to do a similar search. Some needed help and all didn't know what to do immediately.

After I showed my wife the Filters button which presents the Filters view, she also struggled to find the Neighborhoods section. She quickly scrolled up and down a few times but didn't see it. It wasn't until she slowly and meticulous scrolled that she was able to find it.

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.

Insights

Analytics showed:

  • Over 25% of time in app was spent in the main search view.

  • The Neighborhoods filter was the most used (despite its placement below the fold).
Goal

For the most part, I believe our app's core value proposition should be obvious, automatic, even brainless.

My primary goals were to:

  • Make starting a search obvious

  • Make narrowing a search by neighborhood obvious
Process

Making the UI obvious

Starting with the Filters buttons

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

At some point, I started wondering if the filters needed to be hidden in a menu at all. If our goal is to make it easier to find the filters, then maybe the best solution is to remove the obstacle altogether. This led to a design that solved the discoverability problem—a toolbar under the navigation bar that contains a horizontally-scrolling collection of Filters.

I improved it further given a few insights:

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

I moved the Neighborhood picker's search bar to the Search view's navigation bar.

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.

Next, making it easier to filter by neighborhood

The Neighborhood Picker suffered two problems:

  • Unorganized - It was a long list of every neighborhood in New York without any indicator of the corresponding borough. Not everyone knows which neighborhood belongs to which borough, especially people moving to New York for the first time.

  • Selections hard to view and edit - Your selected neighborhoods appeared in a horizontally-scrolling collection. It didn't expand vertically, so it became hard to view and edit selections after just a few selections because they'd start running past the edge of the screen.

I improved organization and made it easier to view selections by creating 3 sections:

  • Currently selected neighborhoods - Instead of the static toolbar, selected neighborhoods now appear in their own section within the list. Now, you can't always see your selections but this design frees up screen space and makes it possible to view all selections at a glance.
  • Recently searched neighborhoods - Users usually search the same neighborhoods over and over so this makes that easier. It also adds some personalization.
  • Neighborhoods organized by borough - This solved the disorganization problem by grouping neighborhoods by the borough they belonged to.

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

Now that the filters had been divided, each one needed to be presented in their own modal. I took the opportunity to create a new design for each filter/data type:

Impact

Data

Sadly, I don't have access to all of the quantitative data anymore to back me up, but I recall that

  • How many more searches did users make with the new design compared to old?

  • How did the new design affect the usage frequency of each filter?
  • How much did the total number of leads change?

Automatic behavior

I watched firsthand how much of a different the new design made. With the new design, users reflexively tapped the search bar and immediately knew how to filter a search.

Mission accomplished.