A look behind Glovo’s user experience
Since the COVID lockdowns, we’ve gotten used to meals, groceries, or even medicines being a few taps away. Delivery apps have forever changed our concept of ‘convenience’ (for better or for worse).
Brands like Just Eat, Uber Eats, Deliveroo have become a part of our cities as delivery people with huge backpacks bearing these brands zoom through the streets with our food. One brand, in particular, has reached record high success in 2022 taking over 54% of the market share of delivery companies in Spain. That is Barcelona-based Glovo.
So what’s behind Glovo’s success?
Glovo’s success is due to a combination of competitive prices, more restaurant options, better delivery service, but the app’s user experience also has a part to play.
In this article, I’ll be looking into the Glovo app. I’ll be reverse engineering the app’s elements into sketches and wireframes to understand its UX (like conducting an x-ray to see the skeleton) and see what we can learn from it.
To keep this exercise focused, I decided to look at the scenario of ‘an existing user ordering a Goiko hamburger on Glovo.’ This assumes that the user comes into the app already knowing what they want.
Why this scenario?
- This is the most essential and perhaps the most common user flow in the app.
- It covers all the key screens in the order flow, making it a good reference to compare how Glovo fares against other delivery apps.
- Who doesn’t want a big, juicy burger from Goiko? (Ok, maybe our vegan friends do not.)
Sounds straightforward? Let’s see.
The process
Step 1: Reverse Engineering
I put pen to paper and sketched out the key screens of the order flow which helped me make an inventory of the UI components that I’ll be needing such as Search Bars, Add buttons, Checkboxes, Icons, etc. Then I hopped onto Figma and created lo-fi wireframes of the key screens.
Step 2: Task Analysis
With the lo-fi wireframes, I analyzed what were the essential and secondary tasks that the user needs to do to order a Goiko burger.
Step 3: Interactive Prototype
With the lo-fi wireframes, I created an interactive prototype of the order process (where I learned the magic of interactive components on Figma!). This exercise helped me understand the user’s interactions with the UI and see the dependencies between the UI components.
Try out the interactive prototype!
How Glovo’s UX compares with competition
Delivery apps like Glovo are in a very competitive market where each factor counts — price, restaurant options, customer experience (UX/UI). Zooming in on the UX, I did a comparison of how Glovo fares against a global competitor like UberEats or Just Eat.
*Deliveroo pulled out of the Spanish market in 2021 so I have not included it in the analysis.
1. Keep first impressions simple
One screen where Glovo stands out from is the home screen (the first screen the user sees upon entering the app). In Glovo, the user is greeted with only 2 things, a search bar and a bunch of category bubbles (as you see on the right below).
You can tell from this side by side comparison that Glovo’s screen is much cleaner with less distraction. By doing this, they lessen the cognitive load on the user who can then focus on what they want — Getting. That. Burger.
2. Cut through promotional noise
Every app needs a space for the marketing team to push promotions — especially as the brands push for users to sign up for their membership subscription (UberOne for Uber, Glovo Prime for Glovo, etc.)
However, one thing that I must applaud Glovo on is that their marketing ads are not as intrusive or distracting as compared to those of UberEats. They are usually natively embedded within the interface. Another plus is that the purple branding of Glovo Prime makes it visually stand out more in the interface (avoiding the scenario where the user mistakenly thinks it’s part of the order process).
3. Streamline navigation (drop the menu bar?)
Among the 3 delivery apps, Glovo is the only one that does not have a bottom menu bar — and yet, I don’t ever find myself getting lost in the app. On the contrary, it makes the experience more streamlined.
My learnings:
1. Build with intention
On a personal skills level, this exercise allowed me to practice my Figma skills but also to think ahead and keep my Figma file organized — that means grouping by section, using auto layout when possible, using variants and interactive components to streamline prototype screens.
2. Form (UI) after function (UX)
Breaking down Glovo’s app structures into wireframes allowed me to cut through the visual appeal and focus on functionalities and interactions. Just as an architect needs to create the blueprints before painting the house, an app’s user experience needs a lot of strategic thinking before deciding on colors, fonts, iconography, etc.
3. Best practice ≠ what everyone else is doing
While other apps are starting to look the same, Glovo has set themselves apart with a unique approach to their entry screen and navigation.
