Project Takeout: A Food Takeout App Case Study

A Google UX Design Professional Certificate project

Duration

January–April 2022 (3 months)

Role

UX Designer

What is done

Research, wireframing, prototyping, and testing

Background

Where food is made just for you.
That’s what make us special.

Project Takeout is a fictional restaurant chain located in Jakarta that caters to office workers and people on-the-go. They only take pickup orders (no sit-in) to save rent space and cost. Currently, customers can only see their menu and order meals in the restaurant, and they have to queue to order any food there.

Initially, this method served their customers just fine. But, as the business grew rapidly and expanded into many offices and malls, it became apparent that this method of doing food business won’t be sustainable for long. Customers pour into the restaurant. Queues started to become unmanageable and annoying. Dissatisfaction of the long wait has gone through the roof. Clearly, something needs to be done to solve this.

The stakeholder noticed this problem. They determined that the eliminating the queues is the main goal. The hypothesis was made: Removing the need for customers to queue and order meals will make the customer experience better.

Key questions

The most important question:

Why do we need to make this project?

What will the product be and who is it for?

What are the primary needs of our customers?

Who are our competitors and how can we stand out?

What are the challenges that will be faced by this project?

Research

This step consists of user interview and competitor analysis that results in the creation of persona, storyboard, and user journey.

User interview

As a starting point, I created this hypothesis that needs to be explored:

Removing the need for customers to queue and order meals will make the customer experience better.

Is this hypothesis really true, though? To find out, I conducted interviews with several office workers who have short lunch breaks and have limited time to order food. Then, I created a persona based on them to understand the users I’m designing for and their needs.

This user group confirmed the initial hypothesis, but research also revealed that queuing time was not the only factor limiting users to order from Project Takeout.

Research insights

Time restrictions

Office workers are too busy to spend time waiting in line just to order food

Skip the line

There’s no way to preorder food to takeout to skip queueing

Menu hard to read

The unexpected insight: the menu behind the counter can be hard to see from afar when waiting in line

Persona

Persona of Kusuma, an office worker who orders food at Project Takeout
Persona of Kusuma, an office worker who orders food at Project Takeout

The persona is created to represent the participants that are interviewed. After that, I tried to imagine what they will do when we gave them our solution:

User journey of our persona, kusuma
Our persona’s user journey to pick up food.
Storyboard of our persona, kusuma
The big picture storyboard of our persona (Please don’t mind the “high quality” sketch.)

The storyboard shows that the solution is an app made for mobile devices. Why is that? It’s because of…

Competition

The competition for this business is the big startups that also offers food order and pickup service. They are divided into 2 groups:

Direct competitors

Direct competitors of Project Takeout logos

The direct competitors of Project Takeout are in the same business with very similar business model. Most of them provides a mobile app to see the menu, order and do food takeout, and keep track of loyalty points. Dailybox and Box & Co doesn’t provide pickup services.

The biggest flaw, however, is that their apps can be overwhelming to some people. One participant even said that they prefer not to use them and just wait in line instead. Accessibility is also an issue: some of the apps even have text below 12pt — that is too small for mobile users to read! This is important to note, since our persona has vision impairment and needs glasses.

An example of competitor's app that have unreadable text size
Can you see what category I’m looking at?

Indirect competitors

Indirect competitors of Project Takeout logos

The indirect competitors of Project Takeout provides food pickup service, but they are not associated with a specific restaurant. Instead, you can order from many restaurants in their app. While this is a very compelling offer to their customers, it lacks extensive food customization and tailoring ability that Project Takeout is always known for.

And with the opportunities found, competitors audited, and the goal set—design something for Project Takeout that allows their customers to see the menu and preorder their meals and skip the line, we can move on to the next step.

Wireframe

The sketch started on paper, then it is designed digitally using Figma. The design is verified using usability testing and iterated once.

Early wireframes

Hand-drawn Project Takeout wireframe
The very first draft of the app wireframe.
Early digital wireframe
The first draft of the app made in Figma.
Highlights of wireframe
The highlight of the wireframe goals made in Figma.

First usability testing

This activity is done using moderated remote usability study with 5 testers, 18-35 years old, and lives in urban areas. Each session lasts 10-20 minutes and done without any additional tools.

First usability test insights

Use QR to confirm

3/5 testers prefer using QR Code instead of PIN to confirm their order

Improve checkout

Simplify the checkout experience, deemphasize scheduling function that is rarely used

Simplify personalization

2/5 testers said that food preferences and dietary restrictions personalization should be simplified

First iteration

Improved Project Takeout wireframe
The improved wireframe of the app.

Here’s the highlight of the changes made in this iteration:

Project Takeout Lo-fi Digital Improvement Highlight (2)
Project Takeout Lo-fi Digital Improvement Highlight (3)
Project Takeout Lo-fi Digital Improvement Highlight (4)
Project Takeout Lo-fi Digital Improvement Highlight (5)
Project Takeout Lo-fi Digital Improvement Highlight (1)

With the iteration done, we can move on to making the high-fidelity prototype with these things in mind:

Using contrast checker extension for Figma to make sure it follows WCAG (Web Content Accessibility Guidelines) 2 standard

Choosing a typeface that is clean and easy to read

Avoid use of image-based text

Use at least 12px font size

Using a consistent terminology throughout the app

Prototype

The prototype is an Android-based app and used Material Design 3 that was introduced in Android 12 as the design guideline.

Early prototype

First Project Takeout prototype
The first prototype of the app.
Project Takeout Hi-fi Digital Improvement Highlight (2)
Project Takeout Hi-fi Digital Improvement Highlight (3)
Project Takeout Hi-fi Digital Improvement Highlight (1)

Second usability testing

This activity is also done using moderated remote usability study with 5 testers, 18-35 years old, and lives in urban areas, now using Maze and Google Forms as the data capture tool. Each session lasts 20-40 minutes.

Overall, the results are promising. The average time on task is less than 10 seconds and the success rate of each task is 100%. The calculated Net Promoter Score (NPS) is 80 and the System Usability Score (SUS) is 82.5. It can be said that the app has gained Project Takeout customers’ trust and have met their needs and wants.

“This app feels polished, looks professionally-made and comparable to world-class apps such as UberEats and GrubHub. I love it.”

A participant’s impression on Project Takeout app

But, there are some insights that is captured during this activity. The insights are shown below:

Second usability test insights

Add button to see all menus in homepage

2/5 testers takes a long time to figure out how to access the full menu from the homepage

Include additional notes

2/5 testers said it is better if they can add notes in the food customization process

Order details in confirmation screen

Before confirming pickup, there should be a way to see what meals are actually being ordered

Final prototype

The prototype is finalized with the feedback that are captured before.

Style guide

The overall design choice of this app is intended to evoke professionalism and simplicity. Big, bold, geometric Outfit for heading and the humanist, ever-popular Lato as the body gives the app presence and clean subtlety.

The colors are also very muted—almost black and white with occasional hints of color and shades of gray. This is intended so the content (especially the gorgeous food photos) can be the central focus of the app.

Style Guide

Conclusion

Rethink the way we order food

As the COVID-19 pandemic subsides and people started to get back to offices, food pickup market will be an interesting business opportunity to overcome. This case study shows that ordering food at a restaurant, something we are familiar with, can still be improved in a number of ways.

I thought that creating a pickup-only food ordering app should be a trivial process, because I can simply imitate the competitions. Turns out through the entire design process, I managed to find out niches that can be developed with the help of participants who are willing to tell their stories and give honest feedback to improve the app.

Thank you for reading this case study. I hope you enjoy it!

To connect with me, simply write your feedback in the contact page.