UX Case Study: Designing a Food Delivery App

A Google UX Design Certificate Project

Chinwe Uzegbu
Muzli - Design Inspiration

--

A quick and easy way to order your meals

Yummies is a food delivery mobile app created for a hypothetical restaurant that provides its customers with good hearty meals, snacks, and drinks.

The Problem

People are pressed for time and often struggle to make out time to cook or sit down for a nice meal at a restaurant. As a User Experience designer, the challenge here was to find a unique solution that helps these people get their meals quickly and easily.

The Goal

My goal was to design an accessible and inclusive mobile app that lets users order meals from Yummies Restaurant quickly and easily at their own convenience.

My Design Process

Understanding the User

I conducted a competitive analysis and interviewed five people who have some experience with ordering food via online platforms, to truly understand the needs, behaviours, and motivations of the users I’m designing for.

My research identified four (4) pain points:

  • Accessibility
  • Language barrier
  • Ease of use
  • Time

Creating the solution

As part of the ideation process, I mapped out a user flow to create a visual representation of the steps a user would take to reach their end goal. This also helped identify all the screens to be included in the design.

User flow

Paper wireframes

With an idea of all the necessary screens, I put pen to paper and sketched several iterations of each screen.

To make the experience fast and stress-free for the users, I prioritised ease of use and a quick ordering process while sketching.

Several iterations of the home screen were sketched on paper

Going digital

I then proceeded to create a digital version of the screens in Figma.

Usability Testing

“It doesn’t matter how good a product is if, in the end, nobody uses it”.

- Don Norman (The Design of Everyday Things)

My aim was to design a product that people can actually use. Therefore, usability testing was one of the most important parts of my design process. I conducted two (2) rounds of usability studies. I was also constantly testing the product with friends and colleagues to identify seemingly small usability issues that might affect the user experience

Usability study (Round 1):

For the first round of usability studies, I connected the screens of the lo-fi digital wireframes to create a low-fidelity prototype. This prototype was then tested with five participants, including one with limited technical skills.

For details of the usability study and findings, you can view the usability study report here

Updated digital wireframes

Usability study (Round 2)

For the second round of usability studies, I used a high-fidelity prototype of the design.

High-fidelity mockups

I tested the design at this stage to observe an interaction with the app that most closely resembles a real-life interaction with the final product.

Again, I recruited five participants for the study. This time, I included one participant with low vision so as to learn how the colours in the app might affect accessibility.

There were two main usability issues identified:

  • The contrast ratio is not high enough for users with low vision
  • There are no considerations in place for returning users

The following changes were made the fix them:

  • I darkened the accent colour to improve the colour contrast ratio
  • I added a “remember me” feature so that returning users can skip the onboarding process.

Final design

View the high-fidelity 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.

Accessibility & inclusion considerations

  1. I used sufficiently contrasting colours to ensure that the app’s content can be read by everyone.
  2. I used images with descriptive text, appropriate hierarchy & emphasis to aid users with screen readers.
  3. I used images and easily recognizable icons across the design to provide visual context.

For a more detailed description of my design process, you can view the case study here.

Special thanks to Sonya Lewis (UX Researcher, accessibility advocate and mentor on adplist.org) who reached out to me after coming across this case study on LinkedIn, and thought it stood out amongst other case studies because it focuses on accessibility. She was kind enough to offer expert advice on how to “put my best foot forward” while presenting my work.

Thank you for reading!🤗

Wanna get in touch? You can send me a mail via cuzegbu@gmail.com or connect with me on LinkedIn,

--

--

UX Writer/Designer. I geek out on UX concepts, so you don't have to. Reach me:📩cuzegbu@gmail.com