Airbnb UI case study

Airbnb is a platform that enables users to search for short- or long-term homestays and experiences worldwide.

During my 8-week bootcamp with Memorisely, I learned about UI design and Figma's features by redesigning Airbnb's UI.

The goal of this case study was to follow best practices for creating styles, components, patterns, and a prototype that could be handed over to engineers.

For this case study, we were tasked with taking six screens from Airbnb and creating wireframes for each screen using the concept of auto-layout.

My first two attempts were challenging since it was my first time working with auto-layout. However, with practice, I became more confident, and my final wireframes were fully responsive

After working with auto-layout, we moved on to our high-fidelity designs, where we added color to our wireframes. At this stage, we also began creating components—elements that would be used repeatedly throughout the app.

For the components, my approach was to divide each piece into different sections, such as buttons, icons, cards, tabs, footers, and headers.

This practice made it easier for me to locate and use the components later in the high-fidelity design.

Based on Airbnb's original designs, I began by searching for icons used in the app and creating various components commonly found throughout, such as a pay button and a search bar.

While working on components, we incorporated interactions like toggles, hover effects, and clickable icons to enhance usability and functionality.

To create a color palette, I abstracted the colors from the original design.

First, I created the grayscale variables, which were used for the background, text, icons, and strokes throughout the app.

Next, I worked on the primary, accent, and error colors. These were designated for buttons, specific icons, flash messages, error messages, and links.

Once the color variables were established, they could be applied across the design. If a color needed to be updated, the change would automatically apply to all elements using the same variable, making the process more efficient.

Text variables serve the same purpose as color variables, but they apply to the text used in the app. For example, if we wanted to change the paragraph text size from 12px to 13px, the change would apply to all text that uses the specified variable.

Our dimensions are invaluable for maintaining consistency in our design. These variables can be applied to padding, margins, width, and overall sizing. Similar to our color and text variables, any change to a dimension variable will automatically apply to all design elements that use the same variable.

Last but not least, we have our breakpoints. These help us define and differentiate the design for mobile, tablet, and web platforms.

When creating responsive designs, breakpoints allow us to know exactly when and how the design should adapt to different screen sizes, ensuring a seamless user experience across all devices.

When discussing components, we must also talk about component states. If components are crucial, component states are equally important.

As the name suggests, component states allow us to transition between different appearances or functionalities of a component. For example, consider a toggle button: its two states could be on and off. In a moment, we'll delve into component interactions, which will make this concept even clearer. By incorporating states and interactions, we can create prototypes that provide a realistic sense of how the app will function.

Can we have more than two states? Absolutely! You can create as many states as needed. I'll share some examples below.

As mentioned earlier, component interactions are a key part of our design process. They help us visualize how the app will function, making it easier to run usability tests. By testing the design with users, we can observe how they interact with it, gather valuable data, and identify areas for improvement based on their feedback.

With component interactions, we can explore scenarios such as what happens when a user clicks the heart button, scrolls through an image carousel, or navigates from the explore page to the wishlist page.

By creating these interactions, we bring our designs to life and gain a deeper understanding of how everything works together.

Now that we have all our components, interactions, variables, icons, fonts, and colors in place, it's time to bring everything together to create our high-fidelity design and begin prototyping.

Think of high-fidelity design as assembling the pieces of a puzzle to reveal the big picture. In this case, the goal is to see exactly how the entire app will look and feel in its final form.

Using our wireframes as a guide, we’ll start combining the elements we’ve created to build a cohesive and polished design that truly represents the finished product.

After completing all six screens, it's time to start prototyping. Prototyping allows us to define what happens when users interact with elements like the Where to?search bar. The goal is to ensure that interactions—whether clicking, tapping, or scrolling—are smooth and visually appealing, enhancing the user experience.

For example, when a user clicks the Where to? search bar, they might be directed to a screen with three fields: destination, date, and number of guests. After filling in these fields and clicking Search, the next step is the loading process. Since internet speeds can vary, we can incorporate a skeleton loader to indicate that the page is loading. This loader provides a visual hint of where elements on the next page will appear, ensuring the user knows the app is working. Once loading is complete, the user arrives at the properties page, where they can scroll vertically to view available properties or horizontally to browse property photos.

The prototype should visually map out the flow, with arrows connecting each step to show the progression from one screen to the next.

When the prototype is complete, we can preview the user flow, enabling us to click through and interact with the app as though it were live on a phone. This gives a clear sense of how the app will function in real-world use.

To prepare this document for developers and signal that it’s ready to be brought to life, we need to ensure everything is clear and organized for seamless handoff.

Most design tools include a feature at the top of the screen, allowing us to mark designs as Ready for Dev. By clicking this button, we can flag specific screens so developers know which ones are finalized and ready for implementation.

Additionally, it's important to provide detailed annotations, style guides, and specifications for each element—such as dimensions, padding, fonts, and colors—ensuring developers have all the information they need. By marking screens as Ready for Dev and sharing these details, we create a smooth transition from design to development.

I learned so much during the 8-weeks of my case study, I have played with Figma in the past but taking this bootcamp helped me solidify and expand my knowledge using the tool and also helped me a lot with my design process, really having done all the steps and stages from wireframing to prototype was very useful and I have been applying all the concepts I learned into my own designs.