Foodie Express is a good ordering app that provided detailed ingredients for each dish to people who want to have a healthy eating style or/and have food allergies.
Project duration:
November 2021 to April 2022
The problem:
People with food allergies have a difficult time placing an online order for their meals.
The goal:
Design an app that provides detailed ingredients for each dish to people who want to have a healthy eating style or/and have food allergies.
My role:
UX designer designing a food ordering app for people who has food allergies
Responsibilities:
Conducting interviews, paper, and digital wireframes, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs and expectations. A primary user group identified through research was users who have multiple allergies and would like to have the options to go through detailed ingredients. They would like to make sure the dishes they are going to order won’t trigger their allergies.
Users also confirmed most restaurants did not list out ingredients that they got from suppliers. Even dishes listed as allergies free. However, some hidden information from the ingredients still causes health problems when it comes to their order. Time spent on additional research and the risk to order take-out remains high, which makes the ordering process become more difficult.
Pain Points
Working classes are too busy to do additional research on all ingredients whenever they order take-out
No details information is provided to the users, which makes it difficult to avoid food allergies
The risk to trigger allergies remained high, as most restaurants are not able to provide ingredients from suppliers
Persona & Problem Statement
Tyler is a realtor who has a food allergy and needs to order food delivery after work because of his busy schedule and has no time to cook for himself.
User Journey Map
Mapping Tyler’s user journey revealed how helpful it would be for users to use the Foodie Express app to order allergies-free dishes.
Paper Wireframes
Spending time to sketch out ideas for the app on paper ensures elements that will be on the digital wireframes that are able to solve the user pain points. In this stage, I would like to prioritize the functionality that can provide detailed info on ingredients to the users.
Digital Wireframes
In the initial design phase as this stage, I made sure to have screen designs that base on the feedback and research findings.
Easy for users to identify dishes with allergies icons, which allow the user with allergic reaction to place their order much faster.
Low-fidelity prototype
I created a set of digital wireframes to showcase the primary user flow. The prototype is going to be used in a usability study.
View the Foodies Express App Low-fidelity prototype
Usability Study: Findings
I conducted two rounds of usability studies. These studies provide helpful guidance for mock up and lead the way to refine the prototype to a high-fidelity prototype.
Round 1 findings
1. Icon is a bit confusing
2. Not sure where to find order status after exiting the app or screen
Round 2 findings
1. Users want to have the ability to undo actions in the cart
2. Users want to be able to edit order
3. Additional way to add or remove items
Mockups
The early low fidelity design allowed adjustments based on usability studies' findings. I modified the design on the icon to make sure users are able to find where to re-access or check the order status screen after placing their order.
The second usability study revealed the frustration with the ordering process. I modified the design and provide users the ability to make changes to their order and undo their actions. Users also now can remove the order by pressing the “-” icon or “x” icon on the screen.
Key Mockups
High-fidelity Prototype
The final high-fidelity prototype presented clear user flows for edit order and the undo action. It also met user expectations for re-access order status screen as well as a description of the iconography, making sure no confusion.
View the Foodie Express High-fidelity Prototype
Accessibility Considerations
1. Provide stronger color contrast on the overall screen to users who are vision impaired, making sure text and icons are readable.
2. User icons to help users navigate through the app easier. Provide text description on the main navigation bar and serve as the alt text for screen readers.
3. Use images to make sure users have an additional layer of understanding of the ingredients of their choice and streamline their ordering process
Takeaways
Impact
The app helps many users with food allergies order food delivery easier, which makes them think convenient and meets their expectations and needs.
One quote from the peer feedback:
“I used to worry about food that I ordered online containing ingredients that trigger my allergies. I would definitely use this app to choose my dish without worry.”
What I Learned
Usability studies and user feedbacks have huge impacts on moving the project in an unexpected direction. Especially, when taking accessibility compliance into account.
Next Steps
1. Conduct 1 round of usability studies to see if the pain points users experienced have been resolved.
2. Conduct another 2 rounds of usability studies to implement new features such are order pick up or place future orders to enhance the overall experience