Shopeefood UI/UX Research — Case Study
Intro
Hallo medium, I’m Nisa, UI/UX designer enthusiasm and I’m currently join Dibimbing.id bootcamp. Through this article, I will share the process and results of research on a simple case study of online food delivery applications in Indonesia, is Shopeefood. This article is one of the UX Research assignment I did in the bootcamp with my assignment group.
Background
Shopeefood is an online food delivery from the Shopee application. Shopeefood was established in Indonesia around 2020. Shopeefood is the latest feature of the Shopee application that offers a variety of online food delivery products. This feature can be found on the main page of the Shopee application. The Shopee application colors the ease of online shopping to users, namely in addition to being a marketplace, as well as online food delivery. This feature offers a wide variety of food and drinks such as Meatballs, Grilled Chicken, Martabak, and others.
This research aims to understand the user pain points, expectations, and journey experienced by users. The results of this research will be used to improve the user experience on ShopeeFood.
In this research, I am working with two classmates from the bootcamp, Aisyah and Aftor, to collect and analyze data. We are using specific methods to collect data, such as surveys, interviews, and observations.
Objective
Here are the objectives in this research:
- To find out user journey of Shopeefood users
- To find out user expectations of Shopeefood
- To find out user pain point of Shopeefood
Methodology
This research uses two methods :
- Screening survey : the initial survey process conducted to find out user demographics and find out active Shopeefood user to do the interview process.
- In deeth interview: The second stage of the process is used to dig deeper into information from users in using the Shopeefood feature.
Responden Criteria
- Shopeefood user and swiped in the past 8 mounth
- Nationwide
- Student and employee
- 19–35 y.o.
Conducting the Research
Information about the active user experience using the ShopeeFood feature is carried out by interviewing directly through the whattsapp application. We selected three respondents from different backgrounds.
Discussion Guidline
- Introduction and background user question
- User knowledge about Shopeefood
- User goals
- User ekspetation
Respondent Profile
Research Findings
The results of the interview are documented using a google sheet. This will greatly facilitate the process of creating affinity diagrams.
Affinity Diagram
Affinity diagrams are used to group the same ideas into a single topic. From the results of the interviews conducted, there is uniform information. Such uniform information can form a pattern from the user.
Users Behaviours when Using Shopee Apps
These behaviors can range from the initial decision to download the app, to the frequency of use and the actions taken within the app. Understanding these behaviors can help companies optimize the user experience and improve the app’s overall performance.
- Price: cheap, affordable
- Location: closest, most popular
- Rating: 4.5 stars
- Voucher: free shipping, promotion
Steps of users in searching for food on shopeefood
What Users Like About Shopee
- There are many attractive promotions such as free shipping, price discounts, and other interesting promotions that make users interested in buying food on Shopeefood. In addition, there are also many other attractive promotions held regularly, such as price discounts for certain products, price cuts when buying food in a certain quantity, and many more.
“seneng ya karena banyak promo, diskon-diskon, beda-beda promonya, gratis ongkir full bikin betah kalo pake Shopeefood”
2. Convenient payment process for users due to the various available payment methods, such as through Shopeepay, pay latter, or using digital payment apps such as mobile banking, COD, and others. Users can also choose to make payment at the nearest Indomaret or Alfamart if they do not have a card or do not want to use digital payment methods.
“proses pesennya mudah dan metode pembayarannya cukup bervariasi, jadi enak aja pake dipake buat beli makan”
3. Fast and efficient service in the food ordering process, with an easy ordering system. Some users feel satisfied with the service provided by ShopeeFood. However, there are also some users who are not satisfied with the service, especially in terms of late delivery or mistakes in ordering. Despite this, ShopeeFood continues to strive to improve service and provide a better experience for its users.
“proses pemesanannya cepat dan aman jadikan gak perlu khawatir makanannya ga nyampe ke lokasi”
What Users Dislike About Shopee (Pain Point)
- Some users say that the information provided in the food descriptions is too little and unclear, which makes them hesitant to purchase the food they want because there is not enough clear description about the composition of the food, the ingredients used, and the cooking method.
“tidak ada deskripsi untuk melihat komposisi makanannya, takutnya ada bahan yang bikin alergiku kambuh”
2. There is no facility for communication with the seller. In addition to the lack of sufficient food descriptions, some users complain that they can’t communicate with the seller.
“sulit untuk berkomunikasi dengan penjual terkadang lebih pilih app lain yang ada fitur chat sama penjualnya biar bisa tanya-tanya ke penjual”
3. UI appearance of food that is too empty. Some users say that when looking at the food menu there is empty space or space between the price and the check out button.
“saat liat menu makanan, tampilannya masih banyak ruang yang kosong contohnya saat klik makanan tertentu itu masih ada ruang kosong yang gak kepake”
4. Some users have complained about the lack of a button to add or reduce the order on the payment confirmation page. Users have to go back to the previous page to add or reduce the order, which makes the ordering process too complicated and time-consuming.
“waktu mau bayar itu tombol untuk nambahin atau ngurangin pesanan tidak ada, jadi harus balik ke menu sebelumnya itukan makan waktu buat loading dan gak praktis gitu”
5. Some users complained about having difficulty getting drivers when it rains. This is because many drivers are unwilling to deliver packages or food to their destination when the weather is bad, causing users to have difficulty ordering food or sending packages.
“kadang sulit menemukan driver saat hujan padahal lagi butuh banget karena malas keluar cari makan”
6. On the homepage, there is no list of food based on food categories such as food, snacks, drinks. On this page, food is only categorized based on promotions such as discounts, weekend promotions.
“saat cari makanan di halaman utama, saya tidak dapat menemukan kategori makanan jadi paling scroll ke bawah atau pake search bar aja”
User Persona
Custumer Journey Map
Competitor Analysis
Based on the interview, some users mentioned that in addition to using Shopeefood, they also use Gofood for food ordering. Therefore, we compared the features available on Gofood with those on Shopeefood.
Homepage
On the ShopeeFood homepage, there are more offers for promotions. However, these promotions are already categorized under the advertisement banner. Meanwhile, on Gofood, the placement of promotions is well organized and the homepage is not dominated by promotions. In addition, users are made easier with the presence of an attractive variety of culinary groups where the food has been neatly categorized.
Food menu page
- Gofood has complete information about the food description. There are several icons that help users such as sharing, reporting, and saving. And there is no empty space on the food menu page.
- On the Shopeefood food menu page, the description of the food is still very limited, making users hesitate to buy certain foods. On this page, there are not many icons that users can take advantage of, and there is a blank space between the price and check out.
Order Confirmation
- Gofood really spoils its users by providing options for turning orders into gifts and requesting utensils on the confirmation page. In addition, users are able to easily add or decrease the amount of food in a single page.
User Flow
The first step in designing a user interface is creating a user flow. User flow is the series of steps a user takes from start to finish, displayed as a map or diagram.
The steps taken by the user are: opening the Shopee app, selecting the Shopeefood feature, searching for desired food, and checking out. In the final step, the user can verify the delivery location, view order details, choose a payment method, and use a voucher if available.
In the new Shopeefood experience based on the obtained analysis, the new activities shown in orange are the food category, chat with seller, and additional orders. Additional orders are the situation where the user has checked out and still has some orders left.
Infromasi Arsitektur
Information architecture refers to the design of the user interface consisting of elements organized in relation to each other. The information architecture in this app includes the Shopeefood homepage, restaurant homepage, chat, food items, shopping cart, and payment confirmation.
Design System
I created a design system to make the design more consistent and efficient in the use of color, icons, and other elements. The orange color is taken from the Shopee brand color and other color combinations are from the color palette. For the use of illustrations, I used illustrations from ilustrationkit.com and images from unsplash. Both websites can be used for free for both personal and commercial purposes.
Wireframe
Before creating the mockup, I first made a wireframe to better visualize my ideas. This wireframe helps me to establish the page structure. Here are some of the wireframes I created.
Mockup
The completed wireframe was then added with color, images, and other elements to create a mockup. Here is the mock-up design for the redesign of Shopeefood after several stages of research analysis and ideation using Figma tools.
Homepage
In the Shopeefood homepage, I reduced the promotion category and added a food category. Users can easily find the food they want and are not too disturbed by promotional ads. This redesign can be a solution and will make the online shopping experience more enjoyable and efficient for the user.
Food menu page
Adding more detailed information to the food description and main composition of the food will allow the user to be more confident and satisfied when buying food. I also added a message icon so that users can communicate with the seller.
Order confirmation
I added a button to edit the order quantity, where the user can reduce or increase the number of their order. This is done so that the user no longer has to go back to the food menu page. This redesign addresses the user’s desire to have greater control over their orders and to make the purchasing process faster and more efficient.
Add Order
I have added a “add order” feature which is in a situation where the user has already checked out and has some remaining orders. The driver can receive these orders while on the way to the restaurant and it can only be done at the same restaurant as the original order. With this feature, it is expected that the user will not need to make an order from the beginning or order food through the driver.
Prototype
In the design thinking process, before reaching the final stage, the first step is prototyping. A prototype is a system that is created to validate the design before mass production and helps in problem-solving. To view the prototype results, it can be accessed below.
Usability Testing
The final step in the design thinking process is testing. In this case, the testing uses usability testing. Usability testing is the practice of testing how easy a design is to use with a group of representative users. I use usability testing because I want to get direct feedback from users and test the effectiveness of the design.
You can see a more complete usability testing report here:
Lesson Learned
What I learned in this research is that research must be done step by step starting from planning the research, conducting the research, creating user personas and customer journey from in-depth interview results. After conducting this research, I realized that the process of designing a good application requires a structured and well-organized research process. It is not only about making a design beautiful, but the design must also provide a solution to the existing problem. In addition, I also learned how important it is to work with a team in this research process. I hope that the results of this research can be a lesson for anyone who reads it.
I am waiting for my friends to provide feedback or suggestions. And you can visit my LinkedIn and Dribbble.
Appendix
Process design : https://www.figma.com/file/kd6WAnZSvPebvjBrGsRinP/Medium-case-study-shopeefood?node-id=0%3A1&t=l6cWLxZQmuDZHRbk-1
Affinity diagram : https://miro.com/app/board/uXjVPBsx6FY=/
