Michael Ligier
Michael Ligier

airbnb packages - overview

This project is a product concept for Airbnb that I have been thinking about for a while that spawned out of my own personal experiences and frustrations with the product. In this piece, you'll find my overall design process including the problem that I saw, some sketches/wireframes, final mockups, design choices, and things that I would continue to iterate on in the future. There were a few UX decisions that I made in this project that I felt would also enhance the user experience for the Airbnb packages idea overall which I'll also dive into. If you want to see all of the screenshots, feel free to scroll all the way to the bottom.


I've booked 22 Airbnbs in the past year and with their release of experiences, I've wanted to find experiences for the places that I'm staying. However, to my surprise, Airbnb hasn't made it a very simple process to book the two of them together. Currently, you have to book a home on Airbnb, then go back and search for an experience separately. On top of that, it's difficult to know which experiences are available for what dates and what dates they're not available. This user experience has deterred me from booking very many experiences because after I've booked the Airbnb, it's simpler to go to other sites and book completely different experiences at lower prices.


proposed solution

One way to alleviate some of the problems I experience is to create a third offering, packages, which would allow users to book homes and experiences at the same time instead of segmenting the two out. A user would walk through many of the same steps that they currently take when booking a home or experience, but in the selection and payment flow, they would choose a home and an experience and pay for/book both at the same time. The reason this would benefit a user is that they don't have to go back and search for a new experience after they book the home, they can do both at the same time, making it a much more intuitive and friendly user experience. In the following sections, I'll be walking through my thought process on how the site should be built and also come up with some mockups and go more in depth on design choices in the final mockup. 


flow diagram/design

The flow diagram shown below shows the different possible actions that a user can take. The flow had to be simple and intuitive for a user so there are two possible choices that a user can take once they've decided they want to purchase a package. They can either create their own package (the flow in the green) or they can select a pre-existing package (the flow in the orange). Each flow only consists of a few steps, in order to reduce the churn rate and friction associated with the purchase. By making each flow extremely simple and only a few steps, a user won't feel like they're in the flow for a very long time and get frustrated. 

airbnb flow.png


After about 30 minutes of brainstorming on whiteboards, a few of the concepts that I came up with were different ways of displaying this information either in a form or as separate pages.

The first variant is a vertical form that most closely resembles a typical form that you would normally fill out. Once each section is complete, it would snap to the next section.

The second variant displayed here is the page step form which is the final design that I decided to use. More information about the specific design decisions that went into this are in the next section.

The third variant featured here is one where you have a central hub page and then you can click on any of the steps, complete it, and come back. This wasn't selected because it was cumbersome to go from page to page. 

Apart from this, there were various other designs and ideas that were tested, but in the end, the second variant shown here was the one that I decided to pursue a bit further.


mockups & design choices


The Three Sections

Every page within the flow will have three sections: the status bar, the decision section, and the detailed information section. By keeping this consistency across all of the steps in the process, users will quickly become familiar with the format and be able to identify key information quickly.

Status Bar:

The status bar contains two main components: the title of the section and the progress bar. Both of these are to help the user navigate through the process; the title of the section informs them of what this page does, and the progress bar tells them how far in the process they are.

Decision Section: 

Whenever someone makes a decision such as where they want to go, what home they want, or what experience they want, they'll make the decision on the left side. It's a pretty intuitive flow for users and they're able to effectively make decisions in a consistent way across the entire flow.

Detailed Info Section:

Finally, the detailed information section is the area where all of the information that a user could want will appear. When looking at a home or experience, the details will come up on the right side. The intent here is to have all of the information within one screen, rather than having to switch between different tabs.


select home screen


On This Page: 

This screen is the first step in the process that really takes advantage of the three sections described above. On the left, a user can scroll through all of the home listings available in the area and ultimately decide what home they want to stay in. Once they click on a home, all of the information will appear on the right and they can scroll downwards just as they would on any regular Airbnb listing. This improves upon the current design in one important way: a user will no longer have to navigate between different tabs in order to look through listings. They can click on one, look through the information, and then click on another one. All of the exact same functionality is contained within this one page so users can focus on booking their Airbnb.


