MEMORANDUM

TO: Dr. Baotong Gu and ENGL 8123 Classmates

FROM: Shannan Harrington

DATE: September 17, 2024

SUBJECT: Good Design Justification for Airbnb https://www.airbnb.com/

Introduction

The Good Design Justification Project presented a unique challenge because while I spend most of my days engaging with websites ranging from graphic design platforms to schedule managers and search engines, I couldn’t think of a single one that I felt was “excellent” for users. However, in the readings for this course, two mentioned Airbnb by name, which made me reflect on the times I’ve used the website. Recently, I used it to search for a place to stay in Charleston, SC. While I didn’t have any issues with the platform, it also didn’t stand out in my mind as “excellent.” Now though, with a greater understanding of web design principles, I can confidently claim that Airbnb excels above other websites in its design consistency and IA, UI and UX considerations, making it easy to navigate and engage with for users.

Company Information

Airbnb is a company that connects people looking for comfortable, short-term accommodations with property owners who wish to temporarily rent their spaces. They make a profit by charging service fees to both guest and hosts using their platform as well as by providing other services like insurance and protection plans.

According to Airbnb’s “About Us” page, they have been operational since 2008 and currently have over 8M active listings in over 100K cities and towns across 220 countries and regions. Both the amount of time they’ve been in operation and the number of people they serve are a tribute to their credibility, but so is their website design. To successfully serve such an expansive audience, their webpage needs to be cohesive, attractive, simple, and intuitive, which it is.

Web Design Consistency

According to our reading “Website Design Consistency: How To Create a Cohesive Look” a website is cohesive if it is consistent in color schemes, typography, layout, navigation, and interactive features, and it can be argued through analysis that Airbnb has put a significant amount of time and consideration into each of these elements.

Color Scheme and Graphics

When users land on Airbnb’s website, they are greeted by a simple light grey, white, and coral color scheme. At first glance, I thought the colors were cute, but they didn’t seem that impactful. However, after looking into color theory, the choices made sense.

Coral is a warm color that combines red, orange, yellow, and white. Red evokes a feeling of excitement while orange is friendly, and yellow is optimistic (Interactive Design Foundation), so ideally the color coral would evoke a combination of these feelings while users are searching the website. As a user, I did find the coral color to be fun and easy to recognize in the thumbnail among my endless string of open tabs, but I also noticed that the use of coral is minimal, only seen in the logo, name, and search graphic.

White and light grey are the primary colors in Airbnb’s web design, but these are ideal because they allow the vibrant color pallets of the photographs accompanying available properties on the homepage to draw a user’s focus and spark their curiosity. These images seem to be professionally staged and edited, creating the promise of scenic views and aesthetic homes which can encourage the user to envision what their own stay in that location could be like.

 Typography

Airbnb uses a sans serif font created by their design team called Cereal that I thought looked pretty similar to Montserrat, which is a font that is part of the brand guide for KSU that I use often in my work. After some research, I discovered that the design of Cereal was the result of Airbnb striving for accessibility. When they couldn’t find a font that suited all their needs, they had one made, and it is praised for its open apertures, taller x-heights, and exceptional legibility across platforms. Two of the weights, The Book and Bold, were designed with UI and screens in mind while the heavier weights work well for print and environmental uses (Riechers). This decision on Airbnb’s part to ensure that their font is legible no matter where it is encountered reinforces the idea that Airbnb, in turn, is also accessible and user-friendly, instilling trust and confidence in the company.

Also, generally speaking, Sans-serif fonts are commonly seen in commerce and on websites because they are considered to be modern and stylish in addition to readable, even when the print is small (“The Choice between Serif or Sans Serif Fonts”). So, in choosing a sans serif font, Airbnb picked a style that creates a modern, friendly feeling, which fosters a positive experience for users (“Serif and Sans-Serif Fonts – What’s the Difference?”).

Information Architecture

The IA of Airbnb’s website is the aspect of the design that shines above other websites with similar goals and even above the other features I’ve discussed so far. It’s clear from navigating Airbnb’s website that they have considered the IA principles in every aspect of their design.

Layout and Navigation

Airbnb’s website layout utilizes a grid of cards, which has clickable containers of information and is ideal for content-heavy pages that feature items of equal hierarchy (Babich). Considering that Airbnb is offering different rental options that all have an equal chance of being selected by the user, this layout makes the most sense for presenting the information in a logical and organized way.

To address the Choice Principle, Airbnb’s homepage prominently features a search bar, asking users basic questions about their travel plans in order to narrow down the options presented. Then, once the information is provided, it gives users a list of options. On the web browser, those options are presented in rows of three. On the mobile app, users scroll through one option at a time. This design is successful because even if there are over a thousand options to sort through, the user only has to focus on a few at a time, so they’re not fatigued by the amount of choices.

The Exemplar and Disclosure Principles are also utilized in these search results because the user is presented with a picture, name, rating, and price in one card. The picture serves as an example of the available location, and the other information helps the user make a choice without having to navigate to a new page unless they want to.

