Airbnb

Seamlessly integrating a group travel feature.
A cover image showcasing this project's best features.
Known for its incredible homes, unique experiences and impeccable design, Airbnb is an online marketplace whose goal is to create an end-to-end travel platform that can handle every part of people's trips. Even though Airbnb has successfully provided its users with individual moments of exploration and discovery, opportunities for improvement remain for users looking to coordinate trips with multiple people.
timeline
2 Weeks
(80 Hours)
Role
UI/UX Designer
(Solo)
Tools
Figma / FigJam
Maze / Procreate
Tasks
UI / UX Design
Strategy

How might we help
users coordinate group trips on Airbnb?

the solution
A seamlessly integrated group travel feature that allows users to collaborate on wishlists together.
Designed to help groups plan out their trips, these new features ensure that users stay within budget and efficiently communicate their thoughts about listings. Budget control and group communication are facilitated through the ability to filter listings by price per guest, set a price target, and add organizable categories. This well-researched solution is designed around our user's needs and frustrations and offers a thoughtful fix to our complex problem.
Feature Overview
Create and organize wishlist categories as a group
An image of our solution for Airbnb.
An image of our solution for Airbnb.
Filter by price per guest
Quickly find listings that fit within your group's budget. The price range filter hides listings that are above what your group wants to spend.
Starting with research
Structuring our approach
Before jumping into designing, I created a document outlining the project's research goals, questions, assumptions, and methodologies. This document helps guide the research process in a focused direction which will help us understand our potential user's needs, goals, motivations, and frustrations.
View Plan →
Outlining our research objectives
Identify Airbnb's target users.
Discover key trends for travel-related mobile apps.
Evaluate the strengths and weaknesses of competitors.
Understand user goals, needs, frustrations and motivations.
Choosing research methods
Market Research
Competitive Analysis
Heuristic Evaluation
User Interviews
Market Research
Market research helped me identify Airbnb's target users and general trends of travel-related mobile apps.
View Full Research →
1
60% of users are millennials and 54% are female.
2
54% of users have affordability as their top priority.
3
Millennials prefer local tourism over international.
Competitor Analysis
Looking at current solutions & noting opportunities
Upon identifying industry demographics and competitors, I began analyzing the strengths and weaknesses of direct and indirect competitors to establish a starting point for the project. This analysis offers a look into what users expect travel-related mobile apps to offer.
View Full Analysis →
Vrbo's logo.
Vrbo
Platform to book vacation homes.
Strengths
• Save and compare listings.
•Group votes on trip boards.
• Group chat on trip boards.
‍
Weaknesses
• No flexible date browsing.
• Difficult to search for unique stays.
• Can't sort by monthly stays.
Booking's logo.
Booking
Platform to book travel homes and hotels.
Strengths
• Browse for homes and hotels.
• Map includes listing prices.
• Can group your likes into trips.
‍
Weaknesses
• No recommended listings.
• Text alignment is distracting.
• Can't invite people to trip board.
Home to go's logo.
HomeToGo
Platform to book vacation homes.
Strengths
• Sort homes by popularity and price.
• Shows nearby places on listings.
• Flexible date browsing.
‍
Weaknesses
• Can't search listings by distance.
• No discounts on search screen.
• Can't group your likes into trips.
Provisional personas
Defining potential users to prepare for interviews
With our secondary research, I created three provisional personas that acted as a guide for finding people to interview. The Adventurer is someone who wants to travel to unique destinations and experience something new. The Parent wants to visit family while relaxing and the Remote Learner wants to vacation somewhere close to home and be out in nature.
An image of our provisional persona, the adventurer.
The Adventurer
25-34 years old
Female
Goals
• Travel to unique destinations.
• Experience something new.
• Find somewhere Instagram worthy.
‍
Pains
• Travel to vaccinated areas.
• Splitting trip costs with friends.
An image of our provisional persona, the parent.
The Parent
35-54 years old
Male
Goals
• Visit family while traveling.
• Spend quality time with loved ones.
• Stay relaxed during vacations.
‍
Pains
• Ensuring family is on the same page.
• Staying safe while traveling.
An image of our provisional persona, the remote learner.
The Remote Learner
18-24 years old
Female
Goals
• Vacation somewhere near home.
• Travel while working or studying.
• Be close to nature.
‍
Pains
• Saving up money to travel.
• Attending classes during the day.
user interviews
Understanding our users through open conversation
After defining who I'll be targeting for interviews, I spoke to six participants who matched the profiles of our provisional personas. In preparation for these interviews, I created an interview guide that provided an introduction to participants and outlined any screener, interview, and demographic questions that were to be asked.
View Interview Guide→
Synthesizing interview data visually
Upon transcribing my interviews, I organized all of my observations into individual notes and grouped them into categories. Organizing observations in this way helped highlight key patterns between participants. These patterns were then translated into insights and used to define the needs of the project's primary persona.
View Empathy Map→
An image of our empathy map.
Key TAkeaways
1. Facilitate group decisions
After talking to participants, it was discovered that users booking group trips narrowed down wishlist listings by getting the opinion of the people in their group. Three out of six participants relied on group votes as a way of deciding on an Airbnb. From this it was concluded that users need to be able to figure out how their group ranks listings.
2. Showcase price per person
Users found themselves calculating the price per person for each listing. This is because users needed to find listings that fell under a certain price target. Three out of six participants evaluated listings using price per person. From this it was concluded that users need to get access to price per person when comparing listings.
3. Highlight points of interest
Our last discovery was that users thought it was important to see how far listings were from certain destinations. Two out of six participants factored in distance between specific locations when booking. From this it was concluded that users need to get access to how far points of interest are from listings.
Primary Persona

