Foodie Express

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.

Role

UX Designer, Visual Designer

Team

Product Manager, Development Team

Duration

5 Months

Tools

Figma, Adobe Photoshop, Adobe Illustrator, Typeform

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.

The Problem

In online food ordering systems, individuals with food allergies face significant UX challenges due to unclear menu descriptions and inadequate ingredient transparency. These users need precise information about ingredients, cross-contamination risks, and customization options for safe decision-making. A well-crafted UX must cater to these requirements by offering a straightforward, reassuring ordering process, ensuring both accessibility and a positive user experience.

The Goal

The app's goal is to offer a streamlined, user-centric platform for health-conscious individuals and those with food allergies, providing detailed ingredient information and nutritional data for each dish. It aims to simplify meal choices by allowing users to set dietary preferences and restrictions, thereby receiving personalized dish recommendations. This ensures that users can make informed decisions, manage dietary needs effectively, and enjoy a diverse, healthy diet with confidence and convenience.


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 appcan 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: Foodie Express 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

  • Icons are a bit confusing
  • Not sure where to find order status after exiting the app or screen

Round 2 findings

  • Users want to have the ability to undo actions in the cart
  • Users want to be able to edit the order
  • 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​​​​​​​

To enhance accessibility and user experience, the app's screen design now features stronger color contrast for improved readability of text and icons, aiding users with vision impairments. Navigation within the app has been optimized through the introduction of user icons and descriptive text in the main navigation bar, which also serves as alt text for screen readers, catering to visually impaired users. Furthermore, the integration of images depicting ingredients empowers all users to make informed choices, streamlining the ordering process and enriching the overall interaction with the app. These design enhancements collectively foster a more inclusive, intuitive, and user-friendly environment, ensuring users, especially those with vision impairments, can navigate and engage with the app effortlessly.

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 triggered 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.