Designing for much more than Trust

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

hotelsmain

Hotels.com main page

airbnb.png

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

hotelsmainext

Where’s the search bar?

 

airbnbsc

Floating search bar

Processing the search request

Without going into extreme detail about the actual software revamps and the architecture reconfigurations, I’ll quickly gloss over how Airbnb adjusted their software to improve the search request. Airbnb had to overhaul some very old code, adjust their API’s, and rework their front end code. Airbnb renders the page server side and delivers just the minimum amount of javascript required to make it interactive in the browser before then loading the rest of the site when it is idle. This process helps make it appear more seamless by removing the gap between nothing happening and the new page showing up. This of course, is on top of the faster load time. The search bar is a great example to illustrate how design and engineering coincide to improve user experience.

airbnbblog1

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.

hotelsearch

Lots of colors, borders, buttons, and chaos

airbnbsearch

1 main color, minimal text, save space

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.

This slideshow requires JavaScript.

View story at Medium.com

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.

6 thoughts on “Designing for much more than Trust

  1. Hey Ricky neat post! Whenever I use Airbnb, I love the look of how simple, elegant, and aesthetically pleasing the platform is. It’s so fast and easy to find and reserve places to stay. In addition, I also noticed that Airbnb doesn’t have any ads on its site whereas other hotel booking sites do. The advertisements make the other sites look less enticing and less attractive than Airbnb.

    Like

  2. Ricky, I think that this post is great because it is stuff like this that companies spend so much time on despite users not knowing how much goes into it. But, I think that companies like Airbnb put so much effort into stuff like color schemes, search bars, etc. because they don’t necessarily want their users to notice all that goes into it. They want the whole user experience to be so smooth and effortless that the users don’t even think about how much better a service could be. Because once they do think about it, it is usually because they are not happy with the service.

    Like

  3. Great post Ricky! When I look at Airbnb’s website, I often just think it is for aesthetics, but clearly that is not the case. I guess I always just assumed that they could draw more users and younger crowds by having a more aesthetically pleasing website, but it is fascinating to hear how each technique and design is much more than that. A good point is that when they design for urgency, it doesn’t appear to be obnoxious, but enticing! I haven’t yet personally used Airbnb but I’m sure I will in the near future, and it almost looks fun to book one.

    Like

  4. Great post! Airbnb’s design is very interesting to talk about because it has many unique design aspects that consumers don’t necessarily observe, but are registering with their subconscious. One thing that I noticed when I was booking Airbnbs abroad was that when you initially type in your housing preference, the site doesn’t direct you to solely housing. The results page features about 8 housing options and then 8 experience options. This is a smart strategy to get consumers to evaluate Airbnb’s experience opportunities even though this was not their initial intention. Sometimes I found this aspect to be annoying though because I wanted to see only housing options and then activities were jumbled in.

    Like

  5. Solid post Ricky. Great eye for the nuances of engineering and visual appeal of Airbnb’s website. Interesting to see the uniqueness given that one of their founders specialized in designing. I definitely think these little designs, features, and faster load times allows Airbnb to differentiate itself from the hotel industry and capture additional market share of the hospitality industry. Insightful post! See you soon.

    Like

  6. Ricky, really great follow up to your presentation. I can attest to the appeal of AirBNB’s website versus that of Hotels.com as I spent a ton of time this summer on both while studying abroad. You are spot on with your analysis and many of the things that you pointed out I had never even noticed!

    Like

Leave a Reply to ewaldjane Cancel reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s