Compass Listing Recommendations

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 on numerous product features as well as a larger self-directed project during the 10-week program.

Listing Recommendations is a module on compass.com that shows relevant listings to prospective buyers and renters. I took this 3-week project as an opportunity to hone my design process and propose a product feature that is well-tested with the users before development.

A need for better listing 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. These buyers aren't working with an agent and are months away from a transaction.

Business opportunity: Compass can help agents generate lead by surfacing relevant exclusive listings to buyers while increasing user engagement on the platform.

Given the limited time, I was constrained to designing a module instead of an entirely new discovery experience.

Diving into recommender systems

Curious about recommender systems, I researched the topic and learned of three filtering methods for showing suggestions: collaborative, content-based and heuristic. These vocabularies allowed me to classify the different kind of recommendations I could test with users later.

In addition, I noted four considerations for design based on my readings on best practices:

  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

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 wanted to know if showing recommendations might help sellers and agents as well. Therefore, I created a journey map of the current real estate flow based on what I've learned from the product managers at Compass.

A high-level journey map of major stakeholders in the buying and selling flow. This artifact is generated using a Chrome plugin I wrote (not published yet) that uses a Trello board as a base.

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

  1. Show recs in the listing page for buyers to boost discovery.
  2. Show recs 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 the three assumptions I've made with our internal Compass agents.

Early sketches of ideas for listing recommendations.
  • UI explorations

    1 — I began with a basic cards UI based on what Compass already has. The user can see more recommendations by pressing the “View more” button.
  • 2 — Played with using a horizontal carousel instead of a load more button to save vertical space.
  • 3 — 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.
  • 4 — I started thinking about having status filters to enable buyers to understand the market better.
  • 5 — Inspired by Zillow's price chart, my thought was this component could help buyers quickly visualize and navigate recommended listings by price.
A recommendations module in the agents's collections screen to help them with comparables.
A module in the listing view of collections curated by agents that would be shown to 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 generally not useful for agents to see as they prefer using saved searches to curate for their clients.
  2. Agents have mixed feelings about showing public collections to buyers as the content shown could lure people away from the agent's own listings.
  3. All agents see value in showing suggestions to non-client buyers to help generate lead for them.

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

Designing with hypotheses

In my second design iteration, I created mocks to test 4 different hypotheses that aim to increase the chance of buyers using the module to find their listings of interest.

Hypothesis #1

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

Hypothesis #2

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

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.

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.

Overarching hypothesis

Listing recommendations will help prospective buyers discover more relevant listings on compass.com than through search alone. This hypotheses would be validated by tracking interactions on the module once the feature is shipped.

Insights from user study

I was able to conduct 5 user testing sessions with people who are buying, renting or have recently bought a property. An interesting finding is how most buyers prefer to use an interactive map to browse listings over looking at a list. This informs my decision later to use the map as a key component in the module.

Design validations

From the participants' reactions to the mocks, I learned that:

  • Participants find all of the information shown for each listing relevant.
  • Card view is most preferred with table view at close second.
  • Status filter isn't useful at all.
  • Location filter is a nice-to-have.
  • Map view is very helpful.
  • 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.

Testing categorizations with card sort

Finally, I asked the participants to rank from a set of 10 recommendation categories by how useful they're perceived to be. The top 3 results 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

  • 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

  • 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

  • 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. While the feature hasn't shipped yet, my design and user insights contributed to one of the goals on the product roadmap.

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.

In addition, I learned that it's easy to get carried away with asking high-level questions. In one of the agent interviews, I ran out of time for questions that I needed answers for because I let the participant share too much details about his workflow. It's important be clear on the research objective and choose the right kinds of questions to ask in order to maximize the value from an user interview.

Compass Listing Recommendations

interaction design

Intensive Care First Aid

freelance brand + web design

Lithium Community

interaction design

Quietly Story & Analytics

design + front-end development

Maker Source

experience design / academic

Food Repurposing Platform

experience design / academic