Airbnb

Role: UX Designer

Project: Add a feature

Duration: 75 hours

Tools used: Figma, FigJam, Optimal works, FaceTiime, Zoom

Background

Anyone who has traveled with a group of people knows the challenges that can come with finding housing that accommodates everyone, or as close to everyone in the group as possible.

Creating a collaborative destination wish list on Airbnb can serve various purposes, blending the excitement of travel planning with the convenience of digital collaboration, allowing anyone invited to contribute to decision making. By sharing recommendations and favorite listings with each other, you can discover hidden gems and unique stays that you might not have found on your own.

“I have a huge family, 16 including myself. So, even when we do add the links to group chats, a lot of them get lost or overlooked throughout the conversations.”
— Charlie B.

Airbnb has over 150 million users. Of those guest, 36% are between the ages of 25 and 34. As well, 13% are 55 years old or older.

  • 1. Empathize

    Competitive Analysis

    User Interview

    Survey

  • 2. Define

    Affinity Map

    How Might We

  • 3. Ideate

    Information Architect

    Low-fidelity wireframes

    UI Elements

  • 4. Prototype

    High-Fi mockups

    Final Prototype

  • 5. Test

    Usability Test

    Iterate

Competitive Analysis

To get a better understanding of the market, I compared 2 different rental sites: Vrbo and Homestay. I wanted to understand their effectiveness and the user’s experience with the current features available. I analyzed each one for features such as filter options, layout, and overall flow of the design. Each site had personal profiles, offered experiences, and offered accessibility options, but neither offered a collaborative list feature.

User Interviews & Takeaways

Traveling can be chaotic, booking your stay shouldn’t be. Between accessibility, accommodations, and location, there is a lot that goes into planning for a group of people. I wanted to get a better understanding of people’s processes when looking for and booking an Airbnb and how they decide which listing will work for their group. I interviewed 4 participants who have used Airbnb to book a place to stay in the past. Each participant was between the ages of 25 and 47 and had planned at least 1 trip for a group size of 7 or more.

  • - 4/4 people use a group chat to share potential listings with the group

    - 4/4 people said they have lost listings during group chats due to conversation happening in the same thread

    - 3/4 participants have had a group larger than 14

    - 4/4 participants agreed they would like to see a collaborative wishlist feature added to Airbnb

    - 3/4 participants used an outside tool (pen and paper, notes app, etc.) to tally up most popular listing

Interview Questions:

  1. What is the size of the largest group you have stayed with in an Airbnb?

  2. How are potential properties shared with everyone in the group?

  3. How important is it to you to see your Airbnb before you book? 1–5, with 5 being a must and 1 being that you don’t care if you see it or not.

  4. How many people are usually in charge of finding a place? If more than 1, how did you work together?

  5. What challenges come with using a group chat to decide on a place to stay?

  6. Has your group ever voted on a place to stay? How did you keep track of who liked which place?

  7. How/who determines the final place?

“We vote in the group chat. It gets confusing. Usually, I have to write it out on a separate note to keep track. Sometimes listings get lost, but it’s the best method I’ve found so far.”
— Kathrine D.

Affinity Map

Based on the research, I found that having a collaborative wishlist on Airbnb would be beneficial to user’s. 

The objective was to understand what the user’s needs and wants are and find out where their biggest pains come from when booking an Airbnb for a large group. 

Need: Collaborative wishlist

Research shows that putting listings in group chats leads to missed listings, confusion, and people being left out. Participants noted that potential listings get lost in conversation and sometimes people who join the chat late miss listings altogether. Some  users have tried writing out  each listing and the number of votes it has on a separate piece of paper or notes app, but still felt like there could be a better and more efficient way to make a collective decision.

How Might We?

How might we allow users to communicate with friends about listings they like without leaving the app?

User Flow

To ensure the user has a full understanding, I created a flow to show where the app will take the user as they approach each screen. By doing this, it allowed me to see where the user starts and ends, giving me insight on how to create efficient wireframes.

  • User will start at the dashboard

  • User will tap/press “heart” on a new listing

  • User will choose to create a collaborative wishlist

  • User will need to set a name for the newly created list

  • User will have the option to save the list

    • if the user decides the name is incorrect, they may go back and edit the name

  • User will be prompted to invite friends

  • Users will be redirected to the. newly created collaborative. wishlist while waiting for the invitations to be accepted

Low-fidelity Mockups

To make my design tangible, I created some low-fidelity wireframes. I designed them based on the flows and the screens needed to complete each task. I also added onboarding screens to help familiarize new users with the design. Since we are creating a responsive website, I included both mobile and desktop wireframes to show the look on multiple devices. Below you will see 5 mobile screens and 3 desktop versions.

Create collaborative wishlist

Collaborative wishlist

Specific Listing

Usability Testing

Using the mid-fidelity wireframes I created based on the above, I conducted a usability test with 5 users. Overall, the feedback received was positive. Participants were able to successfully navigate the screens and complete all required tasks. They were asked to complete the following:

  1. Navigate to a listing in a collaborative wishlist and “heart” it

  2. Add a comment to a listing on a collaborative wishlist

  3. Invite someone to a collaborative wishlist

What went well

  • Participants described flow as “easy to follow”

  • 4/4 participants completed the tasks

  • Each participant recalled a trip where this feature would have been beneficial

User questions and concerns

  • Participant asked to be able to invite from the wishlist page

  • Original screen flow needed adjustment

  • Some icons needed to be smaller

Iterations

The results from the usability test were used to create high-fidelity wireframes. I revisited my original design and made adjustments to finalize the high-fidelity prototype and address some of the concerns and weak points with the original design.

​​After careful consideration, I determined that adding the option to invite someone to join a collaborative wishlist while on the wishlist screen was beneficial to the users and the design. By creating this option, it also addressed some of the flow issues throughout the design. It kept users from having to leave the current screen they were on in order to perform the task. Lastly, adjustments to buttons and icons were made so that they matched Airbnb’s UI kit and brand.

Hi Fidelity Mockups

Figma for Prototype Testing

Below is a short video of the prototype designed in Figma. Click to watch.

Final Prototype

To view the click-through prototype, tap the phone.

Lessons Learned

Adding a feature to Airbnb taught me how to follow a brand that is already established while adding to its efficiency and flow. I also learned the importance of putting the user first. Understanding user needs, preferences, and pain points is crucial to creating effective designs. While working on the iterations, I began to understand the value of continuous improvements based on user feedback.

View other projects