Facebook Commerce Maps

2017–2019 · Product, interaction, and experiment design

I increased trust in shopping on Facebook by creating the first map-based browsing experience and refining the design over time to accommodate the expanding inventory.

Map browsing view for Facebook Real Estate

Background motivation

At launch Facebook Marketplace had minimal map support. Sellers were asked to provide an approximate location radius for their listings, giving buyers a signal for potential buy/sell meetups. Lacking map-based browsing; it offered a ranked feed of products filtered by location.

Initially, Facebook Real Estate also didn't have a map view. However, we recognized the importance of precise locations for home shopping. People also wanted to know about places and services nearby a home listing. This led us to prioritize two tracks of map support:

  • View all homes on a map.

  • See nearby places on a home's map listing.

We started from scratch to determine the most suitable base map, interactive elements, and navigation patterns.

First iteration of a map based home listing browsing view & mini home listing card

In our first version, users could switch between map and list views. Home listings on the map showed prices, and tapping a pin let users swipe through photos and check property details before viewing the full listing.

Map pin collision

Reception

Only 5% of Facebook Real Estate users were browsing using our newly launched map (yikes). We determined the overlapping map pins were the primary hindrance. Home shoppers expected to see all available inventory, so there was no ranking mechanism in place to limit the total shown on the map. This rendered map interface becoming unusable at certain zoom levels within populous real estate markets.

Cluster pin concept

Experimentation

I tried clustered map pins to manage overlapping ones, but it backfired. The cluster pins' coordinates misled users, making it seem like many properties weren't in the search area. Lesson learned: precise location matters in map design.

Density specific map pin system

Leveraging collaboration for fresh ideas

Around the same time, Facebook's Events team were experimenting with their own unique map solutions. In an effort to create a unified approach to map interfaces, together we developed ways to expand their initial approach to accommodate the high volume of home listing data, focusing on dynamic pin sizes and contrast based on density.

Density testing dynamic pin states

Impact

  • 47% increase in home rentals category surface map engagement.

  • 11% increase in users contacting properties from map view.