WIREFRAMING — GLOVO

Clara Solozábal
3 min readDec 24, 2020

Ironhack’s Prework — Challenge 2

My task today is to create a wireframe version of the user flow of the chosen app based on screenshots or high-fidelity prototype screens of such app. One of the apps of reference Ironhack proposes is Glovo and I have to admit it is the first that came up to my mind since it is my favorite to order delivery food.

And what is Glovo? It is not just a food delivery app.

Glovo is the app that allows you to get the best products of your city in a few minutes. We connect users, businesses and couriers to make that possible. The project was born with the aim of transforming the way users acquire what they need, making cities more accessible. (Glovoapp.com)

THE USER FLOW

User flow is the path taken by a prototypical user on a website or app to complete a task.

In the following screenshots, you will see the set of steps the user take to order food with Glovo

Glovo Screenshots
  1. When you open the app — you have to be logged in — you will see the different options offered by Glovo. You can ask for almost anything that comes to mind. In this case, we are ordering Food.
  2. The next screen is very similar, yet it shows some specific restaurants, offers, and the global option of Restaurants, so you can choose any restaurant you find there.
  3. At this point, you can scroll vertically and check each restaurant or you can use the search bar to find the one you want. The one I have chosen is CroquetArte, a specialist in Spanish croquettes.
  4. Now you scroll down and see what the restaurant has to offer. You can choose what you like best. Also, at the top of the screen, the app shows you the approximate time it takes to deliver the order, the rating of the restaurant, and the price of the delivery.
  5. The last point is the confirmation of the order: the summary of your shipping details and the total price. After this, the app shows you a map with the route of your shipment and the estimated time of arrival.

The wireframing of this flow looks like this:

Glovo Wireframe (Figma)

I have used Figma to compose the wireframe and I have also created this interactive prototype for iPhone 11 Pro or iPhone X:

Glovo Prototype

Here is the link to Figma if you want to take a look:

https://www.figma.com/proto/639ypPMu6wZX3FzSf3SPwE/Glovo-Prototype?node-id=16%3A2&viewport=-1176%2C206%2C0.5780682563781738&scaling=scale-down

This challenge has not been easy, but I’m glad to say that I have enjoyed it a lot. I am also a bit proud to have created my first interactive prototype. I can’t wait to start the Bootcamp!

HAPPY CHRISTMAS TO ALL!

Clara.

--

--