A short wireframing analysis of Airbnb app
This article is an analysis of the wireframing of 6 screens of the Airbnb mobile app and its flow between them.
Also we analyze how the layout and information are organized and how this also affects the user experience.
To learn more about the design of these 6 screens we have made sketches of the wireframing in low and medium quality that we show below.
Choosing Airbnb
We have selected the Airbnb app because we think it is an excellent example of UI and UX. And proof of this is that it is a globally successful business and without a doubt this success is largely supported by the operation of its mobile application -it is very difficult for a business to prosper with an app that offers a negative user experience-.
We also observe that the app has its own personality, a genuine look & feel -a different interface is easily identifiable- thanks to its colors, its own typography, a popular logo, very well selected and high-quality images, and the arrangement of the elements creating a balanced space that breathes very well.
We think that it fulfills the ideal mission of an app: it offers an excellent user experience and at the same time is subtly oriented to the interests of the business. The result is that one wants to enter the app to snoop on some cool accommodation somewhere or vice versa. Everything is contingent on making the experience easy, fast and pleasant.
For all this, we are sure that you anybody can learn useful things in your analysis.
The power of the shortcut bar
In a first approach to the wireframing of this application we noticed the presence of a shortcut bar at the bottom of the screen. In fact, it is permanently fixed in this position on the screen despite the screen change.
It is worth analyzing this bar more precisely because, as we will see, it greatly facilitates the flow and therefore the user experience.
First there are 5 shortcuts via icons to the most important sections. We have seen that the criteria for defining and including these 5 sections coincide with the interest of the user and the interests of the Airbnb business.
In other words, it is focused on quickly accessing the most interesting information for the user but also for the purchase. For example, one access is the Accommodation search, this is the first option and also in this section there is a very wide range of options and suggestions to make that search and therefore the purchase as easy as possible. In addition, we also see that the option to be a host stands out — one of the fundamentals of the Airbnb business.
This type of fixed shortcut bar is common to the most popular apps (Ex: Instagram, Facebook, Linkedin, Amazon, etc).
In the case of Airbnb it has direct access to the following sections:
1. Search (suggestions)
2. Bookmarks (Wishlist)
3. Trips (next / past)
4. Messages
5. Profile & Settings
Another of the main advantages of this permanent shortcut bar, is that we delete all the way back to return to the home screen of each section. For example, if we are reading a message and we want to go to the settings just by pressing the corresponding button on the bar, we will exit the message and go directly to the settings, saving ourselves from pressing the “<” button several times.
Creating a lo-fi wireframe
After a first analysis, we made a lo-fi sketch of the wireframe of these 6 screens as a practice to know the design process from scratch but this time from the screens already designed (screenshots).
Next step in wireframing
The next step was to use Figma to build a sketch in Mid-fi using a wireframing kit and other libraries getting elements such as: image circles and squares, lines as text, search bars, buttons, title boxes of different body, icons, etc.
Prototype
Finally, with the wireframe created from the 6 screens, we made the prototype also with Figma defining the navigation flow between the screens.
