Redesign GrabMart in Grab Application — a UI/UX Case Study
Introduction
DISCLAIMER: This project was done by members of Group 1, UIN Summer Program 2021 for a final project and is not made, owned, or affiliated with any parties.
GrabMart is an on-demand everyday delivery service as the users can gain all the essentials delivered within 30 minutes to their doors. A delivery application especially GrabMart is a prominent application nowadays as people can save their time since they are busy with their tons of workload. Besides, this GrabMart is widely used during pandemic COVID-19 where they can avoid from crowded places since they do not need to walk-in to get their essentials.
Research Method
Online Survey
We prepared an online survey using Google Form and distributed it to the GrabMart users in Malaysia and Indonesia consisting of people from different age and background. The purpose of this survey was to identify the aspect or element need to improve in GrabMart whether it is for current feature or it needs an additional feature for user’s better experience. Thus, there are a few questions had been asked which are:
1. The rate of satisfaction and helpfulness of the GrabMart.
2. The obstacles that often occur when using GrabMart
3. User’s suggestion/recommendation/opinion about GrabMart in order to improve its usability.
Quotes Directly from Users:
“Need to display more shops nearby and far so that users can choose”
“Delivery fees quite expensive”
“Add more promo”
“Can be filtered by place and delivery fees”
“Need various payment methods”
Problems
From the online survey that have been conducted, using the information provided gives a better chance to discover the root of the problem and how to solve it. Thus, there are three (3) problems that have been outlined:
1. Number of Shops
GrabMart offers limited number of shops. Besides, the shops only available within the area where the users do not have many options
2. Delivery Fees and Promotions
The delivery fees quite expensive and GrabMart offers least promotions to the users / strict terms and conditions of the promotion code.
3. Payment
GrabMart does not have various payment methods.
Proposed Solution
Additional Feature: Feature to Filter By
The GrabMart able to display a list of shops that are nearby or far from current location so that the users can have many choices and they can choose based on their preference. The list of shops will display with its details such as shop’s name, category, distance, ratings, delivery price, and tagging for the promotions, so that the users can get a quick information about the shops.
Since there are many shops, it is difficult for the users to look into the shops one by one. Thus, the feature filter by can helps the users to ease their searching process. The users can filter the shops by place (nearby / more than 10 km), delivery fees (free delivery), mode (delivery / self-pick-up), and promo (shops that offer promotions).
We found out that this feature actually very crucial to be implemented in the GrabMart Menu as it can save the user’s time and ease their searching process for their better experience.
Design Thinking Process
In this final project, we used design thinking process for the problem-solving approach. The process consists of five (5) stages which are Emphatize, Define, Ideate, Prototype and Test.
1.0 Emphatize
For the emphatize stage, we use Empathy Map which can be categorized based on what user says, thinks, does, and feels. The purpose in this phase is to understand the user needs, thoughts, emotions, and motivations.
2.0 Define
For the define stage, we use user persona, user scenarios, and customer journey map. The purpose in define stage is to create a problem statement as it is an essential part of design thinking project because it guides the team and focuses on a specific need or set of needs.
2.1 User Persona
The result from the survey suggested that there were several types of users with diverse needs. The accumulation of the different insights and common patterns that come from the users’ answer helped us to create two personas which are the manifestation of that data in a character.
2.2 User Scenarios
Next, we create stories to show how users might act to achieve a goal in a system. The purpose of this scenarios is to understand users’ motivations, needs, barriers, and more.
2.2 Customer Journey Map
The customer journey map is made in order to define the users’ experience with the GrabMart across all touchpoints starting from planning, searching, and checkout.
3.0 Ideate
For the ideate stage, we collect data, categorize idea and made a user flow and sitemap. The purpose is to come up with an effective solution based on the problems that have been defined. We looked for all kinds of solutions that can solve the problems in the previous stage. In this stage, there will be a discussion in a team and note all the solutions proposed. There are several basic principles that form the basis of the Ideate process. We exchange ideas about how to solve defined problems.
Brainstorming
Brainstorming is the process of finding ideas. Looking for as many solutions as possible, even if it’s out of your head.
Prioritize ideas
After getting an idea, then we collect the idea and put it into a table to be selected later when categorizing ideas. After one of the ideas is chosen by each person the most, then that idea will become a priority.
3.1. Collecting Data
In this section, we have problems that are collected from the online survey and group them into this table.
3.2 Categorize Idea
In this section, we categorize data that have been written by each member in the collecting data phase. Then, we categorize them into four categories which are shop/product, payment, promotion and delivery. Thus, the selected idea that have been decided is providing a solution which is displaying many available shops whether it is nearby or far from users’ current location and add a feature to filter by which will help the users to be able to filter them based on their preference.
3.3 User Flow
User flow will help developers to understand how the system works on applications used by users.
3.4 Sitemap
Sitemap is used to show how navigation should be structured, provide a structure upon which to begin estimates for development, and show the relationship between different pages.
Colour Palette
Colour is the most important part of a design. We found a lot of applications in the Google Play Store or App Store that are unsatisfactory to use. We think nature is the best example of getting colour and they have the most balanced colour combinations. To meet the need of creating colour palettes and testing them under different conditions, we came up with the Painter concept.
The initial result is to draft a colour palette, test it, refine it, and share it.
In this section, we chose green, maintaining the current colour used by Grab application. The green colour symbolize nature, life, spring, hope and relaxation. A green colour palette is fitting for an application that promotes food. The darker colours are representative of the company’s corporate outlook, a great balancing out the bright colours.
Typography
Typography as the craft of endowing human language with a durable visual form. Typography involves creating a complete, reusable typeface that allows you to make language visible. Poppins is a free Google font designed by Indian Type Foundry. It’s a well-balanced sans serif typeface that seems to complement the interface. This font is 100% free because we are free to use typeface with license for any purpose. And we chose this font as one type of fonts.
Component
The component is made for the button shape, photo shape and icons so that it will ease the designer to design in order to produce a consistent design.
Wireframes
The visual guide represents the skeletal framework for the GrabMart. It helped us to arrange the interface elements, focusing on its functionality. Besides, the simplicity of the wireframes allow us to quickly test the idea without diving into the details.
4.0 Prototype
4.1 Splash Screen & Sign In
4.2 Homepage
4.3 GrabMart Menu
4.4 Categories
4.5 Recommended Shop
4.6 More Stores — feature to filter applied
Note: due to the time constraints, we just only apply the filter same as in the picture above
4.7 Items in The Shop
4.8 Payment
5.0 Testing
In the last phase, we conducted a testing through Maze. The Maze report present as blueprint for our design review. There are 10 blocks altogether and 17 testers had tested our prototype. The usability score shows 80% for its usability.
Conclusion
Finally we finish this final project, implementing the solutions based on the problems. Besides, we also able to improvise the design, colour and icons so that it looks more attractive. We are happy working together, Malaysia and Indonesia team members, completing this final project. An appreciation for the team members for the hard work and our mentor for guiding us from the beginning until the end. In fact, the journey completing this final project gives us knowledge and experience being as a UI/UX Designer.
“Talent wins games, but teamwork and intelligence win championships” — Michael Jordan
Thank you for reading!
Group Members & Role
Project Manager: Aufa binti Abdullah
UI Designer: Firyal Nabila Zalfa
UI Designer: Wildah
UI Designer: Muhammad Faza Abdillah
UX Designer: Muhammad Khoirul Huda
UX Designer: Siti Fitri
Link (FIGMA): https://www.figma.com/file/TiA26Rwgs3vZ64wjf4WdwX/GrabMart?node-id=0%3A1