Case Study: Wireframing the Glovo App 🍔🛒
This artickle was written as part of Ironhack’s pre-work. Wireframing_Challenge #2
Hey there, fellow designers! 👋 Today, I’m excited to share my experience of wireframing the user flow for one of the most popular delivery apps out there — Glovo. 📱
Choosing the App 🤔
When it came to selecting an app to reverse-engineer, Glovo immediately caught my eye. As a go-to for quick food and grocery deliveries, it’s an app that many of us use regularly. Plus, the ordering process involves a well-defined user flow that would be perfect for this exercise.
Identifying the User Flow 🕰️
For this project, I decided to focus on the food ordering flow in the Glovo app. This typically includes the following screens:
1. Home screen with search and browse options
2. Restaurant listing and details
3. Menu item selection
4. Cart/order review
5. Checkout process
I thought this flow would be a great representation of the core functionality of the app and would allow me to explore the various UI elements and interactions.
Wireframing in Figma 🖼️
Using Figma, I created a series of wireframe screens to map out the Glovo food ordering flow. I kept the design super simple and focused on the layout, hierarchy, and essential UI elements.
Here’s a sneak peek of the wireframes:
As you can see, I used placeholder text and simplified icons to convey the functionality without getting caught up in the visual design.
You can check out the interactive Figma prototype :
Task Analysis 💭
The key steps in the Glovo food ordering flow are:
1. Browse and select a restaurant 🍕
2. Add menu items to the cart 🛒
3. Review the order and make any adjustments 🔍
4. Enter delivery and payment details 💳
5. Confirm the order 🚀
I made sure to account for these core tasks in my wireframe prototype to ensure a smooth and intuitive user experience.
Wrapping Up 🎉
Overall, this was a really insightful exercise that allowed me to dive deep into the user flow of a popular app. Wireframing the Glovo app taught me the importance of focusing on the fundamental structure and functionality before adding any visual design.
I hope this gives you a glimpse into my process and inspires you to try your hand at wireframing your own favorite apps. Happy designing! 🙌
