Deconstructing the user flow with wireframe

IronHack Challenge 2 — Wireframing

A good practice for any designer can be to observe and try to emulate designs that they consider interesting to become familiar with a similar development to the one that was had in order, in this way, to learn in the process and implement concepts that they have assimilated thanks to this in their own creations.
This time, the challenge that IronHack poses is to simulate the user flow through wireframe in an application, which, in this case ,will be Just Eat.

We begin by studying our flow as Just Eat users, which will be to get a menu with a hamburger by ordering it at home. To do this, we trace through screenshots the route that we must continue using the app:

User flow screenshots

Taking into account these screens, I proceed to generate a lo-fi wireframe where I try to deconstruct its design to a minimum, with which to better understand its architecture and how its elements are interconnected.

Lo-fi wireframe

The path that the user takes, therefore, should be:

1. Select your location or the type of food you are looking for
2. Choosing a restaurant
3. Choose the type of menu you want
4. Add the menu to your shopping list
5. Confirm the order
6. Pay the order
7. Wait for the order, considering the location

Thanks to this preliminary analysis method, I start to build the prototype using Figma, trying in the process to dispense with any distracting information, such as images, visual effects, and color. With the only exception of the color in the buttons that lead to the payment process, since these should be the focus of attention and where we want to reinforce the user flow.

During the prototyping process I tried to put special attention and emphasis on the transitions between screens, so that they do not feel isolated from each other and the user perceives them as parts of a journey with which they can become familiar, arranging this path between screens, with the one that the user operates, of a specific route through which to make the user a participant in it. I think these small details are fundamental in the workflow to give cohesion to our information architecture and that the elements with which we want to achieve the flow are properly coalesced.

The prototype can be accessed by clicking here.

Thanks to this challenge, I have better understood how the user flow is when browsing an app with a specific objective and the effort that must be made not to go into details in a prototype, since it is easy (and wrong) to resort to elements visuals that are really distracting and make the prototype target lose its value.