Project 2 (Google UX Design Certificate)

CASE STUDY: Food Delivery Website

Project overview

Website Mockups

Product

Foodelli is a food delivery website designed to help people with disabilities order food from restaurants easier, faster, and on target. Its target audience is anyone between ages 25-60 who uses food delivery services due to a busy schedule.

Problem

People with disability face the challenge of getting their delivery package in a place where it’s hard for them to reach it.

Goal

Foodelli delivery website’s design includes a new feature not implemented in any of the food delivery website on the market today.

My role

UX designer designing a food delivery app (aka Foodelli) from conception to delivery.

Responsibilities

Conducting interviews, creating wireframes, delivering low and high-fidelity prototyping, conducting usability studies, taking into consideration accessibility, making several rounds of design iterations.

User Research

Disclaimer:

Note that I re-used research conducted in Project #1 for this project, since this course allowed working on the same projec but with designing a website as a deliverable.

Summary:

As an essential part of this project, I conducted moderated and non-moderated interviews and created an empathy map. I actually wasn’t able to moderate interviews with people with disability, but I was deeply moved by my online research findings stating that there were some reported cases when a driver dropped off a delivery food in a location that wasn’t accessible for the customer. Therefore, enhancing the Instruction for a Driver’s section of the website was my priority.

Participants of my research were excited to see my multi-lingual section solution to solve the problem since they were immigrants or first-generation of Americans who see a value in that enhancement. In a cultural melt pot such as Chicago drivers are mostly service workers with LEP, therefore my intention was to see the problem from a different angle.

Pain points

Accessibility

Ordering food apps are not designed to work with assistive technologies.

Lacking customer service

The customers do not always receive their food delivery in a requested location.

Content

Hard to find new restaurants without doing time-consuming online research

Personas

  • Problem Statement:
    Robert is a busy professional with a disability in a wheelchair who needs an accessible app to order his meals online and get his delivery dropped off within reach by a driver because his mobility disability prevents him from reaching for delivered food.

  • Persona Robert

  • Persona Ana

  • Problem Statement:
    Ana is ESL student who needs a multi-lingual app to order food from a restaurant because she doesn’t speak English very well and written language is easier for her to understand.

User journey map

Robert’s user journey map indicates that there is a need for people with disabilities to address their concerns and make the online delivery experience better and more satisfying for them.

User Journey Map

Design

Sitemap

Sitemap

Paper wireframes

After making a few iterations of the homepage on the paper wireframes, I chose the version that would be the best suitable for using VoiceOver functionality and the one that includes Popular/New Restaurants in the area to take into consideration user pain points.

The stars on the paper wireframes represent parts chosen for digital wireframes.

Paper wireframes

Digital wireframes

  • At the beginning of the design process, I was planning on bringing to a user/driver’s attention to the Instructions for Your Driver section by putting the heading in red color and making this section accessible with VoiceOver, and having the translator feature build-in.

  • Digital Wireframe 1

  • Digital Wireframe 2

  • In this phase I designed homepage for both desktop and mobile devices as one of the best practices of UX Design to ensure that everyone can use this website despite of the device’s size they are using.

Low-fidelity prototype

The low-fidelity prototype in Adobe XD, I created based on the digital wireframes, demonstrates a flow process for ordering food on the website (specifically Zuppa di Mare from Calos Ristorante). This primary user flow was used in my usability study.

Low-Fidelity Prototype
VIEW PROTOTYPE

Usability study

Parameters:

  • Study type: Unmoderated and moderated usability study
  • Location: United States (moderate) and Argentina (remote)
  • Participants: 5
  • Length: 20-30 minutes

I conducted two rounds of usability studies. First one shortly after creating low-fidelity prototypes and the second after building high-fidelity prototypes.

  • Round 1 findings

    Users need to find the dish they are looking for in Search Field.

  • Round 2 findings

    The design needs more refinement to have a modern look & feel.

  • Users need to see that the items were added to the shopping cart in order to ensure that the app works properly and the ordering process is transparent.

  • The design was overwhelming.
    Too many items on the page, not even spacing between them.
    It’s hard to figure out what to do because of that.

  • Users don’t need an extra step in the ordering process when they click ‘Checkout’ button and get the “Forgot Anything?” page.

Mockups

  • During the usability study, it was discovered by the participants that it would be useful to have an option to add plastic utensils especially when travelling. Therefore I added a check box functionality to include this feature during Checkout process.

  • The participants in the second round of the usability study requested more payment methods. Therefore I added the most common GooglePay and ApplePay payment options so the users have more options to process their payments.

Mockups

  • Since users have so many choices of different devices to do online shopping, I included tablet and mobile design variations.

High-fidelity prototype

VIEW PROTOTYPE

Accessibility

  • Implemented heading hierarchy for screen reader users to understand the page structure.

  • Chose a color palette that complies with 4.5:1 contrast requirement to meet the AA standards. Added imagery for dishes and alt text.

accessibility testing

Conclusion

Takeaways

  • Impact
    The website prioritizes the needs of people with disability and addresses users with LEP (Limited English Proficiency), which is quite a unique approach.

  • What I learned
    People still use websites to order their food online despite the high popularity of the apps. Therefore it’s important to keep building and maintaining websites with best UX design practices in mind.

Leave a comment