Introducing our user
The data accumulated from secondary and primary research was then used to create the project's primary persona, Ami. Ami wants to spend quality time with her friends while traveling and find places to stay within her budget.
An image of our persona Ami. She is someone who enjoys local travel with friends.
How might we...
Ami's needs were then framed into actionable problem statements to prepare for individual and group brainstorming.
View Statements→
1
How might we help Ami see how her group ranks listings?
2
How might we help Ami see price per person for listings?
3
How might we help Ami access how far points of interests are?
Group Brainstorm
Problem solving
Using the problem statements, I led a 45 minute group brainstorming session with 6 other product designers. During the FigJam brainstorm we thought of features like group filters and a price setter.
View Group Brainstorm →
An image of the group brainstorming session that I conducted.
Product Strategy
Creating an app that supports business & user goals
With potential solutions gathered, I identified Airbnb's business and user goals to narrow down the direction the new feature should go in. These goals will be used to help prioritize the brainstormed features. Focusing on the goals that serve the business and its users helps us ensure that all developed ideas serve a clear purpose.
An image of our business and user goals.
Prioritizing brainstormed solutions
Each idea that was thought of was then put into a table to be prioritized. Features that satisfied more goals were placed higher than the rest. From here, I evaluated the amount of implementation effort each feature would require and my confidence level for the feature's placement. Since we're limited on time, I decided to tackle all P1s and only some P2s.
View Airtable→
An image of our feature roadmap. This was created to help prioritize our features.
App Map
Defining hierarchy
Once I decided on the app's features, I moved my focus to outlining the structure of Airbnb using an app map. The app map allows me to see how the different screens and new features will interact with one another.
An image of our app map for Airbnb.
UI Requirements
Tasks to be completed during usability tests were then chosen. These tasks highlight our new features and determine the screens to be designed.
View UI Requirements Doc →
1
View wishlist listings by price per person.
2
Add a category named "Treehouses".
3
Move "Treehouses" to the top of the list.
outlining flows
Visualizing interactions through flows
With the tasks defined, I created three task flows and a user flow to illustrate how Ami would run through the tasks. These paths show Ami's journey through Airbnb and provide insight into the individual actions and decisions she will come across. Having the different screens and actions clearly laid out provides a guide that will help when sketching out ideas.
View Task Flows →
An image of our task flow for Airbnb.
Stepping into our user's shoes
To further empathize with how our user will be navigating Init, I created a user flow that accounts for the different decisions that a user would make as they go about completing the set tasks. This helps to highlight the different interactions, screens, and entry or exit points that a user may run into while using the product.
View User Flow →
An image of our user flow for Airbnb. This was created to empathize with our user.
Sketches
Low-Fi Wireframes
Utilizing the UI requirements document and flows as a guide, I sketched out multiple iterations of screens for the tasks. This highlighted where elements would be located and how they would look like.
An image of our sketches for Airbnb's new feature.
Branding
Working with a design system
With the structure of the app sorted out, I analyzed Airbnb's current design system to ensure the seamless integration of our new features. I did this by creating a moodboard with Airbnb's font, color, and image choices. Afterwards, I worked on a style tile and UI kit that I'll be able to refer back to when designing high-fidelity wireframes.
View Moodboard→
An image of the UI kit created for the project.
hi-fi wireframes
Putting the puzzle together
By utilizing our sketches and applying the established styles to the screens, I created Airbnb's high-fidelity wireframes. I chose to conduct usability testing with high-fidelity wireframes because I wanted to make sure that the new features felt natural to users. Our aim is for users to be able to use the features intuitively and without any frustration.
It's moving, it's alive!
Digitizing our screens was the first step to conducting usability testing but now it's time to create a prototype that users will be able to interact with. The prototype I created includes all the interactions needed to complete the pre-defined tasks. Upon completion of the prototype, I moved from Figma to Maze where I created three missions for users to test.
View Prototype →
An image of our high-fidelity wireframes for Airbnb.
Usability Testing
So...how did it go?
Moderated usability testing was conducted with eight participants utilizing the think-aloud method. This method enabled me to ask clarifying questions to users. I put together a usability test plan which assumed a 100% completion rate and a 90% error-free rate. This meant that I expected all users to complete the tasks with minimal mistakes and slips.
View Testing Plan →
Synthesizing our test results
Out of the eight participants, 100% were able to complete the tasks with a 98% average error-free rate. Just like before, participant observations were organized into categories to help identify areas of improvement. These patterns were then translated into design recommendations. From here, I created a prioritization matrix to guide my focus.
View Affinity Map →
Insights
Users were unaware that the filters button was at the top of the page.

