Dietary Restriction Features in Food Ordering App
Overview
This is a mockup of a food ordering app that appeals to users with dietary issues. I wanted to design a system where the user could check what their preferred food selection contained and how to subtract or substitute ingredients. This project was made entirely in Adobe XD in Spring 2022.
Concept
When I think about food ordering apps, the first feature that comes to my mind is customization. Pre-existing ordering apps have options that allow users to add, remove, or substitute ingredients from their order. These features not only help people make the food to their liking; they also make them suitable to their diet.
Challenges & Solutions
Every time someone with dietary restrictions uses an ordering app, they would have to input their customization options for every order they submit. A simple solution would be to have users select specific or custom dietary presets that would carry over for every order made. This would be achieved through an options menu that could be accessed anywhere on the app.
Wireframe
Developed in LucidChart
For the prototype, I wanted to create an example where a user would order something, like a hamburger, and be given the option to customize their selection based on their diet. The goal was to make each food item transparent with a list of ingredients and dietary information. That way the user could know what they were ordering before making a purchase. To ensure that the dietary option and user profile were accessible at any time, I designed a header that would carry throughout every screen of the app.
Theme Inspirations
McDonald's Ordering
App Prototype
Burger King
Ordering App
The layout of the app was heavily influenced by existing food ordering apps, such as McDonald's and Burger King. Their grid style layout allows users to view multiple selections without having to constantly scroll. For my mockup, I based the color scheme off of the warm tones used by these apps, alongside the simple shape graphics to create a simple yet appealing layout.
App Layout
Menu
Item Description
Dietary Presets
Making a Selection
Each item listed contains:
-
Item Description
-
Dietary Information
-
Ingredient customization
-
Substitutional Ingredients
​
Dietary Info
Food items have information on what they contain. A list is presented with ingredients belonging to certain food groups. This feature allows dietary restricted users to inspect the item before they select.
Dietary Presets
Allows the user to select presets that match their dietary restrictions.
-
Shows what ingredients are removed
-
Lists ingredient substitutes
-
Highlights dietary-friendly items on menu