Final Prototype
Navigation
Firstly, the navigation between the different features in the application involves 3 main mechanisms. They are namely the menu bar, bottom navigation and also the main feature board.
Feature board
The feature board exists on the main dashboard where users first start up the application. It showcases the 4 main features where the users can click into and start navigating the application
Bottom navigation
Similar to the feature board, the bottom navigation showcases the 4 main features of the application with the inclusion of a home button. The only difference is that the bottom navigation exists all the other pages within the application. Allowing users to transit from one feature to another easily.
Menu
The menu pop-up can be opened on the top left/right-hand corner on every page of the application. It gives users other navigation methods to sub-features within the application that users might have to use on a regular basis such as accessing trending recipes or adding ingredients to their inventory list.
Profile Settings
Profile page
The profile page allows users to set up their accounts with different details such as personal demographics, lifestyle goals, and also special dietary requirements they might require.
This personalization and setup will serve to help them in achieving their goals as recommended recipes and calorie intake requirement will be based on the settings set here.
Browising profile
This demonstrates how to navigate the profile settings within the application and what are the different settings that might be important to the users. Users will be directed to the profile settings when they first start up the application.
-
Personal Details - Showing the personal demographic details like age, name and more importantly the height and weight
-
Lifestyle goal - For users to choose the type of lifestyle they want and the application will alter the calories intake accordingly
-
Special diets - For users to input their health conditions and allergies so that the recommended recipes will be tailored based on this information.
-
Membership - Incentive system which will be elaborated at another section
Editing Profile
This demonstrates how to edit the different fields within the profile settings tab.
-
The application allows users to edit all the details so as to have a customized experience for each user
-
Any edit action comes with a feedback confirmation message that allows users to undo changes easily and also double-check changes made in the settings
-
Editing critical data related to health such as weight/height will prompt the application to automatically change other settings such as lifestyle requirements. Users still have the option to manually tweak the suggestion.
Inventory (Refrigerator)
The refrigerator tab serves as an inventory list for users to keep track of all perishable food products within their fridge. This feature serves to streamline the recipe recommendation process based on ingredients available and also reduce food wastage based on negligence.
Below are the 2 main features within the refrigerator tab:
Inventory Management
Managing the inventory list by viewing different ingredients details and sorting them based on different metrics
Adding Ingredients
Adding an ingredients either by using a barcode/QR code scanner or manually entering the details of the ingredient
Inventory Management
-
The inventory shows the ingredients icons, name, quantity, and also the expiry date of the food items
-
The icons are associate with the ingredients and categorized into 4 different categories namely the meat, vegetable, drinks/liquids, and snacks.
-
The inventory list is divided by expiring items (within 3 days) and other food items. The expiring items are on the top because they are in top priority and it signals to the users to use these ingredients first. This will prevent the wastage of food due to throwing them away after being expired.
-
The ingredients can also be sorted via their name (alphabetical order), quantity (Ascending/descending), and expiry date (earliest/latest)
Adding Ingredients (Manual Entry)
-
Users can manually add ingredients into their fridge although it is more tedious than the scanning function. This is to provide users with the freedom of choice. This also allows users to add food items that are purchased from wet markets that do not contain a nutrition tag or barcode.
-
Compulsory fields will be highlighted with asterisks beside the field header
-
Respective fields will pop-up respective input keyboards related to the field.
-
Name --> Qwerty keyboard,
-
Serving size/calories --> Numpad
-
The fields will also autocomplete to reduce the action and cognitive load required by the users
-
Pressing the expiry date field will allow users to add in the expiry date with a date picker
-
The added item will then appear at the end of the ingredient list as shown by the demo
Adding Ingredients (QR/Barcode)
-
Using the QR code scanner/ barcode scanner will allow the application to help users autofill the most compulsory fields except the expiry date field which has to be manually entered. This is enabled by computer vision and a unique barcode that exists in Singapore that helps to identify the items and nutrition tag.
-
This allows users to fill up the add ingredient form easily with less hassle
-
If the user tries to submit an ingredient form without filling all necessary fields, the application will prompt the user to go back and fill up the information, prevent errors made by the users.
-
There is also a confirmation feedback screen to allow users to double-check their addition. They can undo their action and change the different fields or proceed to confirm the addition, allowing users to rectify their mistakes
Recipes
The recipe function allows users to browse a large variety of recipes that will be generated from the internal database. The recipes will be categorized and recommended based on the user's requirements/needs based on the profile settings and also ingredients available.
Users can also share their own recipes, share other people's recipes and rate the recipe for others to see.
Browsing
Users can browse different recipes using filters to find the one they want.
Adding
Users can contribute to the database by adding in recipes they feel is good enough for others
Viewing
Users can rate and share recipes. Follow the steps and video guides and also customise their own recipes
Browsing
-
Users can browse through many sections of the recipe feature to find out about different recipes that might be suitable for their needs.
-
Recommended recipes --> Will be recommended based on user's profile setup and also available ingredients in a user's inventory to help users reach their calorie/lifestyle goal
-
Trending recipes --> Top recipes shared and rated by other users that also fit the users' requirements. Help users explore more options and a variety of food choices
-
Favourite recipes --> Users can favourite recipes they view and come back to this page when they feel like eating it.
-
Users can also apply different filters such as cuisines, ratings and preparation duration to narrow down their search
-
There is also a search function with search hints to help users find their target recipe to try
Adding
-
Users can add and edit their own recipes and help contribute to the variety within the application itself
-
The menu allows users to go directly to the form which reduces users need to navigate and find the feature
-
Text fields will induce a QWERTY keyboard popup and autocomplete function while numerical fields will induce a numpad popup to assist users in adding in a recipe
-
Users' action is always accompanied by the feedback that will prompt the user that they will be changing something within the application. This helps users prevent the error from happening and also allows users to do double-checking.
-
Even after adding the recipe, users can easily edit on the recipe (created by them) screen with a floating button on the bottom right. Allowing users to undo any errors that might be present.
Viewing
-
Users' view of the recipe includes the name of the recipe, descriptions, ingredients, instructions, video guides, ratings, and also nutritional details
-
Users can also alter and customize the number of servings they want to make based on the recipe
-
The recipe will also feedback to the user if they have enough ingredients or are allergic to any of the ingredients that can be found in the recipe
-
Changing the serving portion all automatically alter the ingredients needed on the main recipe page allowing the user to follow without needing to calculate for the increase in portions
-
The application also allows the user to rate and share only after they have attempted to cook the recipe
-
Calories intake will be updated in the calories tracker tab when recipe press the cook recipe button. This allows for easier tracking of calories by users.
Nutrition Tracker
Nutrition Tracker
Daily Tracking
This feature allows users to track their daily calories intake and also the 3 macronutrients that are important to the human body. They can switch the tracking metrics using a tab shown in the demo.
This acts as a check and balance for the users in between meals for them to decide how much and what food they can continue to consume throughout the day. The recommended recipe will also be tailored based on the calories/macronutrients left that they can consume.
History
This section shows the weekly and monthly updates on calories consumption. This guides and shows the users whether they have been eating their target calories intake on a weekly or monthly basis using a bar graph. This can help to motivate users to help them hit their target or give them a warning that they may need to put in more effort for that to happen.
Incentives system
Incentive system
One of the main features mentioned that the users want is an inventive system to motivate them to adopt healthy eating and lifestyle habits.
Using a point system, users can earn points by consistently hitting the calories/nutrition target and accumulate those points. Users then can used those points to redeem F&B vouchers or groceries vouchers that can further motivate and help them achieve better eating habits