Airbnb Flights

Role: UX/UI Designer & Researcher

Timeline: 4 weeks, 80 hours

Deliverables: Prototype, Usability Testing

Problem

Moving Airbnb closer to becoming an end-to-end travel platform.

Solution

Design and prototype a way for users to browse and book flights within the Airbnb iOS app.

Overview

Airbnb promotes people-to-people connection, community, and trust around the world. To advance their mission, they are focused on reimagining travel by building an end-to-end travel platform that combines where you stay, what you do, and how you get there, all in one place. How might we design a new feature related to flight booking and planning seamlessly connected within the current Airbnb iOS app?

Leading the user experience and design phase of this project, I conducted research and designed a way for users to plan and book flights within the current Airbnb iOS app. This is a speculative project and I am not affiliated with Airbnb.

Research

Competitive Analysis

A handful of research methodologies were used to gather insight into Airbnb’s competitor’s current experiences and solutions, and their current users' pain points, goals, and expectations. I started with conducting secondary research into Airbnb as a business and some of its key competitors in the hospitality and flight booking industries. Furthermore, I did an app audit of the current Airbnb iOS app to better understand the current scope of the product.

Research Findings

The next step was conducting primary research with a survey and 1-on-1 interviews to collect insights into current user experiences, pains, expectations, and gains. The goal was to learn and gain a deeper understanding of how people book and manage their travels using Airbnb in any capacity.

Interview Findings

Participants plan their travels and flights on desktop and phone. Price is playing a significant role when deciding where to stay. Being able to contact a host directly is a huge plus for Airbnb. Airbnb iOS app is used during trips and on-the-go. Expedia, Booking and Google Flights are typically used to browse flight options.

Survey Findings

15 respondents (78.9%) identify as female. 13 respondents use desktop (68.4%) to plan and book their trips, 6 – mobile (31.6%). 19 respondents (100%) travel for vacation or leisure. Most common tools used to plan and book flights are Airline websites (68.4%), Expedia (31.6%) and Booking.com (31.6%). If Airbnb had a flight-related feature, 12 respondents (63.2%) would consider trying it out. Also, 3 respondents (15.8%) would definitely do that.

User Persona

This persona was created to directly represent the research I had just performed. It represents the common goals, behaviors, and themes among users that I identified through user research. Olivia Henderson represents the common goals, behaviors, and themes among users that I identified through user research.

Journey Map

I also created a user journey map to empathize with Olivia's experiences before, during, and after interacting with Airbnb Flights feature.

Empathy Map

I analyzed the information I gathered from the interviews and surveys. From that, I made an empathy map to help me synthesize my interview findings. This process helped me to organize the results by the patterns I found within them. These patterns led me to several insights, and in turn, the ability to deduce the needs of my users.

Feature Roadmap

Next, I identified key business & user goals. I wanted to ensure the new feature would allow both Airbnb and its users to achieve at least some of their individual and common goals. For the sake of time and staying in project scope, I reorganized and reeled back by brainstorming a Feature Roadmap to help me prioritize potential features to add, by impact and ease of implementation.

Information Architecture

App Map

The next step in understanding the users and their needs was to establish an organized hierarchy to outline specific features and understand what steps a user might take through the product. Within my define & ideate phase, I also took steps to begin creating the information architecture of this product. I used this app map to organize the navigation categories within the current Airbnb iOS app.

Task Flow

This task flow helped me analyze each step of completing a task. Through this process, I could identify key categories and screens that I needed to build. I kept this process high level, then visualized the steps persona would take to complete it.

User Flow

After defining both user and business needs when it comes to flights on Airbnb, I explored some task flows involving the new feature. This user flow helped me to expand upon the task flow in a less linear way and look more deeply into the various pathways that users may take to complete tasks within this app.

Interaction Design

wireframe sketching

Sketching with paper and pen allowed me to quickly work through the logic of how the content should flow, and helped to lay the foundations for the overall experience. While sketching, I constantly looked into design patterns currently being used across the Airbnb iOS app.

The Airbnb’s Design Language System was constantly referenced during this phase. I gathered relevant styles and elements, like the Airbnb Cereal typeface, brand colors, and photography. Furthermore, the app screenshots were designed to replicate the exact UI concepts.

User Interface Design

UI Kit/DSL Components

I put together the new Airbnb Design Language System components that I need to build for the UI involving the new feature. I created a UI Kit so that I would have all of the UI and branding elements in one document, and could easily apply them to my wireframes to create hi-fidelity mockups. I focused on keeping consistency across screens & devices.

UI Design

I applied Airbnb’s UI elements and DLS to create consistent visuals across all screens. Key screens were designed based on the priorities of the Feature Roadmap. I designed the screens and overlays required for users to complete core tasks involving browsing and booking flights within the Airbnb iOS app. All screens were designed to embed seamlessly onto the Airbnb iOs app.

Usability Testing

Using the high-fidelity wireframes, an interactive prototype was created with Marvel App for usability testing. The goal of the prototype was to test the overall flow and user pains for the added Airbnb features (iOs app). Testing was completed through in-person observations, remote testing and remote via Maze platform. Four participants were recruited for in-person usability testing, while a total of 19 participants completed the remote via Maze platform.

The tasks were:
1. Search and explore flight tickets to a destination.
2. Filter flights to a specific destination.
3. View an individual flight listing, then save this listing.
4. View this listing in the Saved tab.

Key Findings

Users were able to complete all tasks with no problems (besides limitations of the prototype), with many testers stating that this would be a useful addition to Airbnb. However, I identified a few key areas that could be improved to clear up any confusion for the user. Further usability testing could occur with the high fidelity mockup prior to hand-off.

Affinity Map

From the feedback and observations gathered during testing, an affinity map was created to help pull out the common patterns and recurring themes. I was then able to identify key insights and recommend revisions to address each one.

Priority Revisions

My next task was to iterate and implement priority revisions. Priority revisions were completed based on the findings of the usability testing and are mostly related to UI design to improve user interaction with the Airbnb iOS app.

Next Steps

1. More usability testing and iteration.
2. Work on solutions to the new problems that arose.
3. Presentation with stakeholders.
4. Handoff to developers.

Results

It was a true pleasure to work on this project. I learned how to work within an existing design system. I appreciated that not having to make every little visual design decision allowed me to focus more on other things. Testing the prototype using 3 methods revealed some pros & cons of different test methods. I am glad I gave the user testing platform Maze a try, as I found it really interesting.