Reverse Engineer — Wireframe
Ironhack Challenge
Learning by doing is the Ironhack methodology. So here I am, in another challenge, practicing to learn more and gain experience. My challenge was to practice wireframing by “reverse engineering”, then I had to choose an app and create a wireframe version of the user flow based on high-fidelity screens of such an app.
I chose Omio’s app which allows you to find travel options by train, bus, and flight. I decided to work with this app because I like travel products and I would like to learn about the patterns used by this kind of app while I build the wireframe.
When I started the process I was looking for what users try to accomplish on the Omio app. They try to purchase the best train, bus or airline tickets option. Then I broke down the complete user flow into one task that I could represent in my wireframe.
Task: Find the final price for a round-trip journey by train between the cities of Berlin and Prague, departing on March 17th and returning on March 21st.
How could the user do this?
- Selecting the one way or round-trip option.
- Entering the departure and arrival destinations and travel dates.
- Choosing the best outgoing and ingoing option.
- So it’ll be possible to see the final price.
Creating the wireframe.
First of all, I looked at Omio screens and tried to understand the booking flow.
After then I created the wireframe of the same pages on Sketch
And I finally used the Marvel plugin to create an interactive prototype.
What I learned by creating Omio’s wireframe.
The process allowed me to understand how Omio displays information and prioritize content. The point that caught my attention was the UI patterns used on the application. Instead of using drop-down lists, search boxes and date pickers as a pop up over the main page, the application directs the user down to another page to select the required information and then return to the main page again.
Another lesson was the ability to manage the wireframe creation of Sketch software. Practicing is the best way to get used to the tool. I’ve been watching a lot of videos about it and tips as well, but when you have to put in practice you realize what you have to learn or which information will help you to develop tasks better and faster.
