At last weeks class, I was able to talk a bit about some interesting aspects of Airbnb, but there’s a lot more that didn’t make the cut of the presentation. In particular, I want to do some more analysis on design choices that perhaps can go unnoticed but are very carefully done. I also want to compare this with other companies within the hotel and travel accommodations industry to see how Airbnb’s platform aesthetic and experience sets it apart from the competition. These are my own analyses and I only know some concepts of UX design. I am by no means a seasoned UX expert.
The searching process
Airbnb receives tens of millions, perhaps even a hundred million searches a day. This makes their search landing page the most visited one on their website. It is a huge priority and essential to have done correctly. Google developers say that currently 53% of users will abandon a website if it takes more than 3 seconds to load. This is an experience we can all empathize with: the pure frustration of a loading website or the animations of an app page refusing to refresh. Google’s studies indicate direct correlation between faster load times and revenue. Faster and seamless loading results in less people bouncing from the website/platform, thus causing more traffic. Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%. There’s even a Google calculator for how load speed can impact any company websites revenue. With this in mind, let’s take a deep dive into Airbnb’s current search engine process design.
Displaying the search bar
The first element of searching is displaying the search bar and having the user enter their search. Aesthetics aside, if we compare Airbnb’s search bar to those of others in the hotel and accommodations industry like Hotels.com, expedia.com, and Homeaway.com, we see how Airbnb has one text box rather than having several for arrival and departure, type of room, etc. (Note: Airbnb also has these kind of specific searches in a separate page, but generally not in the main page).
In my opinion, this choice would be because Airbnb wants to streamline the process. Their users want to find available properties in a given location, so this process just gets them to that destination without having to fumble through availability dates and other hassles. Essentially, they take you through a step by step process starting with location, before moving on to dates, and then room type rather than doing all these entries at once. From a user interaction perspective, this simplifies the process and gives the sense of guided progression toward a solution. It also opens up room for exploration in the process to view more listings. The process is designed to be centered around the listings. First, find the listing you like, then figure out the scheduling logistics. This kind of strategy works for Airbnb, but for hotel industry companies this might not be as effective because scheduling is perhaps the most important part of their search process. Hotels don’t have the same uniqueness factor that Airbnb listings do so there isn’t the same sort of window shopping going on.
The luxury of just having one text box at the top not only simplifies the searching process, but also allows the header of the main page to float as the user scrolls down. This means that regardless of where the user is on the main page, they will always be able to search. In other many other hotel booking sites, this is not often done. Airbnb enables users to continuously scroll downward to view listings, all while affording users the luxury of not having to scroll back up to begin a new search due to the floating header. Other websites that don’t use a floating header may be limited in how big the page can be. By this, I mean a user will not want to scroll far down if they will inevitably need to scroll back up to search. The use of floating components in websites and apps is very common and gives the user freedom to traverse all parts of the website without losing direct access to core functions. As a result, components can be less cluttered and better organized with more free space.
Processing the search request
Color scheme and White Space
This isn’t the most subtle example, as we all recognize the clean white aesthetic of the Airbnb website. However, I again don’t want to look at it from a purely aesthetic viewpoint. One thing in particular that I like about Airbnb’s design is how they are very particular with what they want to emphasize and thus don’t overdo things. If we look at Hotels.com’s results page, it seems like they are emphasizing everything, and as a result things look cluttered without a hierarchy of emphasis. The many colors, borders, and boxes become a bit much. With Airbnb, their text is limited to essentially 2 colors with the same white background. So how do they emphasize things? The first thing Airbnb does is use font-weight. Essentially they use a thicker font-weight for just the title of the property. They then keep it compact and only list the price, rating, and perhaps one key piece information (like superhost). They resist feeling the need to use up all the white space to talk about the property and instead rely on the photography to create a first impression to entice a user to click to read more. Rather than overusing borders to create distinction, Airbnb simply just adds extra space to delineate sections. They also resist making their buttons have background colors, as most of the time the buttons don’t warrant it. Only buttons like “Request to Book” require a background to make it stand out as they have very a particular importance and emphasis.
Designing For Urgency
The final thing I want to quickly mention is how Airbnb designs use urgency to nudge users along. Airbnb will subtly mention things like “This is a rare find” or something like “Only x% of homes are left for these dates.” The goal here is to get the user over that last hurdle in the purchase decision making while at the same time not overdoing it to the point that it just gets ignored. For this, phrasing is the most crucial part of this design. Airbnb’s phrasing is done to be informative and to not reflect any sense of desperation. On top of this, reflecting the high demand through urgency will also hopefully boost trust.
We all know of how Airbnb has “designed for trust,” but no one will use the website if it’s an awful experience. I read somewhere that a great user experience is like a great joke in that if it’s great, it shouldn’t have to be explained. Like many newer platform based companies, Airbnb utilizes engineering to help bring their design goals to fruition in order to enhance user experience. It really has opened my eyes to a new perspective of business and product development, and makes me want to explore how other companies handle UX as well.