Case study: Food delivery app design

Google UX Design Certificate Project

Food is essential to our well-being. And for some of us, eating is more than just a way to stave off hunger. It’s a hobby. As a self-proclaimed foodie, I’m naturally drawn to topics that are food-related. So when it came to choosing my first project for the Google UX Design Certificate, I had to jump on this one.

This case study describes my process of creating a food delivery app for a restaurant from concept to the final design.

The Challenge

Amidst the hustle and bustle of today’s fast-paced environment, individuals struggle to find the time to cook at home. Some don’t even have the time to visit a restaurant. The challenge was to find a way for these individuals to order and receive food at their own convenience.

The Goal

My goal was to design a mobile app that lets users order their meals quickly and easily from Yummies— a hypothetical restaurant.

My Role

User Experience Designer responsible for the app’s design from concept to delivery.

My Design Process

I chose to use the lean UX Design framework for this project. By letting the validation of hypotheses guide my work, I could ensure that I was creating a product that truly meets the needs of people.

Lean UX Framework

Step 1: Understanding the user

User Interviews

The best way to truly understand the needs and motivations of the people I’m designing for is by hearing from them. So, I interviewed five (5) working adults aged between 18 and 65 years, who have some experience with ordering food online.

The participants’ responses can be summarised as follows:

• 5 out of the 5 participants said they are most likely to use a food ordering platform when they need a quick way to quench their hunger.
• 4 out of 5 participants said they do not like platforms that are difficult to use.
• 2 out of 5 participants prefer to pay for their food after delivery.
• 1 participant, who is not fluent in English, said they dislike apps that are text-heavy.

Competitive Analysis

Before jumping into the process of creating my solution, I checked out some popular food delivery apps. I interacted with the platforms and read their customer reviews. This helped me identify some drawbacks in the existing solutions and opportunities for a better user experience.

See Competitive Audit report here.

Pain Points

Four major pain points were identified from the foundational research phase:

• Time
• Ease of use
• Language barrier
• Accessibility

Pain points: time, ease of use, language barrier and accessibility.

User Personas

Based on the information gotten from the foundational research, I created a persona whose demographics, motivations, goals and frustrations represent the needs of the users.

Meet Ejiro…

Persona and corresponding problem statement

User Journey Map

Mapping Ejiro’s user journey revealed areas where we can make improvements in his journey for a better user experience.

Now we know the exact problems faced by our users. So, what next?

A goal statement was created to ensure a problem-solution fit.

Context of use

From my research, I learned that people are most likely to use a food ordering platform when they need a quick way to quench their hunger.

“You’re not you when you’re hungry!”

-Snickers ad

When we are hungry, our concentration level drops. Even the littlest tasks can seem daunting. Therefore, the goal was to create an intuitive design — one that lets the users complete their desired task with almost no mental effort.

Starting the design

User flow

To achieve my goal of creating an intuitive design, I mapped a user flow that prioritized recognition over recall. This was done by creating a path that is familiar to the users.

Visual representation of the steps a typical user will take to achieve their main goal.

Paper Wireframes

With the user flow mapped out, I then proceeded to sketch wireframes. Several iterations of each screen were drafted on paper to ensure that the elements that made it to the digital wireframes effectively addressed the user pain points.

For the home screen, I prioritized ease of use and a quick ordering process, to make the experience quick and stress-free for the users.

Several iterations of the home screen were sketched on paper. The stars were used to mark the elements to be used in the digital wireframes

Going digital

As the design proceeded to digital, I ensured that my designs were based on the feedback from my research. I created a digital version of the wireframes in Figma and proceeded to test it with users.

Usability Study (Round 1)

To get an early insight into the app’s usability before the introduction of visual elements, I recruited 5 participants to test the low-fidelity prototype.

By watching the participants interact with the app and hearing their thoughts, I was able to identify problem areas in the app’s design. The results were noted down and an affinity diagram was used to identify patterns.

See detailed Usability Study Report here.

The observations were noted down and an affinity diagram was used to group similar observations to form themes

Digital Wireframes

Based on the insights obtained from the usability study, I made some changes to the digital wireframes to improve usability.

View low-fidelity prototype here.

Digital wireframes of Yummies app after initial usability study

Refining the design

With the initial usability issues fixed, I proceeded to create mockups and a high fidelity prototype of the design.

Mockups

Usability Study (Round 2)

Another round of usability testing was conducted using the high fidelity prototype. By testing the design at this stage, I could observe an interaction that most closely resembles a real-life interaction with the final product.

Findings from the second round of usability studies

Changes made based on findings

Improved colour contrast ratio

A “Remember me” feature was added to make the process quicker for returning users.

Final Design

You can interact with the prototype here.

Straightforward, no-gimmick onboarding process to save time

Home screen

Simple menu screen. Details screen consists of food description, price, quantity, recommended sides (anticipating the user’s needs), ratings and reviews.

An easy ordering process with added shortcuts for returning users. Pay on delivery option included.

High-fidelity prototype of Yummies app

Style Guide

Style Guide for handing off the design to developers

Inclusive and Accessible design

My aim was to create a design that considers the full range of human diversity, with respect to ability, age, language and other forms of human difference. More importantly, I wanted a similar user experience for every user, regardless of their abilities. Here are some decisions I made to reflect this:

• Considering that some users of the app might not be able to read English, I tried not to rely too heavily on text: Images, colours and recognizable icons were strategically used to direct users to the appropriate actions.
• To ensure compatibility with assistive technology such as screen readers, I included image descriptions and used appropriate hierarchy and emphasis throughout the design.
• High contrasting colours were used to make it easy to differentiate between elements.
• A speak-to-search feature was included for quick and easy search.

Designed for real users

Although I only documented two usability studies, I was constantly testing the design with users and iterating it based on the feedback received. It took about 10 iterations to get to the final design.

I tested the final design with two (2) people with limited technical knowledge and they were able to complete the desired tasks without any assistance.

Takeaways & Next Steps

Takeaways

Testing a product with real users helps give a new perspective on things: Through my usability studies, I was reminded that each individual is unique. So the best way to learn about the usability of a product is by testing it with different people.

Next Steps

The next step would be to conduct another round of usability studies with a wider range of participants, to determine whether the current solution effectively addresses the users’ pain points.

Project Reviews

Peer reviews on this project from around the world.

Tools Used

• Figma
• Miro
• Gliffy
• Google Docs
• Google Spreadsheet
• Google Slides
• Google Meet (for interviews)

THE END

Thank you for reaching the end of this case study🤗. Please feel free to drop your comments and suggestions.

About the Designer

Hi there!👋

I’m Chinwe (pronounced chin-weh), a User Experience Designer, Writer and avid problem solver.

Five months ago, I made a decision to pursue a career in User Experience Design. This decision was fuelled by the desire to create easy-to-use designs that solve complex problems. I believe that a good design should be useful and accessible to every user regardless of their cognitive ability.

I did this project in partial fulfilment of the requirements for the Google UX Design Certificate. I am pleased to say that I have successfully completed 5 out of the 7 courses in the series with a cumulative average score of 99.7%.

My thoughts on the program?

I think the program is great for beginners looking to start a career in UX Design. The tutorials are well detailed and easy to follow. I 100% recommend it!

You can connect with me on LinkedIn, Behance or simply send me an e-mail (cuzegbu@gmail.com).