VRBO, another platform for booking a vacation rental, is set up similarly to Airbnb, but one major difference in their design is the presentation of the search results. While Airbnb presents a grid of cards, VRBO presents an “F” shape layout that encourages users to scan the results one-by-one.

The “F” shape layout isn’t a poor choice, but, as a user, I do feel like I’m doing more work when I search through VRBO’s search results than I do looking through Airbnb’s offerings because the grid gives the illusion of less space to cover, and the visual hierarchy of the information below the image creates a “z” pattern so users can quickly scan the material that is going to have the greatest impact on their decision making.  Also, on Airbnb’s website, users can scan three search results in the same space of one result on VRBO. Perhaps it’s just an illusion, but as a user I feel like I’m being more productive on Airbnb’s website because of this three to one scale.

On both VRBO and Airbnb, there is an interactive map taking up roughly a third of the screen on a desktop. When searching for a rental, the interactive map shows the location of each of unit in relation to other units and locations in the town the user is planning to visit. The user can choose to search for units using the grid or by clicking on the locations on the map.

Airbnb’s map functions easier and is more informative than VRBO’s. On Airbnb, users can zoom in an out by scrolling on their mousepad, but VRBO’s map requires more effort to zoom. Also, Airbnb’s map has the price per night listed in the location marker on the map, but VRBO’s doesn’t. This might seem like a trivial complaint, but not showing the price to users on the map could potentially frustrate them when they think they’ve found a rental in the perfect location only to discover it exceeds their budget. They might feel as if they’ve waisted time and wish they had the price information up front. By including the price on the location markers, Airbnb users are able to decide if further investigating a specific location marker is worthwhile for them.

Outside of a targeted search, Airbnb’s webpage offers easy navigation tools for users who don’t have a date or location in mind. On both the app and the web browser, the top navigation bar offers possible vacation destinations like beachfront, countryside, and cabin along with wish list items like amazing pools and chefs’ kitchens. This navigation bar is available at the top of every page on Airbnb’s site so that users can modify their search on a whim. VRBO does have navigation options like these to search through, but they are only located on the home page, so once a user is in a search, they would have to back out of it to look specifically for cabins or beachfront properties, which could be frustrating for users.

Also, like the social media platform Pinterest, Airbnb allows users to create their own lists, save searches, and “like” available locations so that they can keep track of the rentals they’re considering. Additionally, if a user is traveling with a friend, they can share their lists through eight different avenues, where VRBO only offers six sharing options.

Users can also message hosts, review accommodations, and find local restaurants and experiences all through the webpage. Ratings like “Guest Favorite” and “Super Host” are awarded to rentals with high star-ratings and positive guest reviews. Also, hosts can review guests. These options establish credibility for guests and hosts, encourage open communication, and allow for users to do their research when exploring rental properties.

My One Complaint

While the website is obviously very mindful of AI, UI, and UX, there is one aspect of the filtered search that could be stronger. The filters allow users to narrow their search a great deal, but it doesn’t have the option to filter by total estimated price, instead of just price per night. With some of the cleaning fees, service fees, and other hidden costs, not being able to search by total price, can lead to some being surprised at the final price tag and could diminish some of the credibility gained through all their efforts in crafting an excellent web design. The total price is available for most if not all of the listings, so, as a user, I want to be able to put a maximum limit not on the price per night, but on the total cost of the trip.

Conclusion

Aside from my one criticism, It is my belief that the cohesive design along with the thoughtful and intuitive IA and navigation that implements many UI and UX design principles make the eight million listings on Airbnb easy to sort through so users can find the exact type of travel experience they want without frustration or a lot of page jumping, creating a positive experience for users and building trust in Airbnb’s services and company.

Work Cited

Babich, Nick. “Top Website Layouts That Never Grow Old: Adobe XD Ideas.” XD Ideas, Adobe, 8 Nov. 2019, xd.adobe.com/ideas/principles/web-design/11-website-layouts-that-made-content-shine-in-2019/.

Riechers, Angela. “Airbnb’s New Typeface Is a Case Study in Unified, Accessible Design.” Eye on Design, AGA Eye on Design, 23 May 2018, eyeondesign.aiga.org/airbnbs-new-typeface-is-a-case-study-in-unified-accessible-design/.

Soegaard, Mads. “Dressing Up Your UI with Colors That Fit.” The Interaction Design Foundation, Interaction Design Foundation, 2021, www.interaction-design.org/literature/article/dressing-up-your-ui-with-colors-that-fit.

Todd, Dylan, and Madeline DeCotes. “Serif vs. Sans Serif Fonts & When to Use Which.” Serif Vs Sans Serif, Adobe, 2024, www.adobe.com/creativecloud/design/discover/serif-vs-sans-serif.html.

“Website Design Consistency: How to Create a Cohesive Look.” Emulent, Emulent, LLC., 18 Mar. 2024, emulent.com/blog/website-design-consistency/.