Integrate a New 'Airport Transfer' feature for the Airbnb website
View prototype
Given the fact that travellers could obtain the exact location of the Airbnb only after they have made a booking, they might not aware that some of the lodging options cannot be easily accessed by public transportation. Also it is commonplace that they take a cab from the airport to get there and get scammed by dishonest cab drivers or get to the wrong place because of miscommunication/language barrier.
How might we design a new feature that allows travellers to book airport transfer from the airport to Airbnb in advance, either provided by the host or third party provider(if not available from the host) so that they could gain a seamless lodging experience from Airbnb?
- Embed seamlessly with the current Airbnb website
- Level up the overall lodging experience
- Reduce the hassle of point-to-point airport transportation
User Research, User Experience Design, Information Architecture, Interaction Design
For this project, I have followed IDEO’s Human-Centered Design Thinking process to go through the user research and support my design decisions.
To begin research for the new feature, I have conducted a secondary research to become more familiar with the subject area so that I could explore if providing point-to-point transportation between the airport and accommodation would be useful. A competitive analysis was conducted to examine the direct and indirect competitors in order to get a good understanding of what solutions each platform solves for users.
Apart from secondary research, I conducted primary research with an online survey and user interviews to better understand users' motivations, expectations, needs, and pain points regarding their booking experience with Airbnb. And more importantly I would like to understand how they arrange airport transportation in order to explore if there is a market need for the new feature.
A quantitative survey was administered via Maze with 22 responses received. 95% reflected that they would try out booking transportation in advance from the host/third party service provider on the Airbnb platform.
I conducted 1-on-1 user interviews with 3 travellers and Airbnb customers in Hong Kong. I would like to further understand their previous lodging experience and any frustrations in arranging transportation to the Airbnb. I summarised key takeaways as follows:
- Participants use Airbnb in finding a cheaper and private place to stay with more choices over typical hotels
- They rely mostly on Google map and directions provided by the host to reach the accommodation
- When participants decided to take a cab ,they had to keep track with Google map since they did not trust the driver and worried if the driver was driving extra miles in order to charge extra money
- There are frustrations on finding the way to the accommodation due to language barrier and unresponsiveness of the host
- Participants found arranging airport transfer in advance would be useful for remote locations since there are higher uncertainty and harder to call a taxi. But there are concerns on the pricing and flexibility.
Meet Scarlett! She's the user persona who represents users travelling in group. I focused on the pain points and their motivations with behavioural and attitudinal details (Jobs-to-Be-Done + persona). It's important that the new feature would fit the habits of existing users on the platform.
I also created a user journey map to illustrate the Airbnb lodging booking process with the new feature. It allows me to dive deep into Scarlett's emotions and frustrations at major touch-points as well as to explore opportunities of new feature design. During the process, I went through the current workflow of Airbnb in details especially the booking process.
With the persona and user journey defined, it's time to ideate and organise how the new airport transport feature can come to life. Since the new feature is not a standalone service, it goes hand in hand with the main accommodation booking flow that users are given the choice to add airport transfer together with the accommodation. It is important to organise how the new feature shall be integrated seamlessly into the existing design system.
I started by building a main user flow on booking airport transfer. I figured out there's one key decision point for users -"Already booked your flight?" since the host needs to know when to pick up the travellers. Also, users should be given the option to provide the arrival information later if they haven't booked the flight yet at that moment.
At the same time, I created various task flows on managing the journey including "Cancel Journey", "Edit Journey", "Add a Return Journey" and "Add Journey Details" for different scenarios in order to let me follow along the way while creating wireframes later on.
Since Airbnb already got a comprehensive design system, it allowed me to head straight to hi-fidelity wireframes and focused on new feature integration. I performed a research on Airbnb's Design Language System (DLS) and gathering relevant styles and elements, like the Airbnb Cereal typeface, brand color palette, and photography. Then I started replicating the main booking screens including the Airbnb listing, Confirm & pay, and Messages & details. This process allowed me to further study the entire booking flow and iterate the user flow along the way.
After finish replicating, it's time to work on the new feature - booking airport transfer. At the very beginning, I consider allowing users to select airport transfer first and let them "Add a return" on the Confirm & pay screen if they want to. At some point I found that the it might be confusing since users cannot tell if the price listed is for one-way or return trip. It's better to let them decide if they need a one-way or return trip from the very beginning which will radically affect the entire booking flow.
On the other hand, I was considering different cancellation policies for accommodation and airport transfer. Again I realised cancellation policy shall be the same for both accommodation and airport transfer since both services go hand-in-hand. If users cancel the accommodation, the booking for airport transfer will be cancelled automatically. Reversely if users cancel the airport transfer, it shall not affect the booking of accommodation. At this point, I realised I haven't fully clarified the logic and immediately went back to the drawing board and rethink the fundamental structure of the new feature before further moving forward.
I have iterated the user flow by adding another key decision point for users: One-way or Return trip at the very beginning of the booking process. They will be given the choice to manage their journey by adding a return tip only after they have booked the trip. After I iterated the main booking flow, I started working on the wireframes of "Manage Journey" including "Cancel Journey" and Edit Journey". The key logic is for cancellation, users could cancel the journey without affecting accommodation. And for editing journey, they could only edit the arrival and departure time, but not booking dates.
Here comes the hi-fidelity wireframes and I worked directly in the Figma file to create a click-through prototype with major interactions:
Click here for original prototype
I carried out user testings with 3 participants who had booking experience with Airbnb, 1 of which were individuals that I interviewed for this project. I created a script for the testing by listing the objectives and main tasks to accomplish. The participants were tested if they were able to make a booking for airport transfer together with the Airbnb accommodation and proceed to manage the journey (Cancel/ Edit). I ended the test by asking “What would you like to see differently or ideally to make the process straightforward?” in order to see if they have other ideas/opinion besides the main tasks.
Participants were tested on either Booking one-way airport transfer or Booking return trips. Therefore, there were two sets of tasks based on those 2 scenarios.
Set 1:
Task One: Select airport transfer service(one-way) and enter arrival information incl. flight no. and pick-up time (13:00)
Task Two: Cancel the reservation of airport transfer (one-way)
Task Three: Change the pickup time from 13:00 to 12:00 on 14 Oct
Set 2:
Task One: Select airport transfer service(return trip). Enter arrival information incl. flight no. and pick-up time (13:00) on 14 Oct and pick-up time (12:00) on 16 Oct
Task Two: Cancel the reservation of airport transfer (return trip)
Task Three: Edit the journey and change the pickup time from 12:00 to 11:00 on 16 Oct
Overall, all participants were able to navigate the prototype in completing the tasks. I analysed the data by creating an affinity map in a bottom-up approach which helped me organise my notes and transcript. I identified patterns in pain points and prioritised based on level of impact and amount of effort needed. The following pain points got the highest priority and I would address them in my iteration:
- Users are not sure if the change of pick-up time request is not effective yet since they need to wait for confirmation by the host
- Users easily miss the system message since the light grey message box and text is is subtle
- Users expect there is more visual cue/indication of the Pending request at the Airport Transfer Details section
- User associated “Cancel Journey” with “Edit Journey”. “Cancel” shall be included in “Edit”
- Users want to get an idea of the approximate car model since it may affect their decision of reservation.
- Users are confused with the design of time-picker. Not being sure which one is backward and forward.
My final step was to brainstorm solutions on the pain points and improve the usability of the new feature.
Click here for final prototype
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.
Click here for new DLS components
- How to work within an existing design system. I appreciated that not having to make every visual design decision and allowed me to focus on the information architecture.
- A comprehensive design system is valuable with the fact that it enables consistency across an entire product, especially when adding new features.
- Another round of usability testing given more time and resources with a larger sample size
- Since time was limited, I focused on "Cancel Journey" and "Edit Journey". If more time allows, I will further explore ‘’’Add journey details” and “Add a return journey”
- Explore rules and regulations with third party provider if the add-on service is not available from the host
