“Reverse engineer” Wireframing Challenge | an IronHack exercise

Wireframe design from high-fidelity mockup screens for a spanish carsharing app called emov.

Doing a “reverse engenireering” wireframe was a bit disturbing as it is not the natural way of doing it, but it was a good exercise to practice wireframing.

Let’s experiencing this “step–backward” process

I had a screenshot of 7 screens from emov app, provided by IronHack:

Screenshot of the existing emov app

And what I have done from them in order to make a step backward to what their wireframes could look like:

Wireframe I designed from the screenshot

The exercise seems pretty easy at first, but the process to choose (or not) what to feature in the wireframe is not that simple.

In a logical process you start by highlighting only relevant informations and you dig deeper and deeper for highlighting the details but when you start with all the details you have to make some choices.
To do so I decided to keep the wording to show how to navigate threw each screens, and I also keep the main icons in order to understand what it can be possible to do.
For the second screen I decided to take off all design related to the geolocalisation to keep only the map as it is the main purpose of the screen.

Let’s stay ORGANISED

I tend to be a bit strict on organisation in my daily life and it is the same for my files in general.
Let’s have a look on how I organised the layers of my artboards with a screenshot of the fifth screen.

Wireframe of Screen 5

I think I may have some OCD (lol) so I always organise my layers on a logical way.

For example, here, I organised all elements from top (top-left) of the screen to bottom (bottom-right).

It can sometime seem stupid but it is one easy way to not be lost when I look forward an element… :)

As usual do not hesitate to clap, to comment… feedback is alway welcome!