UI/UX Redesign Cases Study — McDelivery Mobile App (english version)

Disclaimer: This is my first project and a personal project, I happen to be taking part in the Bootcamp at dibimbing.id so I hone my skills while the boot camp is running.

Introduction

Hello! My name is Khoirul Syarif. Recently I have a new interest in learning, namely UI / UX Design. I am a Fresh Graduate at a private university in Karawang Regency.

Long story short, I participated in the Bootcamp held by dibimbing.id. I learned a lot after participating in this Bootcamp, I am very happy and enthusiastic because I want to find a lot of knowledge and learn from experienced mentors.

In this case study, I will discuss the McDelivery application, the McDelivery application is a food order application made specifically for ordering McDonald’s food.

In making a product, we need a framework to produce a suitable product. This time I will use a design thinking framework. Consists of empathy, define, ideation, prototype, and test.

Design Thinking

Hypothesis

In pandemic conditions like this, people tend to buy fast food using online ordering applications provided by these fast-food restaurants. The McDelivery application is an application for ordering food at McDonald’s restaurants, and I did research and read feedback reviews on the Google PlayStore, many users criticized this application, such as the difficulty of changing addresses, the difficulty of tracking orders, and others, I also agree with the feedback review.

The following are the results of my tests:
1. New users do not find a login form when they first use the application
2. user is forced to save the address manually before viewing the menu
3. Add menu to cart by reloading the page
4. Inaccurate and bad tracking
5. There is no user review feature

Objective

My goal is to find out or explore the motivation/pain points. We try to get into a specific problem and find out the root cause. From my hypothesis above, I challenge myself to improve in terms of design and features. Before I do that, there are a few things that I need, namely;

1. Explore further why users use the McDelivery application
2. Understand user behavior when using the McDelivery application
3. To test the hypothesis and back up the hypothesis with the data.
4. Look for the user’s Pain Points in using the McDelivery application
5. Create a solution to solve the problem
6. Create design solutions and validate.

Stage 1 — Empathise

At this stage, we will find out the user’s pain point through the Feedback on the Google Playstore McDelivery application. after I collected some feedback from Google Playstore then I grouped it into groups as below:

Usability Testing
I assign tasks to 3 users. “To buy the same menu in the McDelivery application”. In this assignment, I want to see the behavior of each audience in the ordering process and want to know their feelings and thoughts when using the McDelivery application.

Key Findings

• Storing addresses: Users need more effort to save addresses on the MCD app because they have to type manually, before ordering
• To just see the menu the user must first save the address.
• New users find it difficult to find the login button because when a new user first opens the app, it is not immediately directed to the login/registration form
• Adding a menu to the cart, users must get a loading page if they want to add another menu to their cart
• When in the basket menu the user cannot add more menus other than having to leave the basket.

There are several ways to find out what the problem is. This can be done using an interview or a survey. Because before I found pain points in Google Playstore feedback, and I wanted to know more deeply, finally I did additional research, namely the Interview method, I used the Interview method for 3 people who had used the McDelivery application. Before conducting the interview, I also had to compile a bunch of questions to explore the real problems faced by users of the McDelivery application.

User Interview
Because previously I had found pain points in Google Playstore feedback, and I wanted to know more deeply, finally I did additional research, namely the IDI method, I used the IDI method for 3 people who had used the McDelivery application (1 new user and 2 old users). Before doing IDI, I also had to compile a bunch of questions to explore the real problems faced by users of the McDelivery application.

• Why use the McDelivery app?
• How was your experience using the McDelivery app?
• What pain points do you feel when using the McDelivery app?
• What are the factors that make them use the McDelivery app?
• What do you expect as a new user?

Stage 2 — Define

Problem Domain

From the Pain points, I got on the feedback review and IDI. I narrow it down to 4 problems because this problem is very much found by users when using the application.

Problem Domain

Affinity Mapping
After collecting data from the usability testing process and interviews, I began to outline the problems and complaints each user had. Then groups the user’s problem points and categorizes them according to similar problems via affinity mapping. Post-it Green represents user comparisons, Blue represents the problem the user is facing and Purple represents what the user is saying.

Affinity Map

From the insights I got, then we made a Design mandate. Design Mandates are ideas to solve problems from insight. We don’t have to solve everything, but we can also choose and prioritize what can be done. And this is the Mandate Design from some of the insights above:

1. Makes food tracking easier
2. Promo is no longer via email, but directly in the application
3. Set the address according to Maps
4. Login and Registration is made easier and more attractive
5. Make OnBoarding

User Persona
Personas describe the average user, their demographics, behavior, goals, pain points, and frustrations. This helps me to view the end-to-end experience from a broad perspective.

Job Stories
I also use the Job Story Framework to create job statements based on user interviews to better understand their motivations, situations, and results using McDelivery.

Job Stories

Define Problem

1. The registration and login process is not prioritized and confusing
2. Storing addresses requires more effort and difficulty
3. Tracking Unclear addresses
4. Expired promotions
5. Layout Is Old

Stage 3 — Ideate

Wireframe

High-Fidelity

Stage 4 — Prototype

At this stage we will do 2 main things:
1. User Interface
2. Prototype & Interaction

User Interface

Prototypes & Interactions

I prototyped with Figma. Prototyping at Figma is very easy and great. The results are visible to anyone with the prototype sharing link.
Click the link below to view the prototype and interactions.
Prototype link

Stage 5 — Test

Usability Testing (UT)

UT is useful for testing whether our application is, usually in prototype form. This helps to validate our ideation results, whether it’s okay or not. UT functions to measure the success during validation is to see how the user can perform a given task without significant difficulty.

Feedback from Participant

1. The application is very easy and simple to use, the stages are quite clear and it doesn’t take much time.
2. Saving an address is easy because it only uses maps
3. There are outlets stored when ordering TakeAway
4. Promotion Clear

From the results of the validation that has been done, the design made makes it easy for users. But I still have a lot to develop and improve in terms of UX and UI.

Thank you for reading this case study, hope it is useful and adds insight. If you have any responses, you can write them in the comments below so that I can improve myself even better. I really appreciate 1 applause from you.

If you want to see more of my work you can visit my Dribbble You can visit my LinkedIn profile to connect with me!