select experience screen


On This Page: 

Here we can see many of the same elements and design choices that were made on the previous screen, with one small modification. Airbnb has distinctly different image/listing dimensions for homes and experiences. Homes tend to be more on the square/rectangular side whereas experiences are portrait or vertical shapes. As such, a vertical scroll that worked for the homes would likely not work for experiences. As such, a carousel format is the most effective here, with the user being able to view two experiences at a time. Since there are far fewer experiences than homes, the carousel format works well because it puts two in the spotlight at a time, focusing a user's attention in.  


select package screen


On This Page:

Finally, a user can also opt to select a package outright rather than having to select a home and experience and create their own package. However, this presented an interesting design challenge because now there are three pieces of information that a user would want to see: the package, home, and experience information. As such, I've separated those three pieces of information into three tabs which are easily switched at the top of the information section. Furthermore, since homes and experiences each have their own distinct shape and dimensions, I've created a new dimension which is widescreen or landscape for packages, so that it can also be easily recognized. 


other screens

Form Design

Why use a form?

This design differs from the current Airbnb experience because rather than having distinct pages for all of these different parts, the mockup that I've created puts all of those actions and flows into one form.

There are a few benefits from a user experience perspective on why a form design would work the best for this use case. The main concern or limitation of a form is that it's difficult to convey a lot of information in a meaningful way. However, a form is very good for organizing information into discrete components, which is exactly what we want when a person is assembling a package, as it allows them to focus on one task at a time.

Furthermore, forms provide a very linear flow for the user to follow. This means that a user won't be distracted by all of the steps and they'll be guided from one step to the next. By keeping all of the components in this process linear, a user will have only two directions to go: forward and backward and will thus be able to easily complete each step and transition to the next one.

Finally, one of the limitations discussed above about forms is that it is easy to communicate and get basic info, but for something as complex as choosing a home or experience, why would it be the best option? The benefit here is that each section has all of the possible information provided on one screen. Currently, people have to open up different pages, save certain pages, and go back to others in order to effectively choose they home they want. By providing all of the information they need on one page, it makes for a much easier user experience as they focus on each discrete choice.

How can we make the form effective?

The choice of flows in the flow diagram at the beginning was intentional. The number of steps in a form contributes to a user's overall feeling of the process; a form with more steps will likely feel longer than a form with less steps regardless of overall length. As such, I've broken up the steps in the process down into a few simple steps: fill out basic info, choose a home, choose an experience, and confirm information. 

Additionally, there is consistency with Airbnb's overall design. The selection for homes and experiences is very similar to the current experience, just in a form design and the information provided is all the same and in the same layout. This is important because if a new selection format is being introduced, keeping as many elements and processes the same as before will make the new experience still feel similar and familiar to users.

Finally, interactions play an important role in this overall process. I'll go more in depth about specific interactions in the next section.


In-place information

One of the most important interactions on the page is how a user interacts with information that they request (click on). In the current Airbnb experience, if a user clicks on a listing or experience, a new page will open up, leading them out of the flow temporarily. In this design, the information opens up in the same page - on the right side of the screen. By maintaining consistency in where the information will appear (the right will always act as the hub for information when a user requests it), users will be able to understand the information dynamics quickly. It also keeps the user within the current flow instead of directing them outward.

Scroll components

Furthermore, all of the information and the listings themselves are scrollable. It's difficult to put all of the information on one page so it was a debate on whether users should page between different information or scroll. In the end, scrolling seemed to be a more familiar experience and less intrusive. The use of margins here is notable to indicate what's scrollable. Throughout the flow, the margins of scrollable components will be greatly reduced (oftentimes to no margin) with the elements that it's close to. For example, an image might be cut off, text might be very close to the bottom of the page, etc. This tends to be a good indicator of a scrollable component and allows all the information to live on one page.