Compass

Listing Recommendation System

Project Description

Compass is a technology and brokerage company that builds a platform for real estate agents to buy and sell better. As a product designer, for East West System, I worked alongside Compass’ search & properties team, developers, product managers and a senior designer to ship numerous product features.

Role: User Researcher, Interaction Designer and Interface Designer

Tools: Sketch, Adobe Illustrator & Photoshop, Principle, Keynote

Type: Client

Project Length: 2 months

DESIGN PROCESS

Business Problem

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.

Currently, prospective buyers are unable to discover listings on Compass beyond search. This problem presents itself as a business opportunity for Compass, as they can help agents generate leads 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:

Accuracy: What factors can we use to improve relevancy?
Diversity and novelty: Can we increase discovery through serendipity?
Trust and transparency: We should build trust by showing how items are being suggested
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:

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

**Examples of recommendation modules from Redfin, Zillow and Amazon.**

Scoping for a use case

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

**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:

Show recommendations in the listing page for buyers to boost discovery.
Show recommendations in the collections* page for agents to help them with creating comparables.
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 mock-ups to test them with the internal Compass agents keeping the three assumptions I've made in mind.

1 - Early sketches for the module across different pages.

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.

3 - Experimented by using a horizontal carousel instead of a load more button to save vertical space.

4 - Inspired by Git diff, the attributes of an item are highlighted green if they’re better than those of the current listing. This helps the user quickly compare listings.

5 - I started thinking about having status filters to enable buyers to understand the market better.

6 - Inspired by Zillow’s price chart, my thought was this component could help buyers quickly visualize and navigate recommended listings by price.

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

**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:

Similar listings in collections and search are not useful for agents as they prefer using saved searches to curate for their clients.
Agents have mixed feelings about showing public collections to buyers as the listings shown could lure buyers away from their own listings.
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.

Hypotheses #1:

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

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.

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.

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.

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.

**User participating in a card sorting exercise.**

The top 3 categories were:

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

Application Interfaces

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

Participants 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.

Ending Thoughts

At the end of this project, we presented our proposal to the client (i.e. Compass) and shared our findings with their team. Since then, a version of the module has been developed and shipped on compass.com

This project allowed me to further improve my user research skills and practice intentionality in my design. I was fortunate 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 2 months, I gained confidence in my own design process by understanding how to validate my designs iteratively and quickly.