Users skimmed through the filters and passed the price view section.

Users weren’t sure what was being calculated for the price range tool.
‍
Users were unaware of the change order button at the top of the page.
‍
Users were confused which icons matched with which listings.
→


→


→


→


→
Recommendations
Add a notification highlighting the filters button.

Move the price view section to under the price range tool.

Make the price range tool text more descriptive.
‍
Add a notification highlighting the change order button.
‍
Remove the handle bar icons for individual listings.
Final solution
Updating wireframes to account for feedback
All that was left was updating Airbnb's wireframes based on the feedback gathered from testing. This helped the project become a more usable product for Airbnb's users. The following screens showcase a few of the changes as well as some notable features of the project. Once this step was complete, our features were ready to move on to development.
Collaborative Filters
Properly introducing group filters to wishlists
An image of our updates for Airbnb.
An image of our solution for Airbnb.
Price per guest
The price view section was put under the price range section to increase visibility. Users can now view homes by their nightly cost or guest cost.
Wishlist categories
Adding a way for users to group listings together for better organization. This helps groups efficiently talk about their favorite listings.
An image of our solution for Airbnb.
Category order
Minimizing feature complexity to acclimate users
An image of our updates for Airbnb.
working prototype
Testing out the prototype yourself
Wireframes were then moved into Marvel to create the clickable prototype below. Please feel free to explore the app. As a reminder, users were asked to filter the "Great Outdoors" wishlist by price per guest and set the max total price to $150 per guest, add a "Treehouses" category to the wishlist, and move the "Treehouses" category to the top of the wishlist.
final thoughts
What's next for the project?
Given more time, I would keep an eye on the change order feature to see when I can implement additional functionality. I simplified this feature after testing so that only entire categories were movable instead of individual listings. This was because users were confused by the layout of the draggable handle icons. Once users grow used to this feature, I would introduce movable listings. I would also work on adding the "special occasion skip" which is a P2 that allows users to excuse someone from paying. This was the most voted for feature during the group brainstorm and it could offer a chance to delight our users.
Reflecting on important lessons
Pay close attention to detail when working with a design system
Working within the constraints of Airbnb's design system is a process that I adored every step of the way. There were many intricacies to Airbnb's design and I had to pay attention to small details like how Airbnb only uses sentence casing for headings. Focusing on these details enhanced my eye for design and will later help me create a design system of my own.
Structure is important to leading groups
The second lesson came about when I conducted the group brainstorm. Although I worked with others in the past for hackathons and personal projects, this was my first time leading an ideating session with so many other designers. I was initially worried about how the dynamic would work online but was happy when everyone communicated smoothly, had fun, and experienced no technical difficulties. I believe that the time I spent preparing for the brainstorm and laying out the content in FigJam was vital to the success of the session.
Always have a backup plan
Unlike the brainstorm, usability testing didn't go as smoothly. Even though I used Maze before to conduct testing, this time the software glitched and participants failed to get the prototype working. Luckily, the day before I experimented with Figma's new multiple flow feature so I had already outlined my tasks there. This made the glitch painless during live testing. Overall, through this project I refined my design and soft skills and learned to quickly adapt to unforeseen circumstances. All of this will prove essential as I tackle my next project.

Thank you for reading

Next Steps

View recent project
Explore my LinkedIn
Contact Me
🤖 Built in Silicon Valley