Airbnb Flights: Adding a feature to the iOS app

Overview

Challenge

How might we design new features related to flight planning and booking that embed seamlessly within the current Airbnb iOS app, moving Airbnb closer to becoming an "end-to-end travel platform"?

Solution

From research to UI design, I designed and prototyped a way for users to browse and book flights within the Airbnb iOS app. This is a speculative project and I am not affiliated with Airbnb.

Role: UX/UI Designer
Tools: Sketch, Figma, Marvel, Whimsical
Timeline: 4 weeks (Mar 2019)

Airbnb-iOS-app-iPhoneX-mockup-for-slides

Process

Research & Synthesis / Information Architecture / Interaction Design / UI Design / Prototyping & Testing / Iteration & Implementation

Research & Synthesis
Information Architecture
Interaction Design
UI Design
Prototyping & Testing
Iteration & Implementation

Research & Synthesis

To kick off this project, I conducted secondary research into Airbnb as a business and some of its key competitors in the hospitality and flight booking industries to quickly familiarize myself with the space. I also did an app audit of the current Airbnb iOS app to better understand the current scope of the product.

Next, I conducted primary research with a survey and interviews to gain insight into current user experiences, expectations, pains and gains when it comes to the Airbnb platform, brand, and services. My goal was to identify opportunities to improve or build upon the Airbnb user experience.

SURVEY FINDINGS

18 responses, mostly women, ages 18-39
56% travel 3-4 times per year
100% travel for vacation or leisure
94% are familiar with Airbnb
89% travel by plane
Popular flight booking tools include Google Flights, airline websites, Kayak, and Expedia
94% would try out flights on Airbnb

18 responses, mostly women, ages 18-39
56% travel 3-4 times per year
100% travel for vacation or leisure
94% are familiar with Airbnb
89% travel by plane
Popular flight booking tools include Google Flights, airline websites, Kayak, and Expedia
94% would try out flights on Airbnb

INTERVIEW FINDINGS

3 participants (1 man, 2 women) in their 20s or 30s
Plan travel and flights on desktop
Use Google Flights to browse
Use airline websites to book
Book flights before accommodations
Look for the cheapest flights
Value and prioritize travel
Interested in flights on Airbnb

3 participants (1 man, 2 women) in their 20s or 30s
Plan travel and flights on desktop
Use Google Flights to browse
Use airline websites to book
Book flights before accommodations
Look for the cheapest flights
Value and prioritize travel
Interested in flights on Airbnb

I synthesized my research findings to define the core target users and the problems the new feature would ideally solve. First, I made an empathy map to help me synthesize my interview findings. I got a lot of comments during the interviews and wanted a visual reference for this information going forward.

Meet Madison! She's the user persona who represents the common goals, behaviors, and themes among users that I identified through user research. As I got deeper in the process, it helped to have a visual reminder of the people I was designing for. I also created a user journey map to empathize with Madison's experiences before, during, and after interacting with Airbnb Flights. Of note, the Opportunities row really got me imagining what flights on Airbnb could look like.

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. Following a brainstorming session and conversation with my UX Academy mentor, I made a feature roadmap to list some potential features to add, and prioritize them by impact and ease of implementation.

Information Architecture

After defining both user and business needs when it comes to flights on Airbnb, I some task flows involving the new feature. These were merged and expanded, resulting in user flows. The goal was to show how users might interact with the new features as they move around the Airbnb app.

After that, I made a high-level app map (or application sitemap) to show the current information architecture and where the new features would exist.

Interaction Design

In preparation for wireframe sketching, I compiled a list of UI requirements needed for users to complete tasks involving the new features. This list became a checklist as I sketched the key screens. While sketching, I constantly looked into design patterns currently being used across the Airbnb iOS app, and studied other patterns seen in various flight-booking apps.

When I was ready to create high-fidelity mockups, I set myself up for success by researching Airbnb's Design Language System (DLS) and gathering relevant styles and elements, like the Airbnb Cereal typeface, brand color palette, and photography. I also designed over countless app screenshots to replicate the exact styles, spacing, and overall visual design of the Airbnb iOS app.

UI Design

A few hours into UI design, I realized I may have been too ambitious with the features. Before, it seemed like a good idea to offer packages of curated flight and home combinations, since my research suggested users were interested in booking these together on Airbnb. However, initial mockups raised more questions than they answered. I realized I should focus on one thing at a time (flights), rather than try to tackle flights and packages at the same time. After some readjustment to keep the project in scope, I designed the screens and overlays required for users to complete core tasks involving browsing and booking flights within the Airbnb iOS app.

Prototyping & Testing

With my UI designs for Airbnb Flights, I created a high-fidelity interactive Marvel prototype for usability testing. I then drafted a usability test plan outlining the test objectives and methods, and defining the core tasks for users to complete. The plan also included a script for the in-person and remote moderated sessions.

OBJECTIVES

Assess the overall findability and usability of the new flights features
Observe how efficiently users can find and explore flights to anywhere
Observe how efficiently users can conduct a search and explore flights to a destination
Assess the usability of the filters for flights and the save feature

Assess the overall findability and usability of the new flights features
Observe how efficiently users can find and explore flights to anywhere
Observe how efficiently users can conduct a search and explore flights to a destination
Assess the usability of the filters for flights and the save feature

METHODS

In-person moderated
Remote moderated
Remote unmoderated (via Maze)

In-person moderated
Remote moderated
Remote unmoderated (via Maze)

