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.
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.
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.
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.
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.
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.
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.
One smaller detail in this design is the creation of "package" cards when you can select a package. Currently, home listings are more of a square design and experiences are a tall vertical design. This makes each one of these recognizable respectively. However, packages doesn't yet have a distinct card design. As such, I decided to create it as a wide, panoramic card because it encompasses homes and experiences so it should be larger, and it's a design that is distinct and recognizable if it were on the homepage by itself for example.
landing page design