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