Ironhack Challenge 2: Wireframing Glovo

The current pandemic has definitely brought my food delivery addiction to light, so when I was challenged to practice wireframing during the Ironhack pre-work, Glovo seemed like the perfect choice.

Glovo is an app that offers different types of courrier services; from transporting important documents to supermarket deliveries. I chose to wireframe the task flow of ordering a pizza as this is the service that I use most.

To start off, I sketched low-fi wireframes of the flow to identify which UI elements I would need to build and save as components on Figma:

• Image placeholder
• Search bar
• Toggle
• Icons: profile, gift, like, back
• Buttons: add, minus, confirm
• Drop down
• Text input

I then performed a hierarchical task analysis to break down exactly how and why each frame would be used. The overall task the user is trying to acomplish is to order a pizza to their home for dinner. Users may achieve this in a variety of ways: using a delivery app or website, calling the restaurant directly, or going to the restaurant for a take-away. The following diagram deconstructs how a user would achieve their task by using the Glovo app:

Now that I developed a deep understanding of how users use the app and what UI elements they would need to acheive their goal, I was ready to start wireframing my mid-fi prototype.

This is Glovo’s home screen which displays the different courrier services that they offer.

After selecting the ‘Food’ option the user is presented with sponsored restaurants and the option to see more.

The ‘Restaurants’ button presents you with all of the available restaurants to choose from.

After selecting their restaurant, the user can add the menu items they want to their order.

Once the user has selected their food they are taken to the checkout page to complete their order.

Once I had drawn up the wireframes, I used Figma’s prototyping feature to see how they would work in action. This process made it clear how important transitions are as they can help communicate relationships between different frames. Check it out by clicking on this link or see the flow pictured below!

Thank you for reading!