Listing Recommendations

Helping buyers find the home they want.

Listing Recommendations hero

Info

  • My roles Interaction design, user research
  • Company Compass
  • Date & duration Jul - Aug 2017 (3 weeks)

Overview

Compass is a technology and brokerage company that builds a platform for real estate agents to buy and sell better. As a product design intern in the search and properties team, I worked with developers, product managers and a senior designer to ship numerous product features.

A need for better discovery

Compass has a powerful search functionality used by both consumers and agent 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 lead by surfacing relevant exclusive listings to buyers.

Diving into recommender systems

Curious about how 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 and novelty
    Can we increase discovery through serendipity?
  3. Trust and transparency
    We should build trust by showing how items are being suggested
  4. Privacy
    We should always respect the users who don't want to be tracked

Design audit

Competitor design audit
Examples of recommendation modules from Redfin, Zillow and Amazon.

Next, I analyzed how competitors in real estate and e-commerce display recommender systems in web and mobile. Some patterns I've uncovered were:

  1. Use of horizontal carousels to pique user interest and reduce use of vertical space.
  2. Use of multiple categorizations for recommendations.
  3. Being explicit about how suggestions are made through the use of headline and helper texts.

Scoping for an use case

Before I focused on prospective buyers, I created a journey map to see if recommendations can help sellers and agents as well.

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

Derived from the map are three places on the website I believed recommendations would be of most value to the users:

  1. Show recommendations in the listing page for buyers to boost discovery.
  2. Show recommendations in the collections* page for agents to help them with creating comparables.
  3. Show public collection suggestions in the listing page drive more traffic to exclusives and give agents another avenue for marketing on compass.com.

* Collections are sets of listings curated by the agent or the client to keep track of interesting items.

Initial design

In my first design iteration, I created several mocks with the intention of testing with our internal Compass agents the three assumptions I've made.

  • Early sketches

    UI explorations

    1 — Early sketches for the module across different pages.
  • Module with basic card UI
    2 — I start with a basic card UI based on what Compass already has. The user can see more recommendations by pressing the “View more” button.
  • Module with horizontal slider navigation
    3 — Played with using a horizontal carousel instead of a load more button to save vertical space.
  • Module with Git diff-inspired highlights
    4 — Inspired by Git diff, the attributes of an item are highlighted green if they're better than those of the current listing. Otherwise, they're highlight in red. This helps the user quickly compare the listings.
  • Module with status filters
    5 — I started thinking about having status filters to enable buyers to understand the market better.
  • Module with price chart
    6 — Inspired by Zillow's price chart, my thought was this component could help buyers quickly visualize and navigate recommended listings by price.
Collections page with recommendations module
A recommendation module in the agents's collections screen to help them with curating comparables.
Public collections module
A module of listings curated by agents for buyers.

Validating needs with agents

Using the mocks, I interviewed three different agent teams and found that:

  1. Similar listings in collections and search are not useful for agents as they prefer using saved searches to curate for their clients.
  2. Agents have mixed feelings about showing public collections to buyers as the listings shown could lure buyers away from their own listings.
  3. All agents see value in showing suggestions to non-client buyers to help generate lead for them.

With these insights, I reframed the problem to: How might we effectively surface relevant listings to prospective buyers to help them find their place?

Validating hypotheses with buyers

In my second design iteration, I created mocks to test 4 different hypotheses that aim to help buyers using the module to find their listings of interest. I was able to test these concepts with 5 different people.

Hypothesis #1

Prospective buyers will prefer cards over showing listings in a data table or as tiles.

Card, table and tile displays

Finding: Card view is most preferred with table view at close second.

Hypothesis #2

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

Filter by status

Finding: Status filter isn't useful at all.

Hypothesis #3

Prospective buyers will find value in being able to filter by location in order to peak outside their pre-defined boundary and find more interesting listings.

Map view

Finding: Location filter is a nice-to-have.

Hypothesis #4

Prospective 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 display

Finding: Most find the price chart to be interesting to see, but question the usefulness of browsing by price when they're buying a property with a budget in mind.

Additional insights

In my interviews with the participants, I also found that most buyers prefer to use an interactive map to browse listings over looking at a list. This informed my decision later to use the map as a key component.

Another exercise I did was a card sorting exercise to understand which categorizations are useful.

Card sorting photo and listCard sorting photo and list
User participating in a card sorting exercise.

The top 3 categories were:

  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 user study, I proposed 3 recommendation modules that Compass could display in the listing details view, in the following order:

#1 — Similar Listings

Similar listings module
  • Shows items filtered heuristically based on the attributes of the currently viewed listing.
  • Map is on by default to attract users to the module and let them browse spatially.
  • Hovering over an item highlights the pin on the map and vice-versa.
  • The gray text at the bottom provides transparency on the criteria used to provide the suggestions.

#2 — People who viewed this listing also viewed

People who viewed this module
  • This module is intended to satisfy the user's curiosity of knowing how other buyers navigate through the listings.
  • Most of the test participants regard items shown in this category to be of high signal.
  • Uses collaborative filtering, which means new listings will see less recommendations at the beginning, hence the module being placed second.

#3 — Suggested listings based on your browsing history

Suggested listings based on browsing history module
  • Particpants mentioned looking at suggestions based on browsing history have helped them uncover interesting items they may have missed.
  • The Manage your browsing history link at the bottom lets the user turn off tracking to respect their privacy.
  • This is shown last because it's not related to the current listing, and it requires the user to browse a few listings before becoming useful.

At the end of this project, I presented my proposal and shared my findings to the team. Since then, a version of the module has been developed and shipped on compass.com

Retrospective

This project allowed me to further improve my user research skills and practice intentionality in my design. I was forunate enough to learn a ton from my design mentor and other designers at Compass on how to structure my study and ask good questions to get better insights. Thus, in as little as 3 weeks, I've gained new confidence in my own design process by knowing how to validate my designs iteratively and quickly.

Other Work

  • Listing Recommendations Interaction design for Compass
  • Legends Onboarding Mobile design for Axiom Zen
  • Intensive Care First Aid Freelance brand + web design
  • Lithium Community Mobile design