Case study: McDonald’s app redesign

McDonald’s is an American fast food company founded in 1940. It’s claimed to be the largest restaurant chain based on their revenue, serving over 69 million customers daily in over 100 countries. McDonald’s first restaurant in Indonesia was opened in 1991, located in Sarinah, Jakarta. Different from the majority of its other restaurants overseas, McDonald’s in Indonesia also sold fried chicken and rice.

Research Phase

Why McDonald’s?

I found it interesting that there are 2 different McDonald’s apps available. One is McDonald’s and the other is McDelivery Indonesia. This led me to download both apps and tried them myself.

Left: McDonald’s app, right: McDelivery Indonesia app.

These two apps do similar things — it allows you to browse their menu and to order deliveries. However, I noticed that McDonald’s seemed to focus more on redeemable coupons and deals. And I seemed to always run into problem while loading the menu screen. So I had no way of checking out the delivery system.

The McDelivery Indonesia, on the other hand, seemed to focus more on delivery, as the name itself suggest. And the following are some of the screens from home, menu page and the menu selection. I couldn’t finish the transaction, as my address was not supported by McDelivery. This meant that I couldn’t see the or experience the whole process of the delivery system. But from some of the reviews on AppStore, I was given some rough ideas on how it worked and what had made some user frustrated.

Some screens for McDonald’s app (left) and McDelivery app (right).

So, what does the AppStore say…?

Well, both apps don’t receive a stellar review on the AppStore. McDonald’s app received 3.5 stars of 5, while McDelivery received as low as 1.9 rating. So at this point, I’ve decided to take up McDelivery app for this project.

Further examinations of the reviews posted on the apps’ download page showed a number of users facing similar problems while using the app.

Two main occurrence I noticed:
1. Unreliable tracking. User couldn’t track deliveries real-time.
2. Deals & promo unredeemable. User were confused how to apply deals.

Some of the reviews found on AppStore.

Having gained these insights, I decided to get more information by interviewing people using both apps. Two interesting points mentioned:
1. Activation code. Long and complicated. Requires user to have an email.
2. Why the 2 different apps?

Any competitor apps?

I found both Grab and Gojek to be their best competitor (despite them being indirect). Their ease of use, be it in signing-up, ordering food and tracking their orders have earned both of these apps a place in a lot of their users’ heart. These could be used as benchmark to improve on McDonald’s current app.

Left: Grab App (with 4.5/5 stars), right: Gojek App (with 3.8/5 stars), taking second and first place respectively in ‘Travel’ category on AppStore.

The People

Based on the information gained from the research, I came up with some personas to help build empathy for our users.

Personas created to help building empathy.

What then seems to be the problem here?

“I had been waiting for my orders for more than 2 hours. The delivery status on the app said that it’s been delivered, but it never arrived.”

“I thought I had used the Gopay promo. Why is my order not discounted?”

“This verification is a hassle. I have to go to my email? And why do I have to sign-in multiple times? I’ll just order my food through another app.”

The Development

Re-design of app in lo-fi (left) and hi-fi (right).

I focused on our three problems in re-designing the app.

Problem Statement #1:
‘Unclear delivery status. User cannot check whether their order has been sent by the McDonald’s outlet of their choice, or if it got lost during transit.’

In addressing this, adding the ability to track where the deliveryman is at real-time, showing the estimated time of arrival would help confirm the position and status of our orders. By having chat or call feature, this gives user the ability to contact driver to check on the position of their order.

Real-time tracking (left) and in-app chat feature (right).

Problem Statement #2:
‘User doesn’t know or is unsure if the promo the chose has actually been applied.’

Allowing user to add vouchers or promo code during checkout can help confirm if the deal has been applied or not.

From left to right: Checkout screen — adding promo — promo details — promo applied.

Problem Statement #3:
‘User has to go to their email to get verification code. And the code is long and complicated.’

Having user go to their email first, to get verification code, copying it and pasting it back to the app takes longer time. In addition, the long and complex code made it hard for some users who needed to type in the code instead of copy-pasting it. Sending the code to user’s phone number (OTP) is a much faster and convenient way.

Verification by phone number, saving user time.

Afterword

This research is far from perfect. I haven’t gotten to do a more in-depth and detailed usability test after finishing current design. The whole process of doing this research has been interesting, and it was my first time doing the whole process alone. Definitely a new experience for me.

From doing this, I learned what I lacked and needed to polish, so that I could be a better researcher and designer. And I think, taking up these kinds of personal project from time to time would definitely help in sharpening my skills.

I hope this reading have been useful to you. And if there are some comments and advice on how I can improve myself, they’re most definitely welcomed! :)

Link to Figma:

Final:
https://www.figma.com/file/tqfPRhXtnFnYAJzegE8qGS/?node-id=128%3A99