GrabFood: Patterns and Flows
A case study in analyzing UI patterns and flows of GrabFood which is one of the household names in Asia when it comes to App-based food delivery services.
This writing is a part of an assignment at Designlab’s UX Academy program. However, I think this is definitely a good opportunity to practice critique an application based on what I have learned about design patterns and flows.
I chose GrabFood to do this activity as this is sort of an everyday app especially when the pandemic hit & we have been in lockdown back & forth. Since working remotely consumed much more time than I thought and having a tight schedule with my classes, ordering food outside helps me save tons of time spent in cooking. Besides, it offered me a wide range of choices from different restaurants.
What is Grab?
The company first started as a ride-hailing application just like Lyft and Uber in the US, but in Asia people will “call” Grab instead. Now, the company has expanded its business and evolved as a super app by launching different services including GrabFood — food delivery services, Grab Pay — mobile payments service, GrabMart- grocery delivery service, and more.
The Problem GrabFood is solving:
Solve people’s hunger and craving problems by delivering food at doorstep, 24/7, so people could access their favorite meals easily without leaving the office, home or having to deal with temperamental traffic conditions, or other hindrances got in their way.
My usual food ordering task flow at GrabFood within 5 mins
I don’t know about others, but most of the time when I open Grab App I feel starving, and embarrassingly I often turn to “hangry” mode if there are some hindrances get in my way. Therefore, I often complete my ordering within 5 minutes to get my food as soon as possible.
I could summarize my ordering flow in GrabFood as following:
Since I’m an existing customer of the app, my ordering task is faster by reducing some steps such as:
- Type in address — due to Grab using my address from “Saved Places” as default, so I don’t need to key in my address again unless I want to change the delivery address.
- Adding payment information — due to Grab using GrabPay as default payment so unless my account is run out of balance, payment will be charged in my GrabPay
Highlight Patterns From Ordeing Flow in GrabFood App
There are a few common patterns that have been experienced in GrabFood App.
1. Search Bar:
Having a search bar at the top allows users to find the items they need quickly and easily. Users can enter the name of the dishes (burgers quick bites,..), which kind of cuisine (Asian, Vietnamese, Western, etc..), or restaurant name to access the result page.
The search bar will turn to the search icon and become sticky at the top right when the users scrolling through the GraFood homepage
Interaction: Once tapping the search field, a search page slides from right to left showing recent searches, popular searches, and all cuisines. Once typing in the search field, users are suggested with relevant results even with only 1 word. This helps users minimize customer effort in recalling unnecessary informations as well as speed up user’s tasks.
2. Carousels:
Carousels of cards with a swipe gesture on mobile allow users to compare different types of dishes/restaurants easily. GrabFood employed the illusion of continuity as their cue of carousel.
Interaction: Users can swipe to see more cards and can tap on each card to see the restaurant page. This could make users feel less overwhelmed as all the cards are condensed in carousels instead of laid out full pages.
However, according to research from NNgroup “Carousels on touch screens are plagued by low discoverability and sequential access”. The chance user discontinues swiping after viewing 3–4 step is high. This could lead to dissatisfaction if the user is unable to find interesting item after going through items one by one.
3. Continous Scrolling:
GrabFood display menu by using continuous scrolling, this will help users scroll through the page for making choice more intuitively. Each item is nested in a card with clear information including image and text may help users select items faster, however, I can spot the inconsistency in cards as some cards don’t display descriptions like others.
Interaction: Users scroll the page continuously to see all available options in the restaurant’s menu. To back to the top, users need to scroll up till they reach the top of the page.
While this function could be helpful for user experience by eliminating the need for clicking “next page” or go to another page to see other options. However, this may cause confusion and frustration if the content is too long while the user’s mobile data is limited. Also, considering adding the Back to the top button may help the user return to the top section easily.
All in all, GrabFood employed some common design patterns on mobile to solve user’s pain points. They have successfully created a product not only able to cater to user’s needs but also bring delightful moments by making the product easy to use. Even though, there are some inconsistencies in their design and some visual clutter to their app. I think this is where the Infinity loop of innovation is called for.