TASKS

Explore flights to anywhere
Conduct search and explore flights
Filter flights based on criteria
View flight details and save flight

Explore flights to anywhere
Conduct search and explore flights
Filter flights based on criteria
View flight details and save flight

QUANTITATIVE RESULTS

A total of 19 participants tested the prototype across the different methods. With moderated testing, 100% completion rates were recorded for all 4 tasks , and the error-free rates for tasks 1 through 4 were 100%, 60%, 80%, and 60%, respectively. During unmoderated testing via Maze, the success rates for tasks 1 through 4 were 86%, 93%, 93%, and 79%, respectively.

QUALITATIVE RESULTS

For the wealth of qualitative feedback and observations I gathered during testing, I made an affinity map to help me pull out the common threads and recurring themes. I was then able to identify key insights and recommend revisions to address each one.

Iteration & Implementation

My next task was to iterate and implement priority revisions. While I would've liked to do all of them, I had to prioritize due to the time constraints. In other words, I had to prioritize the priority revisions! I started by doing the easy fixes first, knowing I had some decisions to make about the other ones.

Finally, I compiled the new Airbnb DLS components that engineers would need to build for the UI involving the new feature. Many are only slight variations of existing components and blend seamlessly with the current Airbnb visual design system, or so I've been told!

Unexpected Challenge

While prioritizing revisions, it became clear to me that some were quick and easy fixes, whereas others would require significantly more time and effort, but also have much greater impact on the business and overall user experience. So, which are the high impact / high effort changes? Moving the 'Homes you can pair' section I had included at the bottom of the flight details screen, and combining all flight search and filter criteria to be more consistent with other flight-booking apps (although this would be inconsistent with the current filtering model in the app).

These weren't going to be quick fixes; they'd require me to go back to the drawing board and rethink the fundamental structure of the Airbnb app. That's because the current app doesn't utilize the concept of a shopping cart, since users typically book one thing (like a home, or an experience) at a time. Adding flights to the app would essentially require a "cart" that would allow users to "shop" for the building blocks of their trip (a flight, a home, and perhaps an experience) and then book everything at the same time.

By solving one problem, I created another one. Although I was not able to further explore solutions to this new problem due to time constraints, I thought about how it might work, and illustrated this with a new task flow and wireframe sketches. This is what I would focus on if I had more time, or if I return to this project in the future!

While prioritizing revisions, it became clear to me that some were quick and easy fixes, whereas others would require significantly more time and effort, but also have much greater impact on the business and overall user experience. So, which are the high impact / high effort changes? Moving the 'Homes you can pair' section I had included at the bottom of the flight details screen, and combining all flight search and filter criteria to be more consistent with other flight-booking apps (although this would be inconsistent with the current filtering model in the app).

These weren't going to be quick fixes; they'd require me to go back to the drawing board and rethink the fundamental structure of the Airbnb app. That's because the current app doesn't utilize the concept of a shopping cart, since users typically book one thing (like a home, or an experience) at a time. Adding flights to the app would essentially require a "cart" that would allow users to "shop" for the building blocks of their trip (a flight, a home, and perhaps an experience) and then book everything at the same time.

By solving one problem, I created another one. Although I was not able to further explore solutions to this new problem due to time constraints, I thought about how it might work, and illustrated this with a new task flow and wireframe sketches. This is what I would focus on if I had more time, or if I return to this project in the future!

Conclusion

WHAT I DID

Primary & secondary research
Feature identification & prioritization
Information architecture
Sketching & interaction design
UI design & hi-fi prototyping
Usability testing by 3 methods
Affinity mapping
Iteration & implementation

Primary & secondary research
Feature identification & prioritization
Information architecture
Sketching & interaction design
UI design & hi-fi prototyping
Usability testing by 3 methods
Affinity mapping
Iteration & implementation

WHAT I DIDN'T DO

Conduct behavioral studies
Design and prototype every feature in the roadmap
Implement the high impact / high effort revisions that would challenge the current app's organization
Additional usability testing

Conduct behavioral studies
Design and prototype every feature in the roadmap
Implement the high impact / high effort revisions that would challenge the current app's organization
Additional usability testing

NEXT STEPS

More usability testing and iteration
Work on solutions to the new problems that arose

More usability testing and iteration
Work on solutions to the new problems that arose

WHAT I LEARNED

How to work within an existing design system. Overall it was fun, and I appreciated that not having to make every little visual design decision allowed me to focus more on other things
There's a ton of value in design systems in general. It enables consistency across an entire product, even as new features are being incorporated
Testing the prototype using 3 methods revealed some pros & cons of different test methods. I'm glad I gave the user testing platform Maze a try, as I found the heat maps really interesting!
Prioritization skills and strategies. A few times I had to step back and be realistic about what was feasible within the time constraints. While I may want to do it all right now, it's important to know when to pause or pivot

How to work within an existing design system. Overall it was fun, and I appreciated that not having to make every little visual design decision allowed me to focus more on other things
There's a ton of value in design systems in general. It enables consistency across an entire product, even as new features are being incorporated
Testing the prototype using 3 methods revealed some pros & cons of different test methods. I'm glad I gave the user testing platform Maze a try, as I found the heat maps really interesting!
Prioritization skills and strategies. A few times I had to step back and be realistic about what was feasible within the time constraints. While I may want to do it all right now, it's important to know when to pause or pivot

More Projects

Find me on

Contact me at

hello@yumimorii.com