UI/UX Case Study: Auto Message to Ease User Resending The Order Notes at GrabFood
Part of UI/UX Assignment from Dibimbing.id UI/UX Bootcamp
Hi! 👋
My name is Abimanyu Dwi Prakoso. I’m a fresh graduated from Industrial Engineering at Universitas Jenderal Soedirman and becoming UI/UX Enthusiast who currently deeper my skill in UI/UX Design at Dibimbing.id Bootcamp.
In this post, I share a case study that shows a problem inside GrabFood that is related to UI and UX.
Role
- UX Researcher: I worked with 2 people as a team to find out background problems, conduct in-depth interview, create a competitive analysis, affinity diagram, user persona, customer journey map, and actionable insights. (Shout out to Mohammad Imam Basrurrohman and Fikri Juliansyah who worked together with me where we appreciate different creative ideas and serious yet fun work at the same time✨).
- UI/UX Designer: After getting the actionable insights, we separated by taking a minimum of 1 actionable insight differently. So, from creating an ideation process (How Might We?), user flow, wireframe, design system, mockup, prototype, conducting usability testing, and design iteration worked by myself. ✊🔥
Timeline: 3 months (February 13 - May 24, 2023)
Tools: Figma, Figjam, Maze, Google Slide, Google Sheets, Google Meet, Discord, Zoom, and Google Sheets
Disclaimer: This case study is not affiliated with Grab.
Background
Grab is a services-based app company in Singapore since 2012 focused on app usage in Southeast Asia. The services that are offered include transportation (GrabTaxi, GrabCar, GrabBike, etc.), delivery (GrabFood, GrabMart, GrabExpress, etc.), payment (GrabPulsa, etc.), until other services like home services and wellness.
Based on the Google Play reviews from Indonesian users that were taken 20 samples randomly with a time span between November 2022-February 2023 (in our assumption based on Apple, the app with major feature update is around 3 months before research started), most users are complaining about GrabFood (37%). The instance of negative reviews of using GrabFood are listed below. Somehow, the users tend to threaten Grab to uninstall, which makes us curious about whether the food delivery competitors have the same problems or not.
The challenge is since the complaints about GrabFood are so varied that we can not find a similarity that support us to highlight the problem, therefore a deep exploration of behaviors, pain points, and user motivations are needed as support to highlight the problem and create recommendations/actionable insights.
Objective
Based on the background problem explanation above, therefore our objective for this research:
Understanding behaviors, pain points, and user motivations when using GrabFood and competitor (similar with GrabFood) as benchmarking.
Limitation
- GrabFood user is a consumer-only user, neither a merchant user nor a driver user.
- The number of respondents based on Mehek Kapoor are 5 used in-depth interview and usability testing to reduce wasting time in finding respondents since this case study has a time constraint. I do not want to get a point penalty in my bootcamp because submitting an assignment above the deadline. 😁
Design Process
The design process framework that used is Design Thinking which consist of 5 steps: Emphatize → Define → Ideate → Prototype → Test.
Empathize 👥
We started to dig deeper behaviors, pain points, and user motivations insight from user when using a GrabFood with in-depth interview. This method is used because to explore the main problem of using GrabFood and also to determine the user profile which help us to create a user persona as an output.
Sample Structure
Active user in GrabFood and competitors segment.
Sample Specification
- Active user GrabFood (min. 1x per week)
- Active user GrabFood’s competitor (min. 1x per week)
- Experienced a difficulties when using a GrabFood
- Nationwide
- Man and Woman
- 18–55 y.o.
Key Information Areas
1️⃣ User Profile
- Profile Questions
– Name, age, location, and job - Verification Questions
– How long do you become a Grab user?
– How often do you using the GrabFood service?
– Do you have any difficulties from using GrabFood?
– Apart from GrabFood, what other food delivery apps do you use most often? And how often do you use the apps?
2️⃣ General Behavior User GrabFood and Competitor
- Behavior (Experience and Function)
– Can you share your experience when using food delivery services in Grab application and other apps?
– What do you usually use the GrabFood service and other food delivery services for? - Pain Points
– Can you tell us about your difficulties when using the food delivery services both GrabFood and others?
– How do you overcome these difficulties from both GrabFood and others? - Motivations
– What motivates you to keep using GrabFood and others? - Needs
– Do you feel that something needs to be improved when you use the food delivery services both GrabFood and others? If yes, what is your need?
Conducting In-Depth Interview
After creating a specific respondent information and questions, the next step is to recruiting a respondents where this informations are shared to friends, siblings, and people around us. The result is 5 respondents are met the criterias and ready to interview as same as the in-depth interview timeline.
To maximze time-efficient since the time constraint is so limited, therefore each of us are roled as interviewer, note taker, and editor (to record, screenshoots, or edit a note while there is not match between note and recording). In my interview, 2 people are contributed as interviewee.
In-depth Interview Results
We grouped the insights from respondents into an affinity diagram (see full results here). Therefore, we can highlight and understanding the problems faced by users.
We also created a competitive analysis based on interviews as a support to decide a priority to solve a problems using prioritization framework.
We can not conduct a survey for richer data because to reduce waiting time to reach minimum of 30 people filling survey and avoid any disturbances in timeline.
Define 🔍
We concluded from interview results into the depiction of representative users called user persona that define problems and needs summarized based on interview results.
User Persona
Ideate 💡
Started from customer journey maps that took the results from the experience of GrabFood and user persona which can create an opportunity as a base of actionable insights.
Customer Journey Maps
Based on customer journey maps, we created many opportunities that fix a problems. Due to tight timeline, we have to do a selection from these with prioritization framework that we used is Eisenhower Matrix. It has a 4 groups of prioritization which we decided that based on Google Play reviews data, in-depth interviews, user persona, and competitive analysis.
Eisenhower Matrix
After prioritize a opportunities, we created actionable insight for the recommendations to solve a GrabFood’s problem.
Actionable Insight
From these actionable insights, each of us must be picking one or more actionable insights to do a solutions individually. I picked “Add feature that send order notes to restaurant and driver directly after transaction” because it is more urgency than others that user needs a clear information and to verify the order as same as the notes both restaurant and driver.
This is the end of our journey as UX Researcher team. After picking actionable insights, we seperated to do a solutions individually (good luck, my friends 😓✊).
How Might We? (HMW?)
I created HMW to make more rich ideas based on my actionable insight. The result is 3 ideas generated that become a base for Crazy 8, user flow, and information architecture.
User Flow
To create a user flow, the results from my UX Research team that shown the experience using GrabFood and the existing app flow are used.
The result is there is a need to improve from selected flow, therefore this is my proposed solution below.
Information Architecture (IA)
Information architecture is a site of information that shows in the menu which to help navigate user to find an information easily. In this case, IA is used to put my solution properly.
Crazy 8s
Crazy 8s is creating the 8 idea within 8 minutes. This is my first time doing Crazy 8s while my mentor conducted this where I need to pushed a new ideas in limited time. Suprisingly, I can created 8 ideas although drew too big that added 1 sheet again because I forgot that Crazy 8s should draw 8 idea in 1 sheet. 😅
Wireframe and Wireflow
After creating Crazy 8s, these ideas are used for a base to creating a wireframe. These wireframe are connected as a flow that based on my purposed solutions in user flow and IA.
Prototype 📱
Before I shared about prototype development process, please try my first prototype! 🤩
Back into developing my prototype process, my progress is started from creating a mock-up based on design system that created by myself based on Grab Coppy UI Kit as a reference.
Design System
Mock-Up
There is 3 new features that implemented to my prototype, consist of:
1️⃣ Changed a copy from “Note to restaurant” to “Note to restaurant & driver” with a description that assures user
From existing designs, there is no assuring description below headline text “Note to restaurant” and “Optional” is too much shown.
2️⃣ Added auto message and resend buttons directly send to restaurant
The problem is when I found a chat to restaurant to gain a reference of exisiting design, sadly I can not chat with them because needed to started by restaurant first. Fortunately, I found a existing chat design from YouTube however this chat design is from merchant/restaurant users not a customer. Because there is no other mockup that represent from customer, therefore this design is used as an existing.
3️⃣ Added auto message and resend buttons directly send to driver
This existing chat design after accepted by driver, there is no auto message about custom orders.
Test 📋
After the prototype finished, I need to test this to a representative user to gain an insights, suggestions, and also to answer my hypotheses:
- My prototype is easy to use with 3 new features
- User can adapt with redesigned order notes, an auto message to restaurant, driver, and resend button with at least less minor problem (strayed at the process but accomplished a task without failure or left)
To answer these, usability testing is conducted.
Usability Testing (UT)
Usability testing is a research method to test a product with a user for gaining a feedback from user by doing a task that given from researcher. Therefore, my objectives from conducting usability testing are:
- To gain an insight and suggestions from user about redesigned order process.
There is a validation that need a metrics, consist of:
- Task success rate (direct/indirect success/failed)
I also created an interviews questions like task scenario questions and follow-up question to gain more insight.
- Scenario questions
– What is your experience when do a task until done?
– What do you like about this task and why?
– What do you dislike about this task and why?
– Is information clear to you while doing this task?
– Any message or comments from you when do all this tasks?
After this, respondents are recurited based on criterias consist of:
- User who uses with food delivering apps either GrabFood or similar apps (min. 1x/month)
- User who experienced using order notes when ordering a foods in all food delivering apps
The process of my UT is down below. Maze is used as a tool that helps me to do a UT and capturing a task success rate metric.
While conducting a UT, I found a big problem that when using my prototype, the mobile devices from respondents are crashed and stuck loading when into the task scenario in Maze 😟. With a heavy heart, respondents are using a laptop as a substitution.
UT’s Task Scenario
Scenario 1: Order a Food with Order Notes
You’re a GrabFood user that need to order a food from FoodMood restaurant. Order “Nasi Saparika” 1 pc, add “Extra Beef”, and also add an additional note “Beef Tenderloin no fat”. Deliver with standard (non priority) options and use cash transaction method.
From this task, user prefer to choosing an options rather than typing a custom notes. This is shown that user confused when to do a typing a notes. Then, user suggested to add a options based on the most typed note by GrabFood user to become more ease and reduce steps when ordering.
Scenario 2: Chat with Restaurant
You want to chat with restaurant about your order because you feel worry to your food is not same like your order notes.
User gave a positive review that felt helped with auto message that made more ease to use and no need to typing again (I’m flattered 🤭). Aside from a positive reviews, user felt need an effort when read a “Resend” button. Therefore, “Resend” button should be more readable from color, typography, button size, and also auto message can be useful to the user that left a phone after ordering.
Scenario 3: Chat with Driver
You want to chat with driver about your order because to make sure that your order is same like your order notes.
Same as the second scenario that users felt helpful with auto message with addition that text must be friendly with driver (especially Indonesian driver).
From these 3 scenarios concluded that when creating a custom order note, respondents prefer to choices rather than typing.
“I really wanted to add a choices when typing a custom order” — Adjie
“It will be easier to create custom note when giving a recommendation based on user’s custom order history on that restaurant” — Ihsan
Then, the respondents gave a positive reviews and 100% direct success based on task success rate about auto message and resend button that no typing needed, unless if there is any changed order.
UT’s Recommendation
The recommendations based on respondents are grouped into inside and outside new features.
Inside new features:
- Add a dropdown menu when typing with a suggestion based on the most typed by GrabFood users
- Redesign “Resend” button to become more clarity
- Auto message text to driver is more friendly like “talking” to driver. Also, translation is needed
- Auto message text should give a word that convincing users to lessen their worry while left the phone inside tooltips
Outside new features:
- Add some template chat to driver.
- Add color to transaction method when it is already selected.
Design Iteration
Based on UT reccomendations, mockups are recreated down below.
Then, I re-created the prototype based on these UI revisions.
For Bahasa Indonesia message translated in prototype, click at the link below:
https://bit.ly/GrabFood-IndonesiaMessage-Prototype
Takeaways
From my purposed design based on task success, and UT respondent comments shown that user feel helpful and usable when using my purposed design but with a small improvement to make user feel more ease.
Lesson Learned
I have finally created my first UI/UX case study as my portfolio. From research sessions and designing a solutions there is always a barrier such as hard to decide a best questions to use for interview and problem from UT that teaches me while creating a prototype, always test to various devices. In the end, I have learned like a digital product even created with big company there always have a flaws.
