UI UX Design: Improving the Experience of Buying Food by Redesigning the ShopeeFood Feature

This is the last phase of my final project for UIUX Design Bootcamp at dibimbing.id

Introduction

Hi, I’m Denny. I am a UI/UX Design Enthusiast. I started learning UI/UX Design by joining dibimbing bootcamp. I have learned how to do UX processes from User Research to Usability Testing. This case study is a final project at my bootcamp.

Overview

ShopeeFood is the latest feature of the Shopee application that offers Food delivery service is appropriate by User request. I found several problems after I conducted a survey and interviewed several users regarding the lack of features in an application that triggered me to do this research. Therefore, I decided to conduct this research with the aim of knowing how the user experience while interacting with the ShopeeFood feature on the Shopee application.

Role: UI/UX Designer
Scope: User research, analyzing, user flow, information architecture, wireframing, mock-up, design system, prototyping, and usability testing.
Timeline: 1 month
Tools: Google form, Google Sheet, Zoom, & Figma

The Process

This study discusses improving the user experience when buying food at ShopeeFood by redesigning and adding several features. In creating this feature, we used a design framework.

Research

Objective

• To understand ShopeeFood user personas and other online food ordering apps

• To understand user behavior when using ShopeeFood features and other online food applications like Gofood and Grabfood

Problem

• Users find it difficult because at the food checkout section the user can’t use the voucher or can’t claim it there so the user has to come back just to claim the voucher

• Users cannot filter to determine the range when searching food

Methodology

• In this research, I used a qualitative methodology (In-Depth Interview)
• Analysis Competitive

Sample Specification

• 17–40 years old
• Have you ever used an online food ordering app
• ShopFood users

Key Information Areas

Contains what we want to explore more deeply in this research, this Key Information Area will be used as guidance for making research questions:
1. User profile
2. General behavior when using competitor application
3. General behavior when using ShopeeFood

Affinity Mapping

After the IDI was done, the insights from users are represented using an affinity diagram. Using the affinity diagram technique can help us group diverse insights so that they can form a topic based on similar verbatims.

User Persona

A user persona is a fictional character created to help us find the target users. This technique helps us to understand users and solve their problems.

Customer Journey Map

A Customer Journey Map is a user’s journey when interacting with our products. We were able to find a lot of user insights such as how users feel, points of difficulty, and opportunities that we can use to improve our products. Based on the results of IDI, users have pain points in doing flow when buying food at ShopeeFood

Disclaimer:
Because the majority of users interviewed used the shopeefood platform and only 3 used different platforms, the results of the interviews led to Shopeefood only to deepen users’ knowledge about shopeefood

Competitive Analysis

The analysis was carried out to define user needs in using an application, which from the results of the data I got after doing IDI, and summarized it in affinity mapping, of the five users having problems claiming vouchers when they want to order food at ShopeeFood, compared to other applications listed on the canvas, the vouchers have been claimed automatically or can be used directly

Ideate

Actionable Plan

Here I prioritize the tasks that I do where it is in accordance with the problems that exist after doing the research. I focus on the problem:

• Create and add Filtering Features
• Add a review/rating section in the column food on the home page
• Added voucher claim section on the checkout page
• Added and fixed food description

User Flow

User Flow is an important part of UX Design to describe the user while using the product. The following is the flow of the user when looking for food to the confirmation order section

Information Archiecture

Information architecture (IA) is organizing, structuring and labeling content for an effective way. The goal is to help users find information and complete tasks. The following is the user’s Information Architecture activities:

Prototype

Wireframe

Wireframe is a quick and easy way to translate the design from a sketch with minimum effort and less time-consuming. I manage to make two wireframe which is Lo-Fi and Hi-Fi

Design System

By creating a design system, it can make it easier for me to continue my process to the mockup and prototype stage, where the design system that I created is only what I need for the mockup that I will make later.

Mockup

Home Page — Find Food/Resto

After creating the wireframe, it’s time to create a mockup with a high fidelity design starting from coloring, typography inserts, illustrations, and styles. There are some adjustments in mockup. Here’s the ShopeeFood redesign mockup.

Resto Page — Voucher Claim during Checkout

With some additions and redesigns on the restaurant and description page, it can certainly make it easier for users to buy food. On the order confirmation page there is a voucher section where I added that I can claim the voucher there without having to return to claim the voucher

Prototype

To see prototype click here!

Test

Usability Testing

This stage is a time for us to test our prototype for the user. Usability testing is a technique used in user-centred design to evaluate a proposed solution or product by testing it with actual or potential users. UT helps determine whether or not the design that has been created can help users comply with their tasks.

UT this time I use Figma where I give a scenario for the user and the user will try it themselves. You could say I use the Aloud thinking method where we will ask the user to express what they think in words when they use the application so that we know how the user is doing. interaction, where the user feels confused or vice versa, what needs to be improved, and so on.

Here is the Usability Testing implementation report, Click here to see UT Report!

Lesson Learned

The first thing that I realized is that planning & preparation before starting research are very important. I find myself really struggling because the IDI question is too specific and not general, it makes me really learn that we need to think about the research that was planning to do really carefully before actually doing the research.

I also learned how to open my mind to all the possible solutions to solve users’ problems. I also found and realized that I need to improve my skill in designing the idea. I hope from this final project I have improved my skill how in understanding the user, their exact needs, and pain points.

That’s all about my case study of Improving the Experience of Buying Food by Redesigning the ShopeeFood Feature, I hope you take a good experience from this case study and do not hesitate to leave your feedback to me.

Thank you for reading this case study to the end. please connect with me on Linkedin