Airbnb Flight Feature

Adding a feature to the iOS app
MARKET RESEARCH
UX DESIGN
UI DESIGN
USABILITY TESTING

BACKGROUND AND BRIEF

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?

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

JOURNEY MAP

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.

DEFINING THE FEATURES

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.

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

BUILDING UI/DLS 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.

DESIGNING THE INTERFACE

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.

USABILITY TESTING

Validating the Design

From the sketches, I was able to gain valuable feedback from peers and mentor about the flow and UI elements. Throughout the wireframing process, I referenced Apple's Human Interface Guidelines for iOS as well as design patterns in competitor apps. Below are some select screens along with a few of the main UI changes I made since the sketches.

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.

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.

WHAT'S NEXT?

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.