A UX Case Study And Redesign Of The ® Mobile 

This article talks about a detailed documentation of a project done in General Assembly, Singapore (Disclaimer: The content and creator of this article is not affiliated with the organisation mentioned).

The case study covers Prototyping, UX Research (User Personas and Journey Map Creation), UI and Ix Design with Sketch. Feel free to reach out if you’ll like to chat more about this project, thanks for dropping by!

Loving it—Anywhere, Anytime.

In 1979, McDonald’s opened its first restaurant in Singapore at Liat Towers. Bringing in the iconic Big Mac® and other burgers that generations have enjoyed. For many of us, we grew up with McDonald’s as a luxury weekend meal, that ‘bribe’ our parents would use to motivate us for tests.

McDonald’s was known for food of constant quality that is served quickly and consistently across the globe. It was also innovative fast food chain, it was one of the first to introduce self-ordering kiosks in Singapore and burgers of localised flavours such as the McSpicy® and the Nasi Lemak burger.

Source: McDelivery Singapore

In 2010, McDelivery® was introduced — bringing the McDonald’s experience to Singaporeans — anywhere, anytime. A mobile app was even developed, making the ordering process truly ‘anywhere, anytime’.

But could the ordering experience on the app be better?

My team and I took up the challenge to find out if we could redesign the McDelivery® App and delight their users.

Our Challenge: Understand the users and reimagine the ordering experience in two weeks

The McDelivery® App launched a redesign in 2017, but the redesign has brought more flak than love. Even though it is #5 in the Food & Drink category on the Apple App Store, the app was given a low user rating of 1.9 stars. We were curious about what were the pain points of users with the app.

User Ratings on the Apple App Store

We had two weeks to sprint for this project and our high level goals were to:

  1. Understand the users of the app and uncover pain points and frustrations that led to the app’s low ratings.
  2. Conceptualise and design a hi-fidelity prototype of the app.
  3. Test the prototype with real users, reiterate on the prototype from user feedback.
  4. Present our findings and showcase prototype before a project panel.

My Role

My team comprised of three UX Designers—myself, Patrick and Benjamin and each of us played overlapping roles in the project.

I played the role of Project Manager and UX Researcher and collaborated with our team’s designer to conceptualise and design the app screens and led the design for our presentation deck.

We came up with a projected timeline for our sprint, and divided up our sprint into four phases — Discover, Define, Develop and Deliver—modelled after the UK Design Council’s ‘Double Diamond’ process.

The Discovery Phase

It was important for us to start our discovery phase to understand the pain points of the users with the current app.

Analysing The Current App

First we took a in-depth look at the current app. We did a app audit and even ordered a meal to understand the flow of app (and of course enjoy the freshly relaunched McGriddles burger).

App Audit

Through this process, we understood the current flow of the app and managed to identify usability issues and potential user pain points. But we would need to validate our assumptions and observations, as such we proceeded to carry out interviews and usability tests with the customers.

App Audit: We walked through the entire ordering process of the app

Usability Tests

We asked the customers to walk through the ordering process of the current app and observed their interactions with the app

We also invited customers to take the System Usability Scale (SUS) test, and the SUS scores for the current app was pretty dismal—58, which according to our grading key was an ‘F’.

User Interviews

We interviewed customers of different demographics to discover user behaviours, pain-points and usage trends with the current app and mapped out their needs for app.

User Interview in Progress
Affinity map of user needs from our interviews

From our user interviews, we narrowed down three key areas that users needed to be addressed in the app:

  1. No easy way for users to contact customer service
  2. Lack of burger customization options
  3. No clear way to track live delivery status in the app

The Define Phase

With all the data gathered from our research, we had to synthesize our findings to better define the project scope and problems we were to tackle.

User Personas

Using our research findings, we came up with different customer personas and mapped out our customers goals and pain-points — to build empathy for our customers.

Customer Journey Map

We also mapped out the journey of our personas using data from our research. The map helps us and our stakeholders to visualise and empathize with the experience and the emotional states of our personas as they use the app.

What’s the story, morning glory?

At the point, we are getting a clearer picture of the problems we were to tackle. So we came up with three key problem statements along with actual quotes from our interviews.

The Develop Phase

Now with the problem statements and research findings in hand, we jumped in to creating lo-hi wireframes to create our first prototype for testing.

Our Paper Prototype

We made it a point to test our design at every stage of the process, and learnt something new with each test that sharpened our prototype.

Testing our Lo-Fi Prototype

To grid or not to grid

One interesting crossroad we faced as we were designing the interface of the app was the presentation of the food menu. We were deciding between keeping the original ‘list layout’ or introducing a new ‘grid layout’.

Left: List Layout | Right: Grid Layout

We instinctively knew a grid layout was not only more space efficient but it also allow us to enlarge the photos of the burgers, hopefully making it more appetising to customer . But we weren’t sure, so we tested those assumptions with some customers.

