Airbnb logo
Airbnb
Adding a meal service feature to give travelers a hassle-free way to eat — less time spent on cooking means more time for other adventures
Airbnb mockups
You’ve dedicated countless days planning your friend's bachelorette party, meticulously arranging everything from activities to accommodations. Now all that's left is the food logistics. After reviewing the Airbnb details, you find yourself wondering...

"How do I feed seven people with just a few pots and pans?"
OVERVIEW

Travelers like to spend time in the kitchen even during vacation — but not hours on end

Background
According to Vrbo's 2023 travel trend report, the demand for food amenities (think air fryer, coffee machine, etc.) is on the rise. A survey indicates that 65% of travelers consider amenities to be just as important as the travel destination itself. In fact, at Airbnb, “kitchen” ranks as the 3rd most searched amenity.
The Problem
While using a vacation rental kitchen is popular, it can be quite time-consuming and divert time from other activities. From meal planning and grocery shopping to navigating an unfamiliar kitchen for equipment and spices, the process can be cumbersome for most travelers.
The Solution
As part of a student project for Designlab, I proposed a new feature on Airbnb that allows travelers to add personalized meal services during checkout. This addition aims to streamline the cooking process mentioned above, ultimately allowing for more time spent on other activities.
EMPATHIZE

An unfamiliar kitchen with missing items frustratingly hinders efficiency and ease

User Research
I conducted four interviews with individuals who use Airbnb for occasional vacations. The goal was to discover the hindrances and challenges faced when utilizing a vacation rental kitchen.
User research quotes
Quotes from user interviews
All of my participants expressed concerns about the unfamiliarity and uncertainties surrounding the rental's kitchen. Issues that were brought up ranged from inaccurate cookware itemization to ambiguity in the language used on the listing's detail page (what does 'cooking basics' mean exactly?).
To me, these pain points were symptoms that pointed to a larger challenge at hand. Namely, that people desire efficiency and speed in cooking so they can allocate more time for other activities in their itinerary.
THE SOLUTION

Adding "flavor and spice" to the booking process with a meal service feature

I aimed for an idea that would integrate seamlessly with the current Airbnb experience. As a new feature, it needed to stand out but also remain subtle, allowing choice.
The solution: a meal service add-on right before booking. An add-on service addresses travelers' pain points without a total revamp of the current experience.
Best Practice Audit
I examined different services that utilized an "add-on" experience to analyze their strengths and weaknesses.
Airbnb best practices audit
Strengths + weaknesses of other services
I found that the best experiences facilitated 'two-way door decisions', enabling users to easily add or remove selections without disrupting their current checkout experience.
A High-Level Overview
With the above in mind, I created two options for meal services that could easily be added or removed during booking.

1. Ingredient delivery service

Travelers can select ingredients for recipes that are tailored specially for their rental, which prevents the frustration that comes with realizing a recipe calls for an item that is the Airbnb does not have.

These ingredients are then delivered during check-in time, which saves time on pre-trip grocery shopping and ultimately frees up more time for other activities.

2. Preprepared meal delivery service

On busy days, travelers can choose to heat up a prepackaged meal and have food ready in under 10 minutes. This saves the effort of preparing, cooking, and cleaning up. In addition, it eliminates the need to search for cooking ware, addressing a common pain point from my research.
User Flows
The following is the flow for when a traveler selects the ingredient delivery service (the flow for the preprepared meal delivery service is very similar).
Overall flow with ingredient delivery service
User flow for the ingredient delivery service
DESIGN & PROTOTYPE

Designing with Airbnb's look and feel in mind

View prototypes
Low-Fidelity Wireframes
Adding a meal service & selecting check-in time
Add a meal & check in time low-fidelity wireframe
Ingredient delivery service
Ingredient delivery service cart main page
Ingredient delivery service cart
Ingredient delivery service recipe detail
Preprepared meal delivery service
Preprepared meal delivery service main page
Preprepared meal delivery service cart
Preprepared meal detail
High-Fidelity Wireframes
Since I was adding a feature to an existing product, it was important for me to create a new but seamless experience for users. I did my best to utilize structure, fonts, and styles similar to those of Airbnb.
Adding a meal service & selecting check-in time
Once a traveler selects either meal service on the trip confirmation page, their selections and the option to choose the estimated check-in time will appear on the left.
Add a meal & select a check-in time high-fidelity wireframe
Ingredient delivery service
Travelers can browse through various recipes and (de)select ingredients to have delivered to their Airbnb.
Recipes list high-fidelity wireframe
Recipes list page
Recipe selections high-fidelity wireframe
Recipe selections drawer
Recipe details high-fidelity wireframe
Recipe details modal
Preprepared meal delivery service
Similar to the ingredient delivery service, travelers can browse through and select various meals to add to their trip.
Preprepared meals list high-fidelity wireframe
Meals list page
Preprepared meal selections high-fidelity wireframe
Meal selections drawer
Preprepared meal details high-fidelity wireframe
Meal details modal
TEST & ITERATE

Offering the users clearer transparency and greater affordance

I conducted usability tests with three participants who have utilized Airbnb in the past. The following are iterations I made based on the results.
Adding a detailed breakdown
Before
Service breakdown (before)
After
Service breakdown (after)
Some of my participants suggested having an itemized list so they can quickly verify their selected meals. To address this, I incorporated a dropdown in the price breakdown on the right. In addition, based on feedback from 2/3 of my participants, I added information about a delivery fee.
Editing selections
Before
Editing selections (before)
After
Editing selections (after)
Two participants suggested adding an aggregated list of the ingredients, where, for instance, if three recipes require one onion each, the list would specify three onions. However, this approach resembles services like Instacart, focusing on shopping for individual items. I opted against this, as my research revealed that user pain points were centered around meals rather than individual items (such as the distinction between ‘chicken noodle soup’ and just ‘chicken’).

As a happy medium, I made it more clear that the recipe/meal selection cards were clickable. In the original design, clicking on the card would open up a detail page, providing users with a comprehensive view of the ingredients to be delivered.

With the redesign, I offer more affordance to these cards by introducing an ‘Edit’ button. And particularly for the ingredient delivery service, I added a dynamic subheading that displays the number of selected ingredients. This serves as a cue  that clicking on the box will allow users to view and edit their chosen ingredients.
Meal Service Page
Selection confirmation
Before
Gif showing no confirmation when recipe is added
After
Gif showing confirmation when recipe is added
One user expressed a desire for confirmation that a meal/recipe was successfully added to their cart. This adjustment aligns with the usability heuristic of ensuring visibility of system status.

In the original design, the total was updated in the bottom banner, but this was very subtle and could be easily missed.

In the redesign, once the user adds an item, the current modal closes, and a drawer slides open. This experience is consistent with many e-commerce websites, providing a familiar interaction for the user. Unlike the original design, the 'cart' drawer in the redesign features two CTA buttons: 'Continue browsing' and 'Confirm selections' instead of the original single 'Confirm' CTA.
REFLECTIONS

Aesthetic or functional?

Next Steps
If I had more time to add additional features, I would consider adding the ability to shop for individual ingredients, as mentioned earlier. This offers greater flexibility for those who prefer to shop for smaller items instead of being confined to ingredients for a specific recipe.
What I Learned
For this capstone, I felt the push and pull of aesthetics and functionality. I found myself initially trying to aim for "sleek" and "not bulky", which ended up leading to designs that confused my users during testing.

For this case study, I ultimately went for more of a functional design, since I want my users to be able to easily acclimate to the new feature.