Ironhack Prework-Challenge #2 Wireframing and “reverse engineering”
Wireframing Badi app
As part of my second Challenge at Ironhack, I have done a Wireframing exercise. The exercise consisted of drawing in “Backwards engineering” with the user interface to better understand its Interaction Design and User Flow. To do this, I have chosen a finished product and simplified it to what it looked like in an earlier prototyping step.
Why wireframing?
Wireframing is the structural representation of an application or a web page. It is halfway between a hand sketch and a final design. Low- and Mid-fidelity are developed in the Prototype step, once we have studied what user problems we want to solve.
You can check Design Thinking documentation in the related articles section.
The Mid-fidelity wireframe contains all the elements with which the user interacts, as well as information about the type of content it will contain. In this way, we can better understand if the hierarchy of the information we are building is adequate and easy to understand, as well as check if the User Flow is appropriate or if there are steps to be optimised.
Wireframing in the design process
This tool is a key part of the design process. It allows the designer to create proposals in an agile and simple way, always focusing on working on structure and usability, and thus not losing focus. In this phase, the main pages and navigation are closed.
Regarding the evaluation of the proposal, wireframing allows the team not to be distracted by complementary elements at this step (such as colour, images or the choice of typeface) and focus only on the elements and their distribution: with fewer elements, we get a lower cognitive load. And, at the same time, it is clear enough for anyone to understand the functionality of each element and page.
In this way, it saves time in the process, as it allows changes to be made considerably more easily, since elements from other phases have not yet been advanced, such as the visual layer or the contents.
The chosen product
When developing the wireframe analysis, I have chosen the Badi app because it has been very active in recent years and has a very specific focus on renting and sharing flats.
To evaluate the Workflow, I have chosen the process of contacting a user who offers a room I could be interested in. This allowed me to evaluate the number of navigation steps and whether the information I give and receive is enough for their purpose.
Methodology
To start the Wireframe process in a “reverse engineering” way, I took screenshots with the phone and imported them into Figma. This allowed me to start detecting patterns of dimensions and spacing between the different elements, such as the use of constant margins or the distance between vertical elements. All this, distributed downwards in a single column.
Other features I have detected are the use of sans serif fonts throughout the application or the use of neutral colours, only highlighting the secondary colour for the most important interactions.
To perform this task, I downloaded the Ironhack Resource Kit with icons and interactive elements frequently used in the user interface (UI). After a few adaptations in terms of responsive editing settings and text size, I started to place those elements and measure the distance between them.
The User Flow
You can test the prototype in Wireframe here.
To see the series of steps that must be followed to perform a given action as an end-user, from start to finish, I have represented in Wireframe all the screens of the process and marked the interaction points.
Homepage: essential functions of the application (search bar and parameters, featured cities, access for landlords and navbar for customers).
Search and results: search results according to our set parameters. We can scroll to see the different offers, as well as view in map mode.
Flat profile: room information, access to the landlord profile, contact and book.
Customer information: information about the dynamics between applicant and landlord. This page could be omitted after having accepted the rules of the platform.
Contact: Text field to introduce yourself and request information about the room.
Confirmation: confirmation page to show that the action has been concluded. This page could be replaced by a dialogue window.
The take away
The Wireframing development step must have an important role in the whole design process since it is the basis of all the functionalities and services of our product on each of the screens. It is the working tool that will be used in the Test step, and it will provide us with very valuable information and will confirm whether the product we are designing works correctly.
This activity has helped me to confirm that the wireframe is a necessary tool and provides essential information focused on usability and user navigation and legibility.
