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