Foodie Express is an exemplary ordering app that caters to individuals seeking a healthy eating lifestyle and those with food allergies. This app goes above and beyond by providing detailed ingredient information for each dish, ensuring that users can make informed decisions about their meals. By prioritizing the needs of users who have specific dietary requirements or allergies, Foodie Express promotes a safe and enjoyable dining experience.
In today's digital age, placing online orders for meals has become increasingly convenient. However, individuals with food allergies often encounter difficulties in finding suitable options that align with their dietary needs. As a UX designer, my role is to address this challenge by designing a food ordering app specifically tailored for people with food allergies. By providing detailed ingredient information, the app aims to empower users who prioritize healthy eating or have specific dietary restrictions.
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:
To achieve this goal, I undertake various responsibilities throughout the design process. These include conducting user interviews to gather insights and understand the needs and expectations of the target user group. Additionally, I create both paper and digital wireframes to visualize the app's interface and structure. Through low and high-fidelity prototyping, I simulate the user experience and refine the app's functionality. Conducting usability studies allows me to test and validate the effectiveness and efficiency of the app's design. Moreover, I ensure accessibility considerations are accounted for, making the app inclusive for all users. Finally, I iterate on designs based on user feedback and continuously improve the app's usability and user experience.
User Research Summary
To gain a deep understanding of the users I am designing for, I conducted interviews and created empathy maps. Through this research, a primary user group emerged—users with multiple allergies who desire access to detailed ingredient information. These individuals are cautious about potential allergens and want to ensure the dishes they order won't trigger any allergic reactions.
Furthermore, users confirmed a common problem—most restaurants fail to provide comprehensive ingredient lists, even for dishes labeled as allergy-free. Hidden ingredients and insufficient transparency pose health risks for users when placing their orders. As a result, additional research and time are often required, making the ordering process more challenging for individuals with food allergies, particularly when ordering take-out.
By addressing these pain points and incorporating detailed ingredient information, the app I design aims to alleviate the difficulties faced by users with food allergies, ultimately enhancing their ordering experience and promoting their well-being.
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, a busy realtor with a food allergy, often finds himself in need of convenient food delivery options after work. Due to his demanding schedule, he has limited time to cook for himself. However, finding suitable meals that align with his dietary needs can be challenging. This is where a food ordering app designed specifically for people with food allergies, like the one I am working on, can greatly benefit Tyler. By providing detailed ingredient information and catering to his specific dietary restrictions, the app will enable Tyler to order meals confidently and conveniently, saving him precious time and ensuring his health and well-being are prioritized.
User Journey Map
Throughout Tyler's user journey, the Foodie Express app proves to be an invaluable tool. It not only simplifies the process of ordering food but also ensures his health and well-being are safeguarded by providing detailed ingredient information and catering to his specific allergies. By offering a seamless and user-friendly experience, the app becomes an indispensable resource for Tyler and others facing similar challenges when it comes to finding safe and convenient food options.
Paper Wireframes
Prioritizing functionality that provides detailed ingredient information to users is an excellent approach during the sketching and wireframing stage of app design. By dedicating time to sketch out ideas on paper, I can focus on crafting elements that effectively address user pain points and enhance their experience.
Digital Wireframes
During the initial design phase, it is crucial to create screen designs that are based on user feedback and research findings.
Ensuring that users can easily identify dishes with allergy icons is a crucial aspect of designing an app that caters to individuals with food allergies. By implementing clear and recognizable allergy icons, the app can enhance the user experience and expedite the ordering process for those with allergic reactions.
Low-fidelity prototype
I created digital wireframes to showcase the primary user flow and use them in a usability study. It was an excellent approach to gathering insights and refining the design.
View the Foodies Express App Low-fidelity prototype
Usability Study: Findings
I conducted two rounds of usability studies. It was a valuable practice that can provide valuable guidance for refining my prototype and enhancing the user experience.
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 the order
3. Additional way to add or remove items
Mockups
The initial low-fidelity design provided valuable insights from usability studies, enabling adjustments and improvements based on user feedback. In response to the findings, specific modifications were made to the design of the icon, ensuring that users can easily locate and access the order status screen after placing their order. This iterative process helps enhance the user experience and ensures that users can navigate the app seamlessly, resulting in a more intuitive and efficient ordering process.
Based on the insights gained from the second usability study, it became evident that users were experiencing frustration during the ordering process. To address this feedback, significant modifications were made to the design. Users were provided with enhanced functionality, including the ability to make changes to their order and undo their actions. Additionally, a clear and intuitive solution was implemented, allowing users to remove their order by simply pressing the "-" or "x" icon on the screen. These design improvements aimed to alleviate user frustration and provide a more seamless and user-friendly ordering experience.
Key Mockups
High-fidelity Prototype
The final high-fidelity prototype showcased well-defined user flows for editing orders and implementing the undo action. It successfully met user expectations by providing a clear and intuitive means to re-access the order status screen. Moreover, the prototype incorporated descriptive iconography to eliminate any confusion and ensure users easily comprehend the functionality associated with each icon. These refinements aimed to enhance the overall user experience, making the app more user-friendly, intuitive, and aligned with user expectations.
View the Foodie Express High-fidelity Prototype
Accessibility Considerations
1. To improve accessibility for users with vision impairments, the screen design now incorporates stronger color contrast. This ensures that text and icons are easily readable, allowing all users to interact with the app more comfortably.
2. User icons have been implemented to enhance navigation within the app, enabling users to move through different sections more seamlessly. Additionally, text descriptions have been included in the main navigation bar, serving as alt text for screen readers. This inclusive design approach accommodates users with visual impairments and provides them with multiple means of understanding and interacting with the app.
3. The use of images has been introduced to provide users with an additional layer of understanding when it comes to the ingredients of their choice. By visualizing the ingredients, users can make informed decisions and streamline their ordering process. This visual representation aids users in quickly identifying their preferred dishes and ensures a smoother and more intuitive ordering experience.
By implementing these design improvements, the app becomes more accessible, user-friendly, and inclusive. Users with vision impairments can navigate the app with ease, benefiting from clear and readable text and icons. The introduction of user icons and descriptive text enhances navigation for all users, including those utilizing screen readers. Furthermore, the use of images enhances the overall user experience by providing an additional layer of understanding and streamlining the ordering process.
Takeaways
Impact
The app significantly improves the ordering experience for users with food allergies, offering convenience and meeting their expectations and needs. By providing detailed ingredient information and offering allergen filters, users can confidently order food delivery without worrying about potential allergens. This convenience empowers users to make informed choices and ensures a smoother and safer ordering process. The app's ability to cater to users' specific dietary requirements fosters a sense of convenience, ultimately exceeding their expectations and fulfilling their 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
The usability studies and user feedback have had a significant impact on the project, leading it in an unexpected direction, particularly regarding accessibility compliance. The insights gained from these studies and feedback have shed light on the importance of considering accessibility from the early stages of design. By incorporating accessibility principles based on user input, the project has taken a more inclusive and user-centered approach. These considerations ensure that the app can be accessed and used by a wider range of users, accommodating their diverse needs and creating a more inclusive experience. The impact of usability studies and user feedback in shaping the project's direction highlights the value of incorporating user perspectives and accessibility considerations throughout the design and development process.
Next Steps
Conduct a single round of usability studies to assess if the pain points previously identified by users have been successfully resolved. This study aims to validate the effectiveness of the design changes made based on user feedback and ensure a smoother and more intuitive user experience.
Follow up with two additional rounds of usability studies to introduce new features such as order pick-up or the ability to place future orders. These studies will allow for testing and refinement of these features, ensuring they are seamlessly integrated into the app and enhance the overall user experience. User feedback gathered from these rounds will inform iterative improvements and further optimize the app's functionality and usability.
By conducting multiple rounds of usability studies, the app's design and features can be continuously refined based on user insights. This iterative approach enables the development team to address user pain points, validate design decisions, and incorporate new features that align with user expectations, ultimately resulting in an improved overall experience for app users.