Airbnb
Integrating New Feature to an Existing Product
Challenge: To seamlessly integrate new features to an existing product.
Project goals:
Design an MVP of new features that adds value to both users and reinforces Airbnb’s mission
Feature must embed seamlessly into the existing Airbnb app
No fundamental structural changes to the mobile application
Focus on iOS
Role: UX Designer (Research, Visual Design, Interaction Design, User Testing)
Duration: 4 Weeks (80 hours)
Overview
As of 2020, there are more than 4 million Airbnb hosts and 150 million users worldwide. Airbnb have been successful connecting millions of people to places and experiences around the world. They have evolved and refined their product through the years continuously improving and revamping their website, user interface, adding new features, expanding to new markets, and aiming to expand the growth of their business. However, an area of opportunity for further improvement on the platform, is helping users coordinate group experiences without having to leave the Airbnb app.
The Problem
How might we help users seamlessly coordinate group experiences without having to leave the Airbnb app?
Add features to the Airbnb iOS mobile app that allows users to coordinate group experiences.
The Solution
Airbnb’s only group collaboration feature was inviting friends to view Wishlist of rentals.
Added like and comment feature within the Wishlist app so users are able to vote on their top listing and provide feedback.
Understanding Airbnb’s Landscape & Users
Research
Research allows me to first understand what I know, what I don’t know, and what I need to find out. It also enables me to better understand the market trend and dive deep into our understanding of our users, not just their immediate frustrations, but their views, behaviors, fears, limitations, reasoning, and goals as well.
Before diving into my research, I first want to clearly define my goals, objects, and methods in executing my research by assembling a research plan. This allowed me to identify any assumptions I may have to validate and focus on the goals that I need to achieve.
Research Goals
Discover key trends among the lodging industry
Uncover target audiences’ goals, pain points, frustrations, needs, and motivations regarding their experiences using Airbnb app
Determine strengths and weaknesses of Airbnb’s competitors
Assumptions
Users use the Airbnb app to book rental accommodations for their trips.
Users enjoy booking rentals for unique new experiences.
Users find it difficult coordinating trip accommodations for group trips.
Secondary Research
Market Research
My first step was to conduct initial market research to help me better understand market trends and the lodging landscape. Gaining a high-level understanding of market trends offers insight into who Airbnb’s users are and the context in which they operate.
Key Findings: Airbnb Statistics
150 million people worldwide use Airbnb
Airbnb listings constitue 19% of the total demand for lodging in the U.S.
32% want to travel to be close to family. 31% want to travel to a new destination or have a new experience. 25% want to return to a favorite destination
Key Findings: Demographics
54% of Airbnb guests are female and 35% of guest are between the ages of 25-34.
Millennials make up about 60% of all guests who have ever booked Airbnb.
58% of millennials say social media worthiness is a key factor in booking decisions.
Key Findings: Travel Market Trends
1 in 5 people want their destination to be within driving distance of home.
54% of surveyed Airbnb users have affordability as their top priority
Over 50% of Airbnb guests choose to stay at an Airbnb over traditional hotel
Competitive Analysis
Next, to identify opportunities in the market, I analyzed three direct and one indirect competitors to Airbnb. I assessed their strengths and weaknesses in solving similar problems and to better understand how each company positioned themselves.
Provisional Personas
Based on the data we have gathered from our market research and competitive analysis, three provisional personas were created. Each persona is reflective of an audience segment highlighting different goals and frustrations.
Provisional persona will help represent whom we think our users are and assist in recruiting participants in user interviews.
Heuristic Evaluation
A heuristic evaluation was conducted using the 10 principles to assess the app to uncover existing usability problems with Airbnb’s current mobile app and to better understand what Airbnb is currently successful from a usability perspective.
Examples of Airbnb app assessment using the 10 heuristic evaluation. View full evaluation here
Primary Research
Having gained a broad understanding of the lodging landscape and Airbnb’s current users, I moved on to conduct primary research with one-on-one user interviews. This stage will help me gather raw data that will help me better understand my target user goals, frustrations, needs and motivations.
Before our user interviews, an interview guide was drafted to standardize the interviews with carefully selected open-ended questions. By giving participants control of the conversation, we avoid biased answers and allows participants to share their experience through storytelling.
A total of six interviews were conducted over video calls lasting roughly 20 minutes each. After each interview, transcripts were assembled to extract raw data to prepare for synthesis and analysis.
Insights from user interviews. View transcript here
Research Synthesis
To synthesize the qualitative data gathered from my user interview, an empathy map was created to understand our users by identifying patterns, uncovering insights and generating needs. View larger version of empath map.
Insight
Users mentioned the need of having a voting/polling system that will be helpful
Need
Users need to be able to figure out how their group can rank their rental listings
Insight
Users expressed frustrations having to keep track of groups feedback/decisions on rentals
Need
Users need to be able to easily track group’s feedback on rental listings.
Insight
Users are frustrated that group members are unable to access Wishlist invite without an Airbnb account.
Need
Users need to get access to Wishlist to view potential rental listings without having to create an account.
Assumptions Validated
Users use the Airbnb app to book rental accommodations for their trips.
Validated: 6/6 participants used the Airbnb app to book lodging for their trips
Users enjoy booking rentals for unique new experiences.
Validated: 3/6 participants used Airbnb because of the unique experiences
Users find it difficult coordinating trip accommodations for group trips.
Validated: 6/6 participants have expressed difficulty coordinating trip accommodations for group trips
User Persona
Now that I have a better understanding of the lodging industry, Airbnb’s current users, and my user’s goals and needs, I created a fictional user persona to represent key characteristics and behaviors of my users. This will me stay focus on solving for the most essential problems and whom we are designing for.
Meet, Vanessa, a 29-year-old teach from NYC and is a travel enthusiast.
View here for full persona
2. Define + Ideate
Having understood for whom we are designing for from our research phase, we next want to define the problem that we are solving for.
To clearly frame the problem the we are solving for, utilizing my empathy map I created Point of View (POV) statements. This will help translate my research findings into an actionable problem statement that will help ideate in a goal oriented manner. To do so, I rephrased my POV statements into How-Might We (HMW) statements. These statements will help prepare for innovative solutions through brainstorming.
View full POV & HWM here
Solo Brainstorming
Guided by my HMW statements, I conducted three-minute brainstorming sessions using the mind mapping technique. The goal of this exercise was to brainstorm as many solutions to our persona’s problems as possible with a focus on quantity over quality.
Group Brainstorming
Although the solo brainstorming was effective, conducting a group brainstorming session was even more successful. With five participants, 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.
3. Strategy
Project Goals
Products exist in an ecosystem of desirability, viability, and feasibility. Up until now, our focus had been on the desirability of the product; however, we must ensure that we design value for both users and business. A Venn diagram collating user and business goals and technical considerations highlights the overarching goal or the optimal point of focus with which we could achieve the best results.
Project Roadmap
Before diving into the design execution aspect, we want to first strategize and prioritize what features and elements are critical that needs to be implemented upon launch. Referencing the solutions from my brainstorming session, I created a comprehensive product roadmap. This details a list of features and elements into four categories: Must-Have (P1), Nice to have (P2), Surprising & Delightful (P3), and Can-Come-Later (P4). Items on the list are sorted based on two benchmarks, impact and time needed to implement.
Site Map
Similar to preparing blueprints for a house, we want to define the structure of our website. Thus a sitemap was assembled to help visualize and demonstrate the hierarchical structure that includes our proposed pages and features for Airbnb’s website.
View full sitemap here
4. Design
UI Requirements
Once key screens were determined in my sitemap, I assembled a UI requirement document that will outline specific elements and features that will need to be implemented. This will serve as a living document for both designer and developer as a reference. This document elaborates essential pages, features, elements, and detailing actions needed in order for each task to be completed.
Task Flow
Before constructing the website, I must first understand the needs of my users and the series of actions the user will need to take in order to achieve their goal. Below I have defined an example of a task that Vanessa would like to complete and demonstrated steps she will need to take to accomplish the three task.
View full task flow here
User Flow
Taking the task flow one step further, I created a user flow to better understand how users could interact with the website. It outlines all possible scenarios, options, errors, dependencies, and outcomes.
View here to see Vanessa’s tasks and how she can be moving through the website to accomplish her goals.
Wireframes
Wireframes operates as the architectural blue print used to represent underlying skeletal framework of Airbnb’s existing framework. This is constructed base on the UI Requirement document.
Low-fidelity Wireframe Sketches
Low-fidelity wireframe sketches were created to gain a better understanding of how the new features and screens would look. Using pencil and paper and referencing the Airbnb mobile app, I sketched out the screens needed for our users to complete each task and implemented the new features. This was especially helpful in visualizing how the new features are implemented and make the necessary changes before digitalizing. View sketches here.
Branding
Airbnb has an existing branding to which we will not make adjustments for the scope of this project. However, it’s still important to understand what Airbnb aims to communicate to users with their branding elements; just like brand voice and writing style, visual branding is another tool for companies to craft an image and shape users’ experience.
High-Fidelity Wireframes
To have a more realistic, accurate visual of our product, responsive high-fidelity wireframes were created using the style tile and existing app screens to guide the process. Since Airbnb already has established brand guidelines and app screens, the realistic and detailed interactions that high-fidelity prototypes can provide outweigh the pros of low- and mid- fidelity being fast and low cost.
5. Prototype + Testing
High-Fidelity Prototype
To have a more realistic, accurate visual of our product, responsive high-fidelity wireframes were created using the style tile and existing app screens to guide the process. Since Airbnb already has established brand guidelines and app screens, the realistic and detailed interactions that high-fidelity prototypes can provide outweigh the pros of low- and mid- fidelity being fast and low cost.
Usability Test
Before conducting the usability testing, a script and plan was assembled to define our objectives in carrying out the tests. I expected a 100% completion rate of the tasks due to participants’ familiarity with similar features and the app, however I understood that there may be errors in the ways participants complete the tasks.
A total of six tests were conducted with participants who have used Airbnb’s app. Over a 20 minute recorded Zoom call, participants were asked to share their screen while completing tasks. The think-aloud method was the primary method to encourage users to vocalize their thoughts, frustrations, actions, and decisions to reveal what users are experiencing as they complete each task.
Usability Testing Finding
After each session, a transcript was assembled for each participant detailing each testing and noting my observation of their interaction with the prototype, comments, mistakes, slips, and confusions that was expressed in the process. This transcript serves as raw data that will aid in uncovering user’s patterns and behavior.
Affinity Map
Direct quotes and key observations from the transcript were transferred to sticky notes, with one quote or observation per sticky note. After laying out all the notes, I created clusters based on similarities and patterns. The patterns that produced insights related to users’ pain points and frustrations were converted into corresponding design recommendations.
This process allows me to process raw data from user interviews and sequentially arrive at a conclusion, or recommendations, based on solid observations and findings from the test.
This helped reveal patterns in participants’ behaviors and emotions, leading to 3 concrete insights, corresponding design recommendations, and priority level for each recommendation.
Priority Revisions
The three design recommendations derived from the affinity map were plotted against effort in implementation vs. impact it would make to users. As the two recommendations were all low effort and high impact, they were implemented in the updated final wireframe and prototype.
Dropdown triangle was revised to clearly note “View breakdown” to reduce confusion and user assumption.
Prototype was revised so onboarding notification would automatically highlight new feature once user lands on search results.
Final Prototype
Updated prototype recommendations derived from the affinity map.
View Prototype here
Reflection & Next Steps
Reflection
The biggest challenge for the project was coming up with innovative solutions and seamlessly integrating the features into Airbnb’s established UI and branding. I found myself over analyzing my designs and overthinking every aspect trying to put everything into consideration that I was my solutions. What helped me clear my head and get out of this runt was clearing the board and start from scratching by simply revisiting the app and analyzing the existing design and elements and then do the same with Airbnb’s competitor apps.
One thing I would have done differently is conduct a heuristic analyzation of the competitor’s app as well to better understand and identify strengths and weaknesses.
Next Steps
With the final revisions, I was able to accomplish the project goals and the designs are ready for next steps. To hand off the designs to developers, I would share the Figma files with specifications on important micro-interactions that should be noted. A handoff meeting will also be held where we would discuss lingering questions, next steps in development, QA, and timelines.
