Opportunity
Zillow built one of the first real estate apps for the iPhone soon after the app store was announced and has gone on to be tremendously successful in the years since. While Zillow has been the category leader for the last several years, we have strong competitors and user expectations continue to rise. When we began planning features to build for 2017, I identified three key areas where I thought we could get better and increase our lead in the real estate category.
Process
Working closely with our research team I quickly realized the biggest impact we could make would be to develop projects that would help users find relevant homes more quickly and easily in our search experience. Users come to Zillow to find homes, and if they can’t find anything that interests them quickly we know they are much less likely to return. To help align the larger team I ran a series of design studios that helped generate ideas and uncover several major opportunities.

Sketch output from our early design studios.

navigation
For the last several years the app had relied on the drawer pattern for app navigation. While it is a solid pattern for including a large number of items we knew from analytics that users spent most of their time in three to four main sections. I was aware that other design teams had been finding success with the increased discoverability of the tab navigation pattern and thought this might be a good fit for Zillow. 

Navigation update to the Zillow iPhone app.

Taking the top four most visited sections of our app and displaying them as tabs was a relatively quick exercise in design. The larger task was bringing the product leadership to alignment and I did that with a combination of presenting data, designs, and prototypes. Once we were all on the same page the project was approved for an A/B test. Results came back overwhelmingly positive with double digit increases to engagement of the sections exposed in the tab bar and overall increases in key business metrics.
Filters
One of the key ways users can refine search results for homes on Zillow is by using filters. The existing pattern was a single button that opens a full page of filter options. Zillow mobile app users have traditionally had higher filter engagement than web users but I believed we could do better by making the experience more discoverable and easier to use.

Updates to the filter pattern.

Research had identified that since filtering and searching happened on separate pages some users would set filters and then forget what they had set back on the map results. This would sometimes lead to confusion and a perception that Zillow had less listings than competitors. While I knew it was a business goal to increase filtering rates, I also wanted to make sure we addressed this usability concern as well.
Following a similar methodology to tab navigation, I reviewed analytic data and created designs that pulled our top four most used filters into a scrolling bar below the search box. We came to call this pattern filter pills. When a user tapped on one of the pills a panel animated down and exposed the single filter control from the full screen filter panel. Once a filter was set, the pill would reflect the selection so users would be able to quickly scan and understand what filters were influencing their search results.
After validating with users via a prototype, designs were finalized and an A/B test was run. Results showed the number of users with any filter set more than doubled and the amount of filters a user set during a session increased by double digits. There was a slight decrease in homes viewed per user but the resulting flatness of other key metrics led us to believe this was acceptable as users likely had less, but more relevant, homes to view overall. This pattern was considered a big win and has become a standard pattern for our shopping teams heading into 2018. 
List cards
Continuing with the theme of making it easier for users to find homes that are relevant to them I led a company-wide effort to update our listing card designs. Working closely with research we noticed users missing a home on Zillow that they found on a competitor site and identified as very relevant to them. The existing design we used of covering the photo with text and data was identified as a likely issue.

Update to Zillow iPhone app list cards.

The design goal was to increase legibility of both listing info and photos. After completing a competitive analysis I designed a test that would not add or remove any data, only strive to make the existing information more readable. While I didn’t expect huge metric changes I felt it was overall a win for the user and should help reduce some of the friction of our shopping process.
The test proved successful in two ways. Overall metrics were slightly up, most notably the number of users finding a home relevant to them. The test also kicked off a larger redesign of list cards that is being worked on for our website since we validated the concept on the apps first.
Results
Taken together these three design driven projects increased the ability of our users to find, evaluate, and get updates on homes that matter to them. As a result of these projects app engagement is now much higher in the targeted areas and the ability of a user to find a relevant home on the Zillow iPhone app is higher than ever before. The success of these projects also greatly influenced the direction of our plans for 2018 and the other shopping teams in the company have plans to implement these features on the web as well. 

You may also like

Back to Top