We ran a test with the customers, showing both designs to the users and asked for their preferred layout. 6 out of 7 customers picked the ‘grid layout’, when asked why, they mentioned that:

“I feel I can see more items in a grid format”

“The images in a grid format look larger and more appealing to me”

Another reason why our customers picked the grid layout was the way they scanned the menu. We observed that customers looked for pictures of the burger of their choice rather than reading its title. The grid layout allowed them to scan the photos of the burgers faster than the list version, allowing the customers to find the burger of their choice faster.

The dilemma of cart placement

Another crossroad faced was the placement of the cart button, the original app placed the cart button at the top right corner, during one of our tests we found out that customers missed the cart button as they expected to find it at the navigation bar which is conventional for most e-commerce apps.

So we tested two prototypes with the cart buttons in different locations to see which button location fared better with customers. The test results were clear, users found the button at the navigation bar faster compared to when it was at the top.

The Deliver Phase

As our sprint comes to an end, we had to finalise our prototype and client presentation. It was time to deliver!

The Prototype

The Redesigned App | Designs in collaboration with Benjamin Ong and Patrick Yeo

Our redesigned app addresses the top three needs of our users:

  1. Need easy way for users to contact customer service
  2. Need for burger customization options
  3. Need a way to track live delivery status in the app

Solving Issue #1: Need easy way for users to contact customer service

To solve this issue, we came up with a ‘Contact Us’ page with quick access buttons for customers to flag order issues, which according to our research. the top two issues and enquiries users had were—late orders and wrong or missing items.

With one click, the issue is routed to our chat-bot. For late orders, the chat-bot will ping the delivery driver and give an updated delivery timing according the driver’s location and for orders that were more than 30 minutes late will get a free Apple Pie as our way of saying sorry to the customer.

Solving Issue #2: Need for burger customization options

We have brought back the customization option to the app with a major upgrade. Now you can customize your meal and burger visually and intuitively.

We also understand that customization increases the complexity of orders for the staff, we have taken note of this and have limited the amount of customization options through the use of ingredient pictures and only allowing a limited amount of cheese and bacon to be added. This way customers and staff needs are balanced.

Here’s a side by side comparison of the app screens. The screen on the left is the current app and the one on the right is our prototype:

Left: Current App | Right: Our Prototype

Solving Issue #3: Need a way to track live delivery status in the app

The current app’s way of presenting the order status is not intuitive and merely a change of a line of text.

We have redesigned the delivery status screen to show a progress bar, order details and a button for the customer to easily to contact customer service should there be any issues with the order.

Here’s a side by side comparison of the app screens. The screen on the left is the current app and the one on the right is our prototype:

Left: Current App | Right: Our Prototype

Inclusive Design

Accessibility and inclusive design is something that we don’t talk about enough in Singapore.

The core of UX and Human-Centered Design is designing with people in mind. Mads Soegaard from The Interaction Design Foundation (IDF) puts it this way:

A design is only useful if it’s accessible to the user: any user, anywhere, anytime. We often mistake the concept of accessibility as involving people with disabilities. However, we’re all disabled in many contexts and circumstances.

Source: IDF, Accessibility: Usability for all

In a Singapore-based study, 1 in 20 boys and 1 in 500 girls were found to have some form of colour vision deficiency (CVD) or commonly known as colour-blindness. (See research source here)

With this in mind, we made sure the our prototype had accessibility in mind. We used Stark (a Sketch plug-in that checks for accessibility) to check our designs for contrast and CVD accessibility concerns.

While we kept the McDonald’s branding strong through the use of its corporate colours throughout the prototype, we took steps to ensure our buttons were labeled clearly to reduce ambiguity and that the check-out process is clear for our customers.

After all, the app is meant to provide a quick and restful way for customers to order their McDonald’s meal.

Deuteranopia and Protanopia Simulation, notice how the button labels are labelled to reduce ambiguity

Our Redesign Impact?

So we tested our finalised prototype with our customers and used the System Usability Scale (SUS) with them once again.

The A-team assembled for one last usability test. Patrick is on the left, I’m in the middle and Benjamin is on the right. Couldn’t ask for a better team.

Guess what, the SUS scores for the redesigned prototype increased to an astounding 86, which according to our grading key was a ‘B’.

Next Steps

While this project is only a prototype, we believe that it is a viable redesign that McDonald should consider taking up (Hey McDonald’s! If you’re reading this, feel free to have a chat 😆).

As with every prototype, there is always room for improvement, here’s what we lined up if the project goes live.

In our development roadmap:

  • We will create an onboarding tour to show users what’s new in the app and to guide them through new features
  • We will be adding an animations to help users visualise app interactions (eg. ‘genie’ effect for add to cart)

Interested in interacting with our prototype? Play with it here: http://bit.ly/THENEWMCD

Here’s our presentation deck if you’re interested in it:


The McDelivery® App: Reimagined was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link


Please enter your comment!
Please enter your name here