Eatssentials is an online recipe book built around your health and what’s in your fridge. The website helps users with certain health conditions such as diabetes, BP and more. Users browse for health accommodating meals they can prepare with the limited items at their disposal.
The current pandemic situation and how the indoor lifestyle has been detrimental to most individuals, especially those with the mentioned health conditions, is what inspired us to make this web application. For starters, grocery shopping and casual dining during this pandemic has and continues to be a major risk. We realized how difficult home cooking can be if grocery shopping is infrequent and ingredients at home are limited. On top of that, many individuals have to stick to strict diets for health reasons and at a chaotic time like this, health is the number one priority. The reason or inspiration for this application has many reasons, but the main reason is how it supports an easy and nutritional lifestyle for individuals of all walks of life.
Eatssentials enables users to identify and prepare meals that are tailored to their health and nutrition needs by initially asking about their pre-existing health conditions. The specific health conditions they are questioned about are diabetes, high/low blood pressure, vitamin A deficiency, calcium deficiency, iron deficiency, and their cholesterol levels. Then, they log food they have in their fridge and recipes are generated based on the ingredients available and their health needs. These recipes were already stored within the Spoonacular database and were accessed through the use of its API. However, our program customized what recipes were displayed based on the user’s health conditions and their available ingredients. Therefore, while the recipes were generated by Spoonacular, our program used an algorithm that computed which recipes were most beneficial to the user. The website intends to help users with certain health conditions by browsing the web for health accommodating meals they can prepare with the limited items at their disposal.
For the design of the website, we first mapped out how the site would flow through creating a flowchart and a sitemap to see how the navigation would work. After this, we mocked up concepts on Adobe XD. We used Adobe Illustrator to create the fridge graphic on the homepage as well as the word-mark logo. The overall look and feel of the website was designed to be minimalistic and easy to use. The graphics made the site a bit more playful and cute.
We are definitely proud of being able to finish the hackathon with a working prototype and walk away from the event having learned a lot of things. Since we never used a lot of these languages or softwares before it was rewarding to be able to put something together during a single weekend. From a design standpoint, our project looks great for the little time we had to put into it. Oftentimes, design can be seen as the least important part of a project, but it can add more value to it and make it feel and look more real. The entire event has undoubtedly been a great learning and bonding experience.
For the interest of time, we decided not to create a login/sign up page in order to get the main functionality of the website working. The purpose of the login/sign up would be for users to refer back to their tailored recipes in the future. The recipes tab would essentially be a personal recipe book for the user. In addition the presentation of the recipes under the Recipes tab is something that needs to be polished. Currently each generated recipe is displayed in a card holder. A good idea for us would be to implement some real user feedback to see where we could improve and even add more functionality.
Lastly, the website flow needs to be altered to make it easier for users to navigate the page. As an example, under the Dashboard, if a user wants to delete an ingredient that they have added, the delete action will prompt the website to the homepage. Ideally, a delete action should still keep the user on the Dashboard tab.
Design: Adobe Illustrator and Adobe XD