Listing Recommendations

Helping buyers find the home they want.

Listing Recommendations preview

Overview

  • My RolesInteraction design and user research
  • CompanyCompass
  • Timeline2017 / 3 weeks

Overview

Compass is a real estate brokerage and tech company that builds a platform that empowers agents and their clients.

As a product design intern, I worked with developers, product managers, and other designers to create Listing Recommendations, a set of recommendation modules that help prospective buyers find interesting listings.

A need for better discovery

Compass has a powerful search functionality used by consumers (buyers and sellers) and agents to find properties. However, the website lacks support for browsing and organic discovery.

User problem: Prospective buyers need a better way to discover listings on Compass beyond search.

Business opportunity: Compass can help agents generate leads by surfacing relevant listings to buyers.

Diving into recommender systems

Curious about how other products serve recommendations, I researched best practices and synthesized four considerations for design:

  1. Accuracy
    What factors can we use to improve relevancy?
  2. Diversity & novelty
    Can we increase discovery through serendipity?
  3. Trust and transparency
    Build trust by showing how suggestions are made.
  4. Privacy
    Respect the users who don't want to be tracked.

Auditing the landscape

Next, I analyzed how e-commerce websites and our competitors display recommendations on web and mobile.

The patterns I've uncovered were:

  1. Use of horizontal carousels to pique user interest and reduce vertical space.
  2. Use of multiple categorizations for recommendations.
  3. Being explicit in section headlines or helper texts about how suggestions are made.

Scoping for a use case

Before I focused on prospective buyers, I collaborated on a journey map with my design mentor to see if recommendations could help sellers and agents too.

Below: A real estate journey map for buyers, sellers, and agents based on what I've learned from the product managers.

Journey map for buyers, sellers and agents

Derived from the map, I saw 3 opportunities for showing recommendations:

  1. On the listing page for buyers to boost discovery.
  2. On the Collections page for agents to help with creating comparables.
  3. On the listing page as public collections to give agents another avenue for marketing on compass.com.

Initial design and validations

In my first design iteration, I created mocks to test my 3 assumptions with internal Compass agent teams.

Initial module sketches

Sketches of ideas for the different modules.

1. In the listing page

For the buyers module, I explored the following features:

  1. Filter tabs to help buyers understand the market through different lenses.
  2. A price chart (inspired by Zillow's) to help buyers visualize and navigate listings by price.
  3. Attribute highlights (inspired by Git diff) to help them compare listings. Green means the attribute is better than the current listing, and vice versa for red.
Similar listings module for buyers

Finding: All agents saw value in showing suggestions to prospective buyers to help generate leads for them.

2. In the Collections page

Below: A recommendation module in the agents' collections screen to help them with curating comparables.

Suggested listings module in Collections page

Finding: Agents didn't find it useful to see recommendations on the Collections page. They preferred to use saved searches to curate for their clients.

3. Public collections in the listing page

Below: A module for prospective buyers that shows sets of listings curated by Compass agents.

Suggested public collections module in listing page

Finding: Agents have mixed feelings about showing collections to buyers as other agents' collections could lure buyers away from their listings.

With these insights, I reframed the problem to:

How might we effectively surface relevant listings to prospective buyers to help them find their place?

Testing hypotheses with buyers

In my 2nd design iteration, I created mocks to test 4 design hypotheses with 5 consumers who were looking for or have recently bought a property.

Hypothesis #1

Buyers will prefer seeing listings as cards vs. in a data table or as tiles.

Listings as cards
Listings in a data table
Listings as tiles

Finding: Card was the preferred view, with table at a close second.

Hypothesis #2

Buyers will find value in being able to filter by statuses to learn more about the market in the area.

Active, Sold, Recently Listed and Recently Reduced filters

Finding: Status filter wasn't useful to all participants.

Hypothesis #3

Buyers will find value in filtering recommendations by location to find interesting listings outside the current neighborhood.

Neighborhood map view

Finding: Location filter was seen as a nice-to-have.

Hypothesis #4

Buyers will find value in using a price chart that helps them navigate and visualize the value of adjacent listings in the market.

Price chart in module

Finding: Most saw the price chart as interesting, but questioned the usefulness of browsing by price when they already have a budget in mind.

Additional insights

During the interviews, I discovered that most buyers prefer to use an interactive map to browse listings instead of a list.

Also, in a card sorting exercise, the participants helped me uncover the top 3 categorizations they were most interested in:

  1. People who viewed this also viewed
  2. Suggested listings based on your viewing history
  3. Similar listings in the neighborhood

Final design

Given what I've learned from the study, I proposed 3 recommendation modules that Compass could show in the listing page:

1. Similar Listings

Similar Listings module in all of its glory

Mechanism: Items are filtered based on the attributes of the current listing.

The map is visible by default to attract the user to the module and let them browse spatially.

Trust and transparency: The gray text at the bottom reveals the criteria used to provide the suggestions.

2. People who viewed this listing also viewed

People who viewed this also viewed module

Rationale: Most of the test participants saw items in this category to be of high signal because they were curious about how other buyers navigated through the listings.

Mechanism: Uses collaborative filtering, which means new listings will see fewer recommendations at the beginning. Hence, the module is placed second.

3. Suggested listings based on your browsing history

Suggested listings based on browsing history module

Rationale: Participants mentioned how modules like this have helped them uncover interesting items they may have missed.

Placement: This module is shown last because it requires the user to browse a few listings to become useful.

Privacy:Manage your browsing history link at the bottom lets the user turn off tracking.

Outcome

At the end of the project, I presented my proposal and shared my findings with my colleagues. Since then, the team has shipped a version of the Similar Listings module on compass.com.

Reflection

This project allowed me to improve my user research skills and practice intentionality in my design. I was fortunate to learn a lot from my design mentor and other designers at Compass on how to structure my study, and ask meaningful questions to get better insights.

Thus, in as little as 3 weeks, I've gained new confidence in my design process by knowing how to validate my designs iteratively and quickly.

Takeaways 🥡

  1. Designed recommendation modules for prospective buyers to help them find interesting listings on compass.com.
  2. Tested assumptions and design hypotheses with agents and buyers to guide my design.
  3. Learned from my peers how to structure my research to get better insights.