Wireframe— Booking.com

Challenge 2 of prework as a UX / UI student at Ironhack Berlin

What is Wireframe?

The wireframe is a skeleton or a very primitive version of what a project will look like. The interface divisions are designed in sections and presented using geometric shapes and lines. Wireframes provide a simple visual representation of what the flow of the application or website you are creating will look like. The keyword here is simple; that is why wireframes must be done in black and white and in sufficient detail to be understood by another person, without diverting attention from the objective.

The challenge this time was to use reverse engineering to extract the wireframe from an app, I used the Booking.com app. The choice of this application is because it is easy and quick to access when choosing hotels and accommodations. I chose a path in which the user can choose his hotel and his room through this app.

When I reproduced the App Wireframe, I tried to pay attention to the main elements and where they were located so that I could represent in a simple way how the service/product should flow. Then I used the wireframe to prototype.

Screenshots

Wireframe in Figma

Prototype with Figma

Conclusion

It was a very interesting experience to create the Wireframes of an application that I use when I’m traveling and to analyze what could be improved on it and the points that are already positive.

As it was the first time that I prototyped at Figma, I had some difficulties, but Figma himself helped me to clarify some doubts.

I found the exercise challenging, because it is very important and at the same time difficult to create something simple and that everyone understands and is able to accomplish the tasks.