Grab Food
This case study was a collaborative effort between a team of designers as part of one of our User Research modules. Our UX design project for Grabfood significantly improved the ordering experience during the COVID-19 period.
By implementing a user interface feature that proactively notified users of delays caused by high order volumes or driver shortages, we effectively managed expectations and reduced frustration. Additionally, our streamlined voucher application process, which highlighted applicable vouchers based on the user's cart items, significantly improved efficiency, making the ordering experience more convenient and rewarding for users.
Note: Grab app version v5.169.0 was used
Roles
Researcher
UX Designer
Tools
Figma
Notion
Problem
Users often encounter inaccurate food time predictions, especially during peak periods, causing long and inaccurate waiting times and the application of promotional vouches given. These issues lead to frustration, inconvenience, and dissatisfaction among users
User Research
For our user research, we conducted interviews with around 10 users, representing a diverse range of age groups and life stages, including students and working professionals. We concentrated on gaining an understanding of our users by asking broad, open-ended questions.
These interviews provided valuable insights into users' motivations, frustrations, and challenges when using GrabFood
Define
Affinity Mapping
We mapped out the frustrations experienced by users and categorized them based on their relationships to one another.
This approach provided a deeper understanding of the underlying issues and allowed us to prioritize solutions more effectively.
User Persona
We mapped out the frustrations experienced by users and categorized them based on their relationships to one another.
This approach provided a deeper understanding of the underlying issues and allowed us to prioritize solutions more effectively.
User Journey Map
We mapped Eunice's interactions, focusing on tracking her emotions at each touchpoint. By identifying key pain points and moments of frustration, we gained valuable insights into the most significant challenges she faces. This process has helped us pinpoint specific areas for improvement.
Eunice's main pain points were:
-
Being unsure of the restaurant's demand
-
Long and inaccurate waiting time especially during peak period (e.g. dinner time)
Prototype
Low Fidelity Prototype
We created a low-fidelity prototype to quickly visualize and tested key design concepts before moving to high fidelity prototype.
​
​Since we weren't redesigning the entire GrabFood app, we kept the existing interface intact and focused on adding new features. This approach ensured that users wouldn’t need to relearn how to use the app, making the transition smoother and enhancing the overall user experience without disrupting their familiarity with the app.
High Fidelity Prototype
After analyzing the user feedback from our low-fidelity prototype, we made subtle adjustments, primarily focusing on adding icons and alert messages to better inform users.
​
Next, we enhanced the low-fi prototype by incorporating colors, text, and images to refine the design and bring it closer to the final version. Click the button below to explore and interact with the full prototype.
Key changes made:
Red Alert - Early Warning for Users
Change: Added a red warning label on high-demand restaurants.
​
Reason: Users were unknowingly clicking into restaurants with long wait times, leading to frustration and wasted time.​
​
Impact: Helps users make quicker, more informed decisions by avoiding high-demand restaurants before browsing their menus.
Estimated Wait Time –
Transparent Ordering Experience
Change: Added an estimated delay and waiting time on the restaurant's homepage.
​
Reason: Previously, users had no visibility on how long an order might take causing uncertainty.
​
Impact: Improves user confidence and decision-making by setting clear expectations before they proceed with an order.
Pop-up Banner –
Reducing Frustration at Checkout
Change: Implemented a pop-up notification at checkout to warn users about potential delays.
​
Reason: Users only discovered order delays after placing an order, leading to dissatisfaction and unnecessary cancellations.
​
Impact: Ensures users are fully informed before finalizing their purchase, giving them the option to proceed or cancel, reducing frustration.
Grayed Out Vouchers – Clearer Usability
Change: Disabled unavailable vouchers by graying them out to indicate they cannot be used.
​
Reason: Previously, users had no clear indication of which vouchers were ineligible until they attempted to apply them, leading to confusion and frustration.
​
Impact: Enhances usability by making it immediately clear which vouchers are valid or unavailable, improving efficiency and reducing failed attempts.
