top of page

Designing a Food Delivery App

Problem: Busy working professionals struggle to find the time to cook or prepare a meal. 

Solution:  Mangoville is a Caribbean restaurant located in a major metropolitan area. Mangoville aims to deliver hearty meals, snacks, and drinks to make its customers happy. 


Mangoville targets busy adults who lack the time or skill set to prepare authentic Caribbean fare. 

The Mangoville mobile app allows users to order meals from the restaurant quickly and easily at their own convenience.

Understanding the User



I conducted interviews and created empathy maps to understand the needs, behaviors, and motivations of the users I’m designing for. A primary user group identified 

through research was working adults who don’t have time to cook meals.

This user group confirmed initial assumptions about Mangoville customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included cooking skill/ability, lack of ingredients on hand, or other challenges that make it difficult to get groceries for cooking or go to restaurants in person

Pain Points


Busy professionals do not have the time to prepare  meals 


Food ordering platforms include inefficient or do not support group order features


Platforms for ordering food are not equipt with assistive technologies


Inadequate menu descriptions may make it difficult to make informed menu selections


Screen Shot 2022-05-20 at 5.26.38 PM.png
Screen Shot 2022-05-20 at 5.26.45 PM.png

User Journey Map

Mapping Courtney’s user journey revealed how helpful it would be for users to have access to a dedicated Mangoville app with a group ordering feature.

Screen Shot 2022-05-20 at 3.10.14 PM.png

Starting the Design


Taking the time to draft iterations of each screen of the app using paper wireframes ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time. 

Screen Shot 2022-05-20 at
Screen Shot 2022-05-20 at

* Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. 



  • User flows to create individual or group orders

  • Simple & consistent navigation to help users flow through the app seamlessly 

  • Accessible transitions

Screen Shot 2022-05-20 at 3.47.40 PM.png

** View the Mangoville low-fidelity prototype V2 **

Usability Study: Findings

I conducted two rounds of usability studies. Findings from first round helped guide the designs from wireframes to mockups. In the second round, I used a high-fidelity prototype and revealed what aspects of the mockups needed refining. 

Round 1 Findings

Users expect images and buttons to direct them to pages with detailed information 


Users want cues and feedback that they’ve completed the ‘Add to Order’ task


Users need a more intuitive way to complete a group order


Round 2 Findings

Users want to place their order quickly without signing in   


Over-utilization of uppercase typeface makes it difficult to navigate the UI 



Refining the Design


Early designs lacked clarity once users added menu items to their carts. After usability studies, I added additional cues to indicate completion of the ‘add to order’ task. 

Before Usability Studies

After Usability Studies

Screen Shot 2022-05-20 at 4.28.29 PM.png

During the second usability study, users expressed challenges navigating the UI because of the heavy utilization of the uppercase typeface. I updated to title case in the sticker sheet and throughout the app.

Before Usability Study 2

After Usability Study 2

Screen Shot 2022-05-20 at 4.28.48 PM.png

Key Mockups

Screen Shot 2022-05-20 at 4.43.22 PM.png

High-Fidelity Prototype

The final high-fidelity prototype addresses the main user pain points by providing an easy to use design that is inclusive and accessible


  • Simple & consistent UI to aid user navigation

  • Descriptive menu text helps users make informed menu selections

  • Meets user needs for customizable group orders 

Screen Shot 2022-05-20 at 4.49.32 PM.png

** View the Mangoville high-fidelity prototype **

Accessibility Considerations


High contrast ratio

Used high contrast ratio to ensure that the app’s content can be read by everyone


Assistive Technology

Included images with descriptive text, appropriate hierarchy, & emphasis to aid users with screen readers


Recognizable icons

Used recognizable icons across the design to help make navigation easier


Going Forward

Next Steps

Since this was a project for a certificate program, there were many design constraints. If given the opportunity to work on a similar project, I would:  


Conduct another round of usability studies to determine whether the current design effectively addresses the users’ pain points


Test the design with a screen reader to ensure an optimal user experience for users with screen readers


Conduct additional user research to determine new areas of need or enhancement


bottom of page