Ironhack’s prework: Wireframing _ Challenge 2

Imagine having to wireframe and re-design an app that you are already very used to. How hard would it be? Let’s find out!

For the purpose of this exercise we were challenged to design the wireframes of an already existing app. In this case, I chose Glovo, a very well-known food -and services- delivery app. This startup was launched in 2015 and is considered to be a unicorn startup -a.k.a a startup that is valued in over 1.000 million euros-. They are already present in more than 22 countries around the globe and have over 7 million active customers.

I chose Glovo because I use this app on a weekly basis and since I am already a user of such app, I believed it would be both easy to highlight the main areas a customer might be focusing on when placing an order, but also hard since I already know the necessary workflow to place orders. So, shall we start?

Challenge: Design the wireframes of an already existing app

Tools: Sketch

The value proposition

The users of Glovo encompass diferent target profiles. Some people would use the app only to run errands, some others to make express deliveries within the same city, but the vast majority use it to place food orders. Although the workflow for these user profiles might differ, we will be focusing on the option that the vast majority choose: ordering food.

The workflow

So, what would you do if you want to order something and have it delivered, for instance at your house?

Well, let’s place ourselves in this situation. It’s lunch time on a Tuesday, we are working from home and we want to order something to eat. How would we start? Well, we know a couple of places here in the neighbourhood, but we feel too lazy to walk over there and wait for the lunch to be prepared for us. We also know another couple of places where we could place our orders on the phone, but we don’t know the whole menu, and I really doubt the waiter is that nice to read us out loud the whole list. So, what do we have left? We know that there are food delivery apps, and that Glovo is one of them. So we download it -or open it up if we have already used it before-, and we arrive to the main menu, where we choose the option of “order food”. We start browsing different restaurant options, or deals, or even food that we are craving for (for instance, pizza). All related results will come up and we will start choosing, until we find the meal that we want to order and arrive to the last screen where we actually order it. Let’s picture it!

For the purpose of this work, we assumed we were already users of the app, so we had already entered at least one valid address for the delivery, and when we open the app in our smartphones or laptops, we would be directly redirected to the Home Screen.

We have identified the main interaction areas and drawn arrows to see where would each button lead you to.

Building de Prototype

So far so good. But now, we need to imagine that we have to create the prototype of this app. So what is the first step any UX/UI Designer would take? Make a list of UI elements that need to be included in our screens.

After having made this wonderful list, we will start putting a little bit of colour in our wireframes, making them look as real as possible.

For this reason, we not only added some colour, but also some pictures and icons to make it look real and usable.

Learnings of the Challenge

When you choose an app that you are familiar with for a personal project, you may initially think you have a small advantage since you know the interface, but indeed, I found out quite the opposite. Although it is true that I considered Glovo as one of the more minimalistic apps in my daily life, when you start wireframing and prototyping, eventually you’ll realize that their design is anything but easy and straightforward.

There are a lot of masks, and rounded geometric forms that you may not notice when wireframing, but when actually designing the real interface -or prototyping it-, that is where the actual challenge begins.

Nonetheless, I found this as a very enriching and practical example of how to design a food delivery app in real life.