4 Airbnb Design Principles that can be re-used infinitely

Airbnb operates on four simple design principles and I recently got a chance to revisit them and understand a bit more about what the principles are all about and what we can borrow from them.

Unified

Each piece is part of a greater whole and should contribute positively to the system at scale. There should be no isolated features or outliers.

Source: Airbnb

Airbnb largely has an invisible design. I wrote about it in detail the last time. But what Airbnb means here by unification is to design parts or components that are tied together to multiple parts of the product. That means that no component is designed as a one-off case for special scenarios. This principle is particularly interesting because as a systems designer I have seen new “special” components being added to the libraries way too often. These components don’t get used too often and usually are designed and used by a maximum of one or two squads. For unification as a theme to succeed in a large company like Airbnb, you can expect the design system managers to be quite strict about the process of adding new pieces to the puzzle and approving only the ones that have proper documentation highlighting the reusability of the component across different screen real-estate.

Universal

Airbnb is used around the world by a wide global community. Our products and visual language should be welcoming and accessible.

For companies like Airbnb, accessibility is not just important but necessary. Airbnb is used by people with or without accessibility needs. This means everything from their website to mobile apps needs to support people worldwide. Here are a few things that Airbnb does to cover achieve accessibility —

1. Usable focus states: Focus on the focus indicators around links, inputs, and buttons.
2. Instructions with input fields: Make sure it’s easy to understand what input fields are about once the label is gone
3. Color Contrast: Support people with low vision who have difficulty reading text against low-contrast backgrounds.
4. Aid in understanding critical information: Visual cues shouldn’t be limited to color when communicating critical information, showing actions, or prompting responses. Color blind or people with low visual acuity will find your content difficult to understand.
5. Alternative text <alt> for your images.
6. Navigate your web designs with the <Tab> key alone 👍.

🏠🏠🏠

If we go further from the design standard of accessibility, there are more things around accessibility that Airbnb supports when it comes to hosting or inviting guests —

1. Welcoming users from all backgrounds
2. Having an option to pre-book accommodations with instant confirmation. Some people go thru’ a lot of anxiety just to see their booking rejected by the hosts. Also allowing hosts to add self-check-in instructions.
3. Starting with a welcome message like “A new Airbnb for a new world of travel”.
4. Not making assumptions about a user’s gender or relationship status. Best to use gender- and orientation-neutral language.

Iconic

We’re focused when it comes to both design and functionality. Our work should speak boldly and clearly to this focus.

Large text, intuitive copywriting, and simple layouts are key elements that have helped Airbnb achieve its iconic design. The company’s latest Summer Release offering is nothing different. After careful inspection what stood out to me were the 55 categories of unique homes that Airbnb has added to its platform with each of them having its unique features. Here are some of the things that we can adopt from Airbnb to make our designs iconic:

1. Clear and simple typeface: Airbnb uses the font family — Circular. The product pages show off this typeface using big letters and allowing it to take the center stage.
2. Negative Space: Allow designs to breathe by providing ample negative spaces around the edges and in between.
3. People & Places: Airbnb celebrates people of all backgrounds and it boldly displays them alongside iconic home structures. People & home photography drive attention to Airbnb’s product and marketing collaterals and makes them stand out.
4. Legible iconography: A lot of Airbnb’s product offerings are supported by pleasant iconography of unique home categories. Since home categories make a big part of Airbnb’s driving force, the company invested a lot to make every detail visible even in small sizes. Additionally, the bezier curves, path joints, and outline thickness match the Circular font family to make the iconography seamlessly blend into the designs.

Conversational

Our use of motion breathes life into our products and allows us to communicate with users in easily understood ways.

Airbnb is the creator of an open-source animation tool named Lottie Files. I have seen countless examples of how Airbnb uses motion design to promote action and activity across its products. Here are a few ways Airbnb uses pleasant motion to breathe life into its designs —

1. Break down your designs into separate layers to add dimensions, weights, and personality. Start by creating separation between objects and then add different characteristics to each one of them.
2. Create the illusion of smooth motion: Airbnb uses morphing of objects to animate into one thing, and then animate again to its final state. The morphing of objects is great for creating illusions, but it is also great for the projection of character and personality built into a story arc. It is best to use this for motion design for icons or illustrations.
3. Create looped animations using parallax: Animate certain parts of your designs to go from nothing to something and then animate back into nothing. The art of looped animation is more than just matching the first frame with that of the last frame. It is about creating a seamless motion that goes from state A to B and from B to A without any visible breaks.