Deconstructing the user flow with wireframe

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.




UX/UI Designer and Philosopher

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Engage With An Overwhelming World


Variable fonts, Part the Second: Optical size, custom axes, and other curiosities

An Open Source Blockchain Design Story

Review: Lorada — Elementor eCommerce Theme

Review: Lorada - Elementor eCommerce Theme

How We Created the Modular Kambr Brand

Here is our new branding! We put everything in order.

UX Engineers: the missing link? (spoiler: not really)

Three women conversate with a man around tables with food in a luminous office space

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Víctor G. Hidalgo

Víctor G. Hidalgo

UX/UI Designer and Philosopher

More from Medium

Depression intervented by design_Contextual Background(1)_Preface(1)

Design Shorts: Going Analog

The power of mobile ethnography — Ethosapp Blog

Usability: Xbox Game Pass for PC