Challenge 2: Wireframing
By: Gisèle Boada
Tags: Ironhack, Wireframing, UX Design, Prototyping, Ironhack Prework

Ironhack’s Prework

After the first prework challenge, I feel more confident to show the second one. In this challenge the main goal is to ‘reverse-engineer’ one popular app and work through the user flow. I had never used Glovo before so I decided to download the app and experiment with that interface.

For those who don’t know, “Glovo is a Spanish start-up founded in Barcelona in 2015. It is an on-demand courier service that purchases, picks up, and delivers products ordered through its mobile app. It aspires to be a multi-category lifestyle app with food delivery being the most popular offering.“ (Wikipedia)

Original screenshots

1 ANALYZE THE FLOW

The first step that I am going to follow is to do a task analysis of the flow, which I will “reverse-engineer” later on.

The first action is the flow is to click on one of the options the app offers. You can choose to order some food, snacks, presents, or “whatever”. The second action is to choose inside the group one of the subgroups. If you choose the snacks group, you will have to choose between the ice cream category or the breakfast category, for example. The third action after selecting the subgroup, is to choose one of the shops that offer that product. After that, you will have to choose a product by adding it into the order. You can choose several of them but in this flow there will be only one selection. And last but not least, when you are done choosing, you click on the button which is placed on the bottom of the screen, and you will be directed to the order summary.

Original screenshots & Flow

This flow ends before confirming the order, and this is the flow that I am going to wireframe now. In the previous image wecan see the real screenshots and the flow that they follow.

2 LO-FI DRAFT

Lo-fi draft

The following draft is a quick representation of the flow that I previously described, and it has been sketched in Lo-Fi in a paper. Here we can see the workflow and also the most important information in the screens, the information that will help the user to follow the right steps.

3 WIREFRAMES

After choosing which flow I would work on, I have created the wireframes with Figma. I have simplified each screen and selected only the items that were relevant to the flow that I was creating.

Wireframes

After that, I have added the interactivity by creating a navigation and solving all the issues that I have identified during the process.

Wireflows

4 PROTOTYPE

Here you can see a preview of the prototype that I have done with Figma also. This summarizes the challenge, but in case that you want to have a look at the prototype you can click on the link below.

https://www.figma.com/proto/YVIalgiJBoe6283WN2apXr/Challenge2-Glovo-Wireframing?node-id=2%3A8&viewport=-90%2C633%2C0.2893929183483124&scaling=scale-down

I really enjoyed the experience of creating my first wireframe and interactive prototype that actually works. In conclusion, I will say that even with the planification of the flow, some other flows have been added at the end to make the experience more realistic. The truth is that it really seems more easy at the beginning, and when you are connecting the flows, it gets tougher.

I hope you enjoy the read and wait for your feedbacks and applauses (if deserved)!