Airbnb app: Wireframing
Next challenge: Wireframing
Today, we are so familiar with this game-changer way of booking your stay, Airbnb. This vacation rental online marketplace company based in San Francisco has a great design that means communicating effectively with a global user base, and building a design language that can scale with the company as it continues on its road to success. Airbnb also offers arrangements for lodging, primarily homestays, or tourism experiences.
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
- 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.
- Explore: Users have the city selections and also a form (input/text/filled) to fill a place name and date.
- City Selection: When users choose one city, they will have a city map and accommodation selections with carousel images.
- 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.
- Profile: Back to homepage, users also have the profile option with all the details.
- Notification: Users can personalize their notification options by clicking the toggles.
Why I choose to work with Airbnb?
Despite their potential to succeed in today’s world, I found that Airbnb is focusing on their user experience. It’s user friendly. They wanted their users to not wasting their time to booked their stays.
Wireframing
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.
📝 Learning testimonial 🤓
Observing and creating the wireframe version was interesting, this allows us to develop the user experience, put myself in their shoes and transform to design thinking as UX/UI designer. I put in my mind that wireframing is mandatory when we creating a product, that is one of the protocol to record the idea to a visual. It’s a kind of sketch to UX/UI designer.
