Airbnb
Integrating new features to help users plan group trips collaboratively
This is a conceptual project and not affiliated with Airbnb.
Scope
Adding new features to an existing app
My role
Lead UX Designer (Research, Visual Design, Interaction Design, User Testing)
Tools
Figma, Figjam, Trello, Zoom, Pencil & paper
Timeline
4 weeks (80 hours)
Overview
Airbnb offers one-of-a-kind unique experiences and a wide range of spectacular lodging options all over the world. It is a marketplace with the goal to create an end-to-end travel platform making researching to booking simple. The app has been successful with over 150 million users globally. However, there are opportunities for improvement when it comes to coordinating and planning group trips.
How might we help users coordinate group trips efficiently within the Airbnb app?
The Challenge
The Solution
Seamlessly integrated group collaboration features allow users to plan their trips together.
Features ensure users have easy access to group wish lists, stay within budget, and communicate efficiently without relying on outside platforms. Easy access to the platform will allow users without an account to continue as a guest without having to create an account. When it comes to budget control, users will now be able to see the full breakdown and estimated total without having to be in the checkout section. Additionally, users can like and leave comments on their wish list for an easy communicative and collaborative experience. These new features are designed around our user’s frustrations and need offering a robust solution from research.
Design Outcome
Continue as guest
New users have the option to continue as guests instead of having to create an account.
View estimated total & price breakdown
View estimated overall total and breakdown instead of waiting until the user is booking.
Collaborate with group
Users can collaborate with groups and like top listings on their wishlist.
Ability to see group likes and comments
Users can see which group members liked specific listings as well as view and post comments.
Design Process
Research
Market research
Competitive analysis
Heuristics Evaluation
Provisional persona
User interviews
Empathy map
User persona
Strategy
How Might We questions
Brainstorming
Project goals
Feature roadmap
Design
App map
UI Requirements
Task flow
User flow
Low-fidelity wireframes
High-fidelity prototype
Prototype & testing
High-fidelity prototype
Usability testing
Affinity map
Priority revisions
UI kit
I started the research process by conducting market research to help me better understand travel and Airbnb’s market, industry trends, and how COVID impacted the travel industry.
Market research highlights
Scoping out the competition
Once I have a better understanding of the market and my competitors, I analyzed the strengths and weaknesses of my direct and indirect competitors. This will help me identify any gaps that Airbnb can address.
Connecting with Airbnb users
To better understand Airbnb’s user frustrations, needs, goals, and motivation, I recruited six participants to join my user interview sessions so that I can look for more qualitative data as my primary research. Before conducting my user interviews, I created an interview guide detailing the interview process to ensure consistency between interviews.
Insights uncovered from primary research user interviews
Meet Vanessa
The findings from the empathy map were collected and summarized in my user persona. It assists the design process by presenting our target user group with the essence of their goals, needs, motivation, and frustrations.
How might we help Vanessa?
Taking the insights gathered from my research, I now want to think about strategizing solutions for Vanessa. Vanessa’s needs are framed into an actionable problem statement. Each statement is derived from the user's needs that will help me redirect the user's point of view into the How Might We (HMW) statement so that I can start brainstorming ideas that will fulfill the user's needs.
Using the formula [user] + [need] because [insight] to translate into an actionable HMW statement
Facilitating a group brainstorm
Although the solo brainstorming was effective, conducting a group brainstorming session was even more successful. I was able to recruit a few students and friends and we were able to generate innovative solutions that I did not think of during my solo ideation session. The group session allowed us to bounce ideas off one another and discuss potential weaknesses and strengths.
Assembling an intuitive framework
After setting up the product goals and deciding what features to include, I next focused on structuring the framework of the app. To do so, I assembled an app map to help me visualize the relationship between the content, flow, and interaction.
Vanessa’s journey
I created four tasks based on key features that I will need to implement in the app. Next, task flows were created to demonstrate the steps and actions that Vanessa will need to take in order to complete her task based on the structure shown in the app map.
Working with a design system
With the new features mapped out, I need to ensure it is seamlessly integrated into Airbnb’s current design system. In order to do so, I analyzed Airbnb’s design and assembled all UI elements into a centralized document. This served as a guide and reference when designing high-fidelity wireframes.
Piecing everything together
To have a more realistic, accurate visual of our product, high-fidelity wireframes were assembled referencing my sketches and UI Kit. Conducting usability testing with high-fidelity wireframes will ensure user familiarity with the app. The goal is to have the users use the features intuitively to help validate my design and uncover areas for improvement.
Continue as guest feature
Access to full price breakdown
Collaboration features: Like and comments
Putting it to the test
Recruited six participants to test my prototype with four tasks. This will help me detect issues in my design, uncover patterns and frustrations participants had when interacting with the prototype helping me identify areas for improvement.
Gathering insights + recommendations
I summarized my usability test findings to uncover patterns and frustrations participants had when interacting with the prototype helping me identify areas for improvement. Recommendations were then provided for each insight to improve the prototype for later reiteration before making it into high-fidelity wireframes and finalizing my prototype.
Testing insight
5/6 participants were confused about the drop-down triangle and misinterpreted the purpose of it
4/6 participants did not immediately know where to find the breakdown feature because the onboarding notification did not populate right away
4/6 participants did not read onboarding notification which lead to minor confusion
Recommendations
Clearly label and write out “View breakdown” to avoid any confusion and assumption
Have onboarding notification as soon as users land on the listing results page
Clearly notate “New Feature” to avoid onboarding notifications as pop-ups
The results
Utilizing the priority matrix, I implemented the recommended changes. Here are some highlights of the changes I have made.
Price breakdown notification available once user land on screen
Updated price breakdown CTA for clarity
Final prototype-test it out for yourself
Here is the final prototype after implementing recommendations. Feel free to explore the app on your own. Reminder participants were asked to complete three tasks which include the below:
Task 1: As a new user, Vanessa wants to view the Greece Wishlist using the link her group shared with her as a guest so that she can view potential rental listings since she does not have an Airbnb account.
Task 2: As a returning user, Vanessa wants to view the finalized rental pricing breakdown when searching for a rental so that she knows exactly what the total is ensuring they don’t go over budget.
Task 3: As a returning user, Vanessa wants to like Kremasti as your top rental choice in the Santorini, Greece Wishlist.
Task 4: As a returning user, Vanessa wants to view the group comments in the Santorini, Greece Wishlist so that she can keep track of her group’s feedback.
Learnings -working within constraints
This project challenged me more than I anticipated, but I enjoyed it every step of the way. Working to seamlessly implement new features into Airbnb's established UI and branding did not go without some frustration and challenges due to limitations. Through these frustrations, I did learn to work within the existing design constraints utilizing the tools at hand and coming up with solutions that work harmoniously.
Next steps
With the final revisions, I was able to accomplish the project goals and the designs are ready to hand off the designs to developers. I would share the Figma files with specifications on important micro-interactions that should be noted and a handoff meeting will also be held where we would discuss lingering questions, next steps in development, QA, and timelines.
