“Food Cart” Feature for GoFood — UI/UX Design Case Study
Introduction
Hello! 😊 My name is Annaya Putri Prakarsa, a fresh graduate who is fascinated and eager to learn about UI UX Design. Currently, I’m participating in a UI/UX Design Bootcamp that was held by Dibimbing.id. This UX Research Project: GoFood Case Study is one of the projects from the boot camp.
Overview
GoFood is one of the food delivery services in Indonesia. It is one of many services that is provided by Gojek. In this case study, my team and I are intended to gain information towards user behavior, user pain points, user needs, user expectations, and user perspective towards GoFood and other similar apps. After we had the information, we can decide which problem is the most urgent so we can improve the user interface and user experience in GoFood so that hopefully can increase user retention.
Role: UI/UX Designer
Scope: User Research, analyzing, user flow, information architecture, wireframing, mock-up, design system, prototyping, and usability testing.
Timeline: 12 weeks
Tools: Miro,Figma, FigJam, Google Slides, Google Meet.
The Process
I used the Design Thinking method to conduct this case study, which includes Empathize, Define, Ideate, Prototype, and Test.
1. Empathize
In this first stage of Design Thinking, we want to be sympathetic towards GoFood users, so we can really understand their point of view. After we are able to empathize with the users, we expect we would get the insights on what are their pain points or perception in regard to GoFood. There are 2 things that we did in this process, Research Plan and Conducting Research
I. Research Plan:
a. Background
Since the pandemic hit in 2020, online food delivery services are at their peak in Indonesia. One of them is GoFood, a locally made online food delivering service that has been around since 2015. The objective of this research are:
- Understand the users’ motivation in choosing the GoFood app
- Knowing the pain points that are faced by users while using the GoFood app
- Understand what features are needed by the users while using the GoFood app
- Understand users’ expectations towards GoFood app
- Knowing users’ perception of the GoFood app
- Knowing users’ consideration and comparison among GoFood competitors, specifically GrabFood and ShopeeFood.
b. Methodology
We used In-depth Interview. We were able to gauge user emotions and feedback toward current GoFood and other similar apps during the interview.
c. Sample Specification
- Active user who ordered food using GoFood minimum 10 times for the last month
- Nationwide
- Female/Male
- 18–55 years old
- Have used other similar apps such as Shopee Food and Grabfood.
d. Key Information Areas
Key information areas are the highlights of the topics that we want to explore in this research, also used to generate questions for the interview. Those key information areas are users’ general behavior on using GoFood, broken down into these following points:
- Motivation for using GoFood
- Overall experience in using GoFood
- Users’ needs while using GoFood
- GoFood’s superior feature compared to other apps
- Users’ expectations while using GoFood
- Pain points while using GoFood
II. Conducting Research
After planning the research, we interview the users to gain insights. We collect the data within 1 week and interviewed 7 GoFood users.
2. Define
We want to define the problem from data we collected by using Affinity Diagram to categorize opinions based on each point of our research objectives, and make it easier to see the data when it is categorized.
Problems or the main pain points that users faced based on Affinity Diagram are:
a. Didn’t have a “one-time order” feature from different restaurants
Users are struggling to order food from different restaurants that are close to each other. They suggest that adding a feature of one-time order from different restaurants would help users to buy food effectively and hopefully lead to budget-saving because ordering foods with 1 driver only.
b. The rating and review of each food should be in order, from lowest to highest to make it easier for users to choose
According to respondents, GoFood should provide a list of ratings for each tenant that are reviewed by customers to increase the credibility of GoFood tenants' ratings. Also, by adding an exact number of how many customers had tried foods from a certain restaurant, would give an idea of how the majority of customers’ perception towards a restaurant.
c. More attractive voucher discount advertisement
Only 3 respondents claimed that the promotion of GoFood was helpful and easy to apply, but other respondents complained that the promotion seems unattractive compared to other apps. GoFood should add more enthralling discount voucher advertisements.
Limitations
- The design of the mockup and prototype is limited to the making of feature for one-time order or multiple orders for 1 driver
- For pain points other than number 1 can not be carried out due to limited time and sources.
3. Ideate
User Flow
User flow is useful to show overall steps of using the product. In this user flow will be shown of how users do when they want to order food.
Information Architecture
Information architecture is a method that is used to document flow, contents and design requirements for an app/website. Information architecture for GoFood each ordering flow is as follows.
Wireframe
Wireframe is the first step of designing but without the detailed colors, styling, and animation. The purpose of making a wireframe is to get a full idea of how the layout or the framework would look like, before getting into mock-up design. Following picture is the wireframe of GoFood ordering flows until inserting foods in the “Food Cart” feature.
Design System
Design system is important so the design process in the future doesn’t have to start from totally zero. Frequently and consistently used components such as iconography, buttons, various font styles & sizes, colors, and even UI kit/visual kit can be accessed from the design system. It’ll make the design process more time-effective and all designers have the same perspective in an ongoing project. For GoFood, here are the design system.
Mock-Up
After information architecture and wireframe, we move on to designing mock-up, a high-fidelity version that already includes colors, complete component style, and overall design presentation. Here is GoFood mock-up plus the Food Cart feature.
4. Prototype
After all the process of making the design, it’s time to really check the practical flow by using the prototype. A prototype is used to get a real experience when using the app. The Prototype can be accessed through this link GoFood — Food Cart Prototype.
5. Testing
Usability Testing (UT)
This is the last step of design thinking, testing. Usability testing needs to be done to get a full comprehension of what users felt while using the app at their own pace. The good or bad app can be determined by how easy they do the task and how user-friendly the app is. The task that is given for the users is through a scenario to order food like they usually do in GoFood.
Summary Insights of the UT
After doing the usability test with the scenario, there are no complaints and all 6 users can carry out the test smoothly. The improvement lies in the design.
- The Food Cart button should be added from the Homepage GoFood, so it’s traceable if the users go back to the GoFood homepage and change items that they put in the Food Cart.
- The payment summary is a bit wordy and can cause burden for the users to read the overall price details in it.
- The “add to cart” and “Food Cart” icon is too similar (same color), and the only thing that differentiates them is just the + logo for the “add to cart” icon.
The usability testing report can be accessed here Usability Testing Report — GoFood: Food Cart Feature, contains designs before and after UT.
Lesson Learned
The process of finishing this case study requires a lot of understanding of what users needs. Being sympathetic plays a big role in order to really seek what are the problems that they faced.
I had so much fun while doing this process, it challenges me to learn more and constantly revise the work that I’ve done. Of course, this case study is not perfect, and if you have any feedback please leave them in the comment section. I would gladly improve and develop my knowledge so in the future, I could come up with better designs and case study reports.
