Prototyping the Hopper’s user flow for flight search
Ironhack Bootcamp Prework — Challenge 2: Wireframing
The main goal of this UI Design challenge is to do “reverse engineer” of a mobile app interaction design and its user flow. As final result is expected a simple 5 screens’ interactive prototype.
In order to accomplish the intended result I chose to recreate Hopper’s user flow for flight search. This mobile app is mainly known for its book flights feature and respective price comparison tool. That is why I decided to focus on a user flow of this particular feature.
These five screenshots are the first steps of booking a flight and correspond to the set of actions needed to search for a flight:
Task Analysis
By applying the hierarchical task analysis approach, which decomposes a high-level task into several subtasks, I identified the subtasks associated to the transition between each one of the above screenshots. Considering finding flight options as the the high-level task, its subtasks are in the following order:
1. Selecting the search for flights option;
2. Fulfill the data required for flight search (as the number of travelers and the origin and destination cities);
3. Choosing the travel date(s);
4. Access to the list of flight options for the chosen date(s).
User flow in lo-fi
To represent the previous subtasks into the taking steps on the app I draw in low-fidelity the user flow for flight search.
This picture describes the journey of the user interaction in four actions taken on the app to get to a flight list:
Flights → Origin and destination cities → One way trip date → View flights
Wireframing
With the aim of doing “reverse engineer” for the flight search interaction design I recreated in Figma the corresponding wireframes by taking into account the presented 5 screenshots.
To obtain this mid-fidelity wireframes I started by inventorying the UI elements that I recognized in the screenshots took. The most common element I found was the icon as a navigation component it’s available in every screen althought in same cases appears also as an information component. Other type of elements included are input fields: the buttons which allows us to move to another screen and the text fields.
This step of inventorying was important to know which components are the building blocks of the wireframes. With that information I represented all the images and text fields but for the icons I decided to reproduce the ones that have a navigation function and the others with circles or squares.
Then I moved to step of setting a grid, by mimicking the placement and sizing of those components. As for the layout I chose to display the titles, the buttons’ text and the permanent text. The rest of the content was replaced with phony text that I took from the Lorem Ipsum generator.
Prototyping
After recreated the wireframes I used them on Marvel App to set a 5 screens’ interactive prototype that describes both the user flow and the interaction design.
Lessons learned
Throughout this process I discover how time saving it can be to go for mid-fidelity wireframing before defining the mockups once its give us a visual representation of the skeleton of an mobile or web app. Also in terms of user flows by linking the wireframes together we can have a lead of how the interaction design works by testing them in an early phase as prototypes. Having the opportunity to applied the learned concepts by give them live into a project was both challenging as rewarding to achieve.
