Airbnb app: Wireframing

Next challenge: Wireframing

Their mission is all about making people feel at home.

And my mission is to observe and create their wireframe version. ⬇️

About the Airbnb’s user flow

Some of Airbnb’s feature options on their application.
  1. Homepage: Users will be directed to a form (input/search) prompting them to fill in the most general criteria of their destination. These options are pretty straightforward, and I choose the option: Explore nearby.
  2. Explore: Users have the city selections and also a form (input/text/filled) to fill a place name and date.
  3. City Selection: When users choose one city, they will have a city map and accommodation selections with carousel images.
  4. Accommodation: Users will have all the accommodation details, photos, ratings, etc. For reservation, users can click on the down right side and see the availability.
  5. Profile: Back to homepage, users also have the profile option with all the details.
  6. Notification: Users can personalize their notification options by clicking the toggles.

Why I choose to work with Airbnb?


Wireframes give a simple visual representation of how the flow of the app or website you are creating will be. The key word here is simple; which is why wireframes should be done in black and white and with just enough detail for them to be understood by someone else, without distracting from the goal (creating the skeleton of your interface).

I used Figma to create a wireframe. This tool is perfect because you can also create an interactive prototype.

Airbnb Wireframe Lo-Fi version
Airbnb application wireframe
Click to access the interactive prototype (full screen is better) ⬆️

📝 Learning testimonial 🤓



Product (UX/UI) & Visual Designer ◦

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store