Case study: Wireframing Airbnb🏠

Why Wireframing?

Wireframing is a simple way to communicate ideas about the flow of the application. The goal is to focus on functionality, behavior, how to display certain information, and prioritize content. Therefore, it should be done in black and white.

Case Study Airbnb

Untill We All Belong

Airbnb’s mission is “to create a world where anyone can belong anywhere”.
There are various backgrounds such as gender identity, gender expression, sexual orientation, religion, belief, disability, ethnicity, nationality, race, and age. I chose Airbnb as a subject to learn how to design in a way that each person does not feel alienated.

#Airbnbwhileblack

According to the research about Airbnb, it was found that when the guest user has a name that is considered to be ‘predominantly black’, the host user is less likely to approve the booking. Airbnb has explicitly opposed the discrimination that has occurred on its platform and has changed product design.

Discrimination doesn't belong on Airbnb

Diversity at Airbnb

Search Method “ I’m flexible”

Though I would like to research about how airbnb designs for inclusion such as communication between hosts and guests, this time I selected the search method. This is because I am quite interested in Flexible Destination Feature.

I love travelling✈️, and I prefer staying at a unique place rather than going to a tourist’s spot. For example, I like staying at a place near to the ocean and see stars at night.🌟 But the problem is that almost all the searching feature is made based on location and price. Airbnb are here to help.

Clicking on ‘I’m Flexible’ will reveal unique listing categories — from boats to tiny homes to domes to A-frames and even private islands — with the nearest to the guest’s location at the top of the list.

Airbnb User Types

User Flow

There are possible two types of user;

1. I want to try something new, anywhere.
2. I want to find a place for a fixed location and dates.

Airbnb designs different UX for each type. For the first, users can see the place options initially, then they can change dates and party size. This allows users to explore possibilities without constraints. For the second, users first need to input basic info such as location, dates, and party size. Then, they can see the places meets the requirements. This is quick and efficient. In this way, airbnb provides info at a different time.

Search User Interfaces

Now I am curious about why airbnb chose guided selections. “Their search is actually a series of guided selections the user has to make before they get targeted results.”(reference) So I looked into a model of the information retrieval process. D. Norman divides human actions into “execution” to achieve the goal to be carried out and “evaluation” to see if it has been achieved. Seach User Interfaces introduces a standard model of information seeking as a cycle of the following four actions;

1. Identification of information requirements
2. Clarification of information requirements
3. Query creation
4. Evaluation of search results

With Noman’s model as cognitive support, information seeking is a process that repeats this cycle over and over again.

Design Language System(DLS)

Then, I explored UI elements of Airbnb. According to Airbnb design, A visual language is no different from any other language. If the language is not communicated well, confusion will result. In order to communicate ideas effectively, Airbnb has built a design language system.

DLS was to create a more beautiful and accessible design language. Our designs should be unified platforms that drive greater efficiency through well-defined and reusable components.

The followings are design principles;

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.

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

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

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

Lo-fi Wireframes

To give a simple visual representation of how the flow of airbnb, I created wireframes with paper and pencils. This take less time to make, and are easier to change. Therefore, it allows us to get and apply feedback from stakeholders in a quick and effective way.

☕️ Reflection ☕️
It was really fun to writing on paper. 📝 But at the same time, I mostly imitated the app screen, not deeply thinking about the structure itself. 😭Therefore, next time I would like to think about how they make users call to action. I will deepen my knowledge about behavioral change by reading this book. Also, it was interesting to think about when to provide information at a right time.

👆See above; airbnb provides info at a different time for different types of user

Mid-fi Prototype

Now, let’s go digital. 😏 With Figma and Ironhack Wireframing kit, it was really easy to make my lo-fi into mid-fi, it took me about 3 hours to make. The following are ironhack tips and my reflection☕️;

creating wireframes quickly;

knowing how much information/detail to include in order to communicate ideas successfully;

knowing where to hold back on details in order to avoid distractions:

I don’t think I focused on important information and structure. Rather, it took long time to choose icons and change color to make it nice. I know it is useless, but too temptative 😂 Next time I will make my best only use black and white, and keep it within 2 hours. Also, I need to think which information matters on each screen. This is significant not only for me, but for stakeholders to communicate ideas.🎤

Interactive Prototype

Click here to see the interactive prototype🌟😊

Summary🥑

• Wireframing’s goal is focus on functionality, behavior, how to display certain information, and prioritize content.
• Inclusive Design can change discriminatory behaviors to achive mission “create a world where anyone can belong anywhere”.
• Searching Feature is related to information retrieval process.
• Airbnb designs different UX for each type of users. (“I’m flexible”)
• A visual language is no different from any other language.

Next Steps✈️

I want to research designs that focus on trust between host and guest such as encouraging disclosure of information and rating functions. By designing trust, Airbnb has overcome the bias that “strangers = dangers”. I would like to explore the possibility of changing the way people think through design.