Airbnb Map Platform

Vision & Strategy · Product & Design Direction · UI/UX Design · Prototyping

With Airbnbs located throughout a city, location is one of the most important factors for choosing the perfect place to stay. Guests want to find an area that matches the needs of their trip. Perhaps they are looking for a place to stay close to the top attractions, or in a quiet neighborhood, or right next to the beach.

However, in early 2019, Airbnb's maps were basic, inconsistent, and unhelpful. My team and I set out to build a map experience that would allow guests to feel like they knew the destination even before visiting.

Map of Los Angeles showing location of Airbnb listings, points of interest, and neighborhood names
Example of Airbnb's updated map with listings, points of interest, neighborhoods, and popover card

Communicating the vision and strategy

To kick-off this self-initiated project, I created creative and product briefs which were critical in getting team and leadership support. The briefs covered the strategy, goals, user problems, design principles, initial features, and a timeline for the project. I also created some concept designs which served as the product's vision.

Panel showing different layers and points of interest categories
Layers panel concept
Guests can customize what information they wish to see on the map
Map showing a highlighted section of Valencia Street with selected points of interest
Street paths concept
Recommended walking routes with places to stop
Map showing a highlighted section of Valencia Street with selected points of interest
Place details page concept
Place and neighborhood details powered by locals

Unifying the experience

Before this project, every team had their own map implementation with their own set of components and logic. Every map looked and worked differently, even within the same user flow. One of the main goals was to unify the map across every page and platform. We started with the maps in the search, Wishlist, and things to do pages.

A screenshot of Airbnb's search results map view with listing pins, point of interest markers, and search field
Unified stays search result map
A screenshot of Airbnb's Wishlist map view with several saved listings along the coast of California
Unified Wishlist map
A screenshot of Airbnb's things to do view of Paris with ordered pins from 1 to 16 that show the top places to visit in the city
Unified things to do map

Designing new components

I created a new set of pins, labels, cards, polygons, and controls. They were designed to align with Airbnb's new brand style and Design Language System. These components had to work well for a huge metropolis with a high density of listings and places, all the way to the smallest rural village.

In addition to the visuals of the components, I also defined the logic of how each type of pin and label should be used. This made sure that the map remains consistent, legible, and useful in all areas and at all zoom levels.

Listing markers with price
Listing markers
Normal, selected, and wishlisted
Point of interest markers with icons, numbers, and photos
Point of Interest markers
Various states and sizes
Point of interest markers with labels and additional information
POI markers with labels
Sample of categories and contextual information
City and neighborhood names with addition information such as vibe and and popular points of interest
City and neighborhood labels
Sample of tiers and contextual information

Gathering new content

The majority of the information shown on the map is provided by recommendations from hosts who live in the area. We updated the Guidebooks product so hosts can share more structured data about the places and neighborhoods they recommend. In addition to written suggestions, hosts can now provide vibe (quiet, artsy, etc), unique features (great view, local favorite, etc), and suggest who may like it (good for families, first-time visitors, etc).

Four that contain a photo, title, and details about stays, experiences, places, and neighborhoods that appear on the map
Desktop map cards for stays, experiences, places, and neighborhoods
Examples of how the map card can be flexible depending on the type of content

Adding new features

One of the major new features we added was allowing guests to add their own markers to a map. Now, guests who are traveling to attend a venue, say a business traveler headed to a conference or a family visiting Disneyland, could add that place to the map. While searching, they can then judge how near or far they want to stay from that point of interest. This eliminated a lot of guesswork and swapping back and forth between Airbnb and other map services.

A screenshot of a small map of Venice, California, followed by a short description of the neighborhood and nearby landmarks
Listing details page
Hosts showcase their neighborhood and recommended places to visit
A screenshot of a full screen map of Venice, California showing markers for various POIs including Venice Beach and the Hollywood Sign
Full screen map
Expand recommended place pins and obfuscate the stay's location
A screenshot that shows a point of interest search field and list of popular places around Venice, California
Add a place to the map
Guests can search for a POI by name or address to see on the map

Prototyping and implementation

Building realistic prototypes were critical to test, tweak, and iterate on the different interactions and logic. I built these prototypes in HTML, CSS, and JS using real data and listing information. I also added a simple development menu for my team and leadership to explore different design and product options. The prototypes also helped engineers know exactly how something should work and feel when they were doing final implementation.

Video of the map prototype showing various interactions and animations including the development menu

Success and growth

The map platform project was successful in redesigning and expanding Airbnb's map, providing guests with key location information, and ultimately helping more guests book a great stay. In addition, after the initial launch and success, Airbnb dedicated a new team to focus on location and map specific user experiences full-time.

Role and team

  • Position

    Design Lead and Manager
  • Company

    Airbnb
  • Year

    2019
  • Design, Content, and Research

    Jasmine Y, David M, Annie T, Fran K
  • Product

    Clarence Q
  • Engineering

    Johan K, Mindy Y, Wint L, Devansh G, Tania V, Jason E, and many more

More projects

Airbnb Arrival Guide

Airbnb Search & Nearby