Airbnb Flight Feature

Adding a feature to the iOS app


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

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?


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.


This journey map 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. I created a user journey map to empathize with user’s experiences before, during, and after interacting with Airbnb Flights feature.


Information Architecture

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.


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.


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.


Keeping it Simple

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.


Validating the Design

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.


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.


Re-testing and Redlining

With the priority revisions complete, my next steps will be to re-test the revised designs and gather more feedback. After re-testing it will be possible to do a few more necessary design changes before redlining and handing off the design with specs to the development team.