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
Research
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
Time
Busy professionals do not have the time to prepare meals
Features
Food ordering platforms include inefficient or do not support group order features
Accessibility
Platforms for ordering food are not equipt with assistive technologies
Accessibility
Inadequate menu descriptions may make it difficult to make informed menu selections
Personas
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.
Starting the Design
Wireframes
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.
* 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.
Features:
-
User flows to create individual or group orders
-
Simple & consistent navigation to help users flow through the app seamlessly
-
Accessible transitions
** 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
1
Users want cues and feedback that they’ve completed the ‘Add to Order’ task
2
Users need a more intuitive way to complete a group order
3
Round 2 Findings
Users want to place their order quickly without signing in
1
Over-utilization of uppercase typeface makes it difficult to navigate the UI
2
3
Refining the Design
Mockups
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
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
Key Mockups
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.
Features:
-
Simple & consistent UI to aid user navigation
-
Descriptive menu text helps users make informed menu selections
-
Meets user needs for customizable group orders
** View the Mangoville high-fidelity prototype **
Accessibility Considerations
1
High contrast ratio
Used high contrast ratio to ensure that the app’s content can be read by everyone
2
Assistive Technology
Included images with descriptive text, appropriate hierarchy, & emphasis to aid users with screen readers
3
Recognizable icons
Used recognizable icons across the design to help make navigation easier
2
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:
2
Conduct another round of usability studies to determine whether the current design effectively addresses the users’ pain points
1
Test the design with a screen reader to ensure an optimal user experience for users with screen readers
2
Conduct additional user research to determine new areas of need or enhancement
3