Categories
Case Studies

Designing a food delivery app — a UX case study

View the original post

Designing a food delivery app — a UX case study

Background image credit: Unsplash

Amidst the hustle and bustle of today’s fast-paced society, individuals struggle to find the time to cook at home.

Dining out, which used to be an easy alternative to cooking, has now become a challenge due to the restrictions placed on restaurants to curb the ongoing COVID-19 pandemic. Food businesses are increasingly turning to digital tools to help with the delivery of food.

This case study describes my process of designing a food delivery app for Yummies — a fast-growing restaurant in Warri, Nigeria.

The Challenge

The target users of Yummies are working-class adults based in Warri who do not have the time to prepare their meals or visit a restaurant.

The Goal

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

My Role

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

My Design Process

I used the Lean UX framework for this project. By letting the validation of hypotheses guide my work, I could ensure that I was creating a product that people want and need.

Lean UX Framework

Understanding the user

“The only thing I know is that I know nothing”.

– Socrates

To get the most out of my research, I approached it with the notion that I know nothing about what the intended users of the app want or need. This helped eliminate all biases that could skew the research data.

I conducted foundational research to better understand the needs and motivations of the people I’m designing for.

Primary Research

I interviewed five (5) working-class adults aged between 18 and 65 years, who:

  • Live/work within a reasonable distance from Yummies restaurant.
  • Have some experience with ordering food online.

Participants were asked the following questions:

  1. Can you tell me about your weekly schedule and how you plan your meals?
  2. How often do you use online platforms to order meals from restaurants; what is the motivation/reason?
  3. What do you like/dislike about the food ordering platforms you’ve used?
  4. What do you think can be done to fix the things you dislike?

Their 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 complex.
  • 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.

Secondary Research: Competitive Analysis

Before jumping into the process of creating my solution, I checked out some food delivery apps operating around Yummies’ location. 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.

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

User Personas

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

Personas and their corresponding problem statements.

User Journey Map

Mapping the personas’ user journey revealed areas where we can make improvements in their journey for a better user experience.

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

Goal statement

We created a goal statement to ensure that we were solving problems relevant to the users.

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

Creating a user flow diagram helped me visualize the path the users would take to complete their desired tasks.

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

Visual representation of the steps required to achieve users’ main goal.

Paper Wireframes

I drafted several iterations of each screen 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)

Five users were recruited to test the low-fidelity prototype. This was done to get an early insight into the app’s usability before the introduction of visual elements.

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
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.

https://medium.com/media/cc2001dc2ed68b56a5c82afceb23e3e9/href

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 very much for reaching the end of this case study🤗. I hope you enjoyed it. If you did, please give me a clap (or 2, or 5…maybe 50?). Feedback and comments will be highly appreciated too.

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, or simply send me an e-mail (cuzegbu@gmail.com).


Designing a food delivery app — a UX case study was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.