Find Me A Recipe is an interactive website that allows users to input
up to four ingredients that they currently have in order to discover
relevant, unique and healthy dinner recipes.
The website process was designed to be quick and straightforward. It
is divided into three sections which include the selection of any diet
or allergy preferences, the choice of up to four ingredients and the
results of relevant recipes. The ingredient selection, which is the
most significant part of the website features a simple and intuitive
design. The list is divided into four distinct food categories (“Meats
and Animal Products”, “Vegetables”, “Grains” and “Accompaniments”)
that are navigable through scrolling which feels natural for the user.
Dots placed on the left side of the screen indicate the user’s
placement in the list and allows for jumping instantly between
sections. The goal with this website was to ensure that there's no
incorrect way to input ingredients. Users are able to click on any
ingredients and remove it from either the top bar or from within the
list. The colour scheme is very health-focused with the use of
monochromatic greens contrasted with an orange colour to highlight
buttons and actions. The addition of ingredient icons for both
preferences and ingredients not only visualise each selection but make
the interface more engaging and exciting as a whole.
Recipe Searching Process Through Elimination
database that houses all the ingredients and recipes. Each ingredient
listed in the JSON has extra Boolean fields that detail whether or not
that specific ingredient is appropriate for someone with a certain
dietary requirement or allergy. When the user selects a preference
from the first screen, the website hides all relevant ingredients
which are part of or not part of that specific group. This process
also occurs for the recipes so that no recipe results that appear
between sections as the website has been incorporated into one page,
allows the dot navigation to work and for subtle animations.
Example of JSON Ingredient Input