GrabMart Redesign: Improving buying process by replicating real-life grocery shopping experience
Around May 2021, I got a scholarship to participate in a UI/UX training program in Purwadhika. I decided to make the jump because, as a graphic designer who has always liked to do research and solve problems, I don’t really have the chance to do that in my line of work. This project is the very first design challenge I made in Purwadhika, and while I am still quite new in terms of UX research and UI exploration, I am quite pleased with the result. Enjoy reading!
Specifics: 2021 | Personal Project | UX Case Study
Category: App Design | Design Improvement | User Experience Design
Project Duration: 2 weeks
My Role: All — UX Researcher, UI/UX Designer
Challenge: How can we provide a better experience when users search for and purchase products in GrabMart?
*Note: If you’re reading on mobile view, tap the image to enlarge/zoom in
The Brief
“Grab is Southeast Asia’s leading super-app that provides everyday services such as transportation services, food deliveries, and others to millions of users across the region. Grab’s sub-product, GrabMart, is often used to shop for daily needs in the current social distancing protocol. As a UI/UX designer, you have been assigned to redesign GrabMart’s interface to provide a better grocery shopping experience for users.”
Step 1: User Research
Let’s get insights from the users
I wasn’t familiar with GrabMart, and I also feel like the service was not very popular yet in Indonesia. Hence, I started this project with minimal knowledge and assumptions about the users' behavior, which I thought was good. To help me understand what kind of users are using (or seem interested in using) GrabMart and how they shop for groceries both online and in real life, I decided to start my research with usability testing and an online survey.
Usability testing
Objective — Testing the functionality of GrabMart for first-time users, how easy it is to start searching for a product right until placing the order.
Participant criteria:
Non-GrabMart users who are regular food delivery or e-commerce app users (at least once a month).
Online survey
Objective — Gaining an in-depth understanding of how regular users interact with GrabMart, uncovering their problems and needs that the app hasn’t solved.
Participant criteria:
GrabMart users; have tried using GrabMart at least twice.
Pain points
Overall, both regular and first-time users agreed that the app is easy to navigate, though there are several issues with the experience. I identified four key pain points that I feel are worth looking into based on the research result.
Pain Point #1: No Price Comparison — Cart / Basket Page
“I love comparing prices between stores. That’s why I don’t like GrabMart’s cart interface; the product prices are not visible. I have to go back and forth between different stores just to compare prices, and even after I do it, I can’t favorite the products I choose.”
Pain Point #2: No Product Detail — Product Page
“I like shopping at physical stores more because I can directly see the products and check the food composition. So, I wish GrabMart would add more size variations in one item and more information about the ingredients.”
Pain Point #3: Trouble Cancel Order — Processing Order Page
“There was a time when I accidentally click order because of the bad signal. I don’t know how, or if it’s possible, to cancel it, so I ended up rebuying items that I still have at home.”
Pain Point #4: Can’t Buy More Items — Waiting Packing Page
“I like physical stores better because if there is a forgotten item on the shopping list, I can always go back right away and search for it. I actually had one similar experience when I was grocery shopping via GrabMart. I forgot to order an item, so I messaged the driver and he bought it for me.”
Step 2: Ideate Solution
Defining problems & redesign ideas
From the previous data, two main insights were found:
- 50% of all respondents still prefer shopping at the physical stores
- Most of the pain points originated from respondents who prefer physical stores
So, we can conclude that users still prefer the in-store grocery shopping experience more than GrabMart.
How might we improve GrabMart by making the experience more similar to grocery shopping in real life?
Design opportunities
The goal is to replicate the real-life grocery shopping experience as close as possible, with three main touchpoints:
- Enabling effective price comparison between different products and stores
- Adding a more detailed product information page
- Better user control and mistake prevention
Design restrictions & things to consider:
- Must maintain branding & widget design consistency
- Based on the user research’s positive reviews, there should be no significant changes, especially on the flow, navigation, and interface design
Redesign plans & wireframe sketches
Step 3: Design
High-fidelity design & prototype
I finalized my wireframe sketches to high-fidelity designs and prototype the interactions using Figma, and below are the end results.
Design Result #1: Price Comparison — Cart / Basket Page
Design Result #2: Product Information — Product Page
Design Result #3: User Control — Processing Order Page
Design Result #4: User Control — Waiting Packing Page
See the prototype here:
Constraints & Setbacks
Several constraints I’ve encountered during the making of this project:
- The research data was taken purely from GrabMart customer’s perspective; hence this project focuses on exclusively improving the customer’s experience.
- My knowledge about the stores’ & drivers’ perspectives and Grab’s business goals are limited; hence some solutions might not be applicable in real life.
- This was the first time I tried the usability testing method, and I have made two mistakes; my research lacked participants and tasks. I should have had at least 5 participants and at least 2 tasks for my result to be valid and representative.
- During the making of this project, I noticed that GrabMart is regularly updated and improved. Some online survey respondents might use the earlier version of the app, which could cause possible inaccuracies in the proposed solutions.
Thanks for reading!
Got any thoughts? Please do share what you think in the comments below, and feel free to hit me up at LinkedIn or chat me up here: hey@see-works.com
