Airbnb Flights: Adding a feature to the iOS app

Airbnb Flights: Adding a feature to the iOS app

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"?

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"?

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.

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)

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

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

1. Research & Synthesis
2. Information Architecture
3. Interaction Design
4. UI Design
5. Prototyping & Testing
6. Iteration & Implementation

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.

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.

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.

• 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

• 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.

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.

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. 

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. 

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

• 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

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

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

1. Explore flights to anywhere

2. Conduct search and explore flights

3. Filter flights based on criteria

4. View flight details and save flight

1. Explore flights to anywhere
2. Conduct search and explore flights
3. Filter flights based on criteria
4. View flight details and save flight

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.

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.

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.

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.

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.

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!

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!

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!

• 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

• 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

• 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

• 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