Airbnb

A comparison tool for Airbnb listings

Project Brief* 

Airbnb is a global hospitality platform that is continuing to rapidly grow and expand but lately it has been plagued by a drop in bookings. I was brought in by Airbnb to examine the decline in bookings and to create a feature to address it.

*Fictional Brief

Background

Airbnb was founded in 2008 by Brian Chesky, Nathan Blecharcyzk, and Joe Gebbia in San Francisco, CA. It started as an idea to place an airbed in the living room of the founders and turn the apartment into a bed and breakfast. The product was meant to appeal to people who were unable to book a hotel in the saturated market. By 2009 the company expanded to include a variety of properties beyond just airbeds in living rooms and is now a multi-billion dollar company.

Client: Airbnb

Duration: 80 hours

Tools: Figma, Whimsical, Maze

Roles: Researcher, Interviewer,  UX and UI Designer

The Problem

Imagine you’re browsing Airbnb listings for an upcoming trip, you’ve saved a couple of stays that you’re excited about and now it’s time to narrow it down. You confidently navigate to your wishlist and begin the process of opening various tabs with the different listings so you can compare them. Soon you’re lost in a sea of open tabs and worse yet, you can’t find the information that you were trying to compare.

The Objective

How might we design a feature that helps users compare Airbnb listings more effectively and quickly?

Defining the Problem

In order to create a feature to address the decline in bookings I needed to get to know the habits of Airbnb users. To create a useful feature I needed to better understood how Airbnb users browse, book, and stay at Airbnbs.

During interviews users had a myriad of delights and pain points to report back. They mentioned cost, reviews, and amenities were all important to them when they booked stays. I took this data and used it for a more holistic view of what users consider important information when they are looking to book an Airbnb.

Affinity mapping important information for Airbnb

I started my competitive analysis by asking myself “how do these brands tackle the problem that I want to solve with my feature?” From further analysis I learned that none of the booking websites allow users to directly compare two properties like other retail websites offer with their products. Being able to see all of the comparisons laid out helps the customer feel empowered in their decision making. Ideally it would be less taxing for the user to compare things directly like “amenities” or number of bedrooms/bathrooms without having to wade through other information or continue to switch back and forth between listing tabs.

Competitive Analysis assessing other brands’ ability to compare listings

Through my interviews I learned that users delighted in the variety of options for stays that were being presented to them but were getting overwhelmed by the process of narrowing it down to the perfect listing. I created a set of provisional personas to focus on the different needs for different user categories.

Provisional personas adapted from user interviews

Creating a set of three provisional personas helped me better understand what sorts of pain points I would be tackling with my feature. I created the Avid Backpacker, the Creature of Comfort, and the Group Trip Planner. Each persona comes with its own set of goals and pains which, in turn, helps inform my design. From these three personas I expanded one of them to create an archetype, Creature of Comfort. Creature of Comfort was renamed Lily Chiu and was used to create a user journey and guide my designs.

Persona Lily Chiu

Creating Lily Chiu helped me design a feature that directly tackled the pain points that she was experiencing when booking an Airbnb. Designing with her journey in mind meant that I could create a feature that would address multiple users’ needs instead of focusing on a specific pain point for a specific user.

Task flow of selecting properties to compare on Airbnb

Prototype

I considered a variety of designs, unsure if users would rather scroll or activate an accordion to unfurl the information. At the very least I wanted the listing cards and overall review rating to be sticky so users would always know which listings they were comparing. It was important that the users always feel in control so I included the ability to drag and remove the listing cards as well.

In order to maintain brand consistency I designed the comparison listing cards to echo the favorites card design. Designing with the same icons, photo carousel and typography hierarchy was key to maintaining the user flow.

A sketch of the comparison modal

Designing the listing card with Airbnb user feedback

After researching different designs for comparison tables I landed on infinite scrolling paired with sticky listing cards. The key takeaway from my user interviews was that users were eager to know price, location and reviews of the listing above all else so I designed the listing cards to reflect that.

Sticky listing cards displaying photos, pricing and reviews.

Users needed a way to begin the task of comparing listings so I set to work redesigning the favorites page of Airbnb. In order for the feature to be useful it first had to be findable. I settled on adding a box next to the heart icon with a prompt to select listings to begin comparing them. Once users have selected at least two listings the prompt changes to a “compare” CTA.

The redesign of the favorites page.

Challenges and Iterations

I ran usability testing and the results were mixed, the feature was testing very well for usability but some users mentioned the way the information was presented was overwhelming. During testing I asked users what their first impressions of the comparison modal were, reactions were mixed.

Some users reported the design as “clean” or “minimal” while others reported it as "A bit overwhelming to look at". I also had users look at the same original comparison modal and asked if there was any information that they would like to see added or removed. Most testers mentioned they were less interested in adding or subtracting information but wanted to see it categorized more clearly.

Original design of comparison modal

Redesign of comparison modal

Creating more clarity required adding alternating colors for the rows and changing some of the text to icons. The design changes made the task of comparisons more manageable for the users, which in turn reduced their mental load. 

Reflections

My biggest takeaway from this project was the importance of not designing for a personal problem. At every step of the process I asked myself “is this something I want or would others find it useful” and research was key for keeping myself on track. If I had more time I would have continued to find ways to reduce the mental load of the user while comparing listings. The ability to sort items like amenities could further streamline the task for Airbnb users but I would need to run more rigorous user testing in order to determine whether or not sorting is necessary.

The process of booking an Airbnb should feel celebratory and exciting, much like the trip a user is planning for. How nice would it be if booking the Airbnb felt like a fun extension of the trip instead of a hurdle to overcome before beginning the trip?