...
The home page is where parents can search for meals by ingredient or by what a certain child likes
The search bar accepts ingredients from a list (based on the limited number of recipes in our database), or from clicking on one of the children tiles. Hovering over the Max tile prompts the user to “Search for max’s likes”, something we added after doing heuristic evaluations, because not all users found it intuitive that the tiles could be clicked on. We felt adding the tool tip was an elegant way to signal this capability to the users without having to add an extra button.
Additionally, we learned from the heuristic evaluations that users were confused by the ingredients listed in the tiles, and thought they were buttons that could be clicked. To alleviate this, we made them less prominent and made them look more like a list of likes instead of a button.
Unlike the paper prototype, we had no general “recommended ingredients” listed below the tiles. We found that users either did not notice these ingredients were even there, or thought they were the only ingredients they had to choose from.
Learnability
...
The user arrives at the results page after searching for something on the home page.
This page allows the user to easily return to the search page by clicking on the “Back to Search” button, and lets the user know what they had just searched for. Additionally, it displays an ordered list of results. Each result includes a picture of the dish, the title of the dish, a taste score, the significant ingredients, and which child (if any) it is recommended for. The taste score and recommendations comes from the childrens’ feedback.
This page is intended to give a helpful overview of the different recipes that match the search criteria, such that the parent won’t need any additional information to decide on a recipe.
...
- The user can quickly return to the search page by clicking on the “Back to Search” button. When they do so, their search parameters still populate the search box, so they can make incremental changes to their query.
- If the user manipulates the URL, they are either directed back to the search page or sent to a “no results found” page. This also lets the user know that the queries that return actual results are based on their input.
Design decisions
...
The recipe page allows the parents to do a few key things.
First, this page allows parents to navigate back to the results page and begin a new search with a single click. Additionally, it lets them go to the feedback page, where their children can give feedback. The recipe page also displays the title and picture of the dish, as well as a shopping list and list of steps in the recipe. The page also lets the user print out the recipe/ingredients or share the information with someone, such as a partner that is going to the grocery store for them.
...
- Previous query still populates the search bar/results page when the user returns to them from the navigation bar.
- Users can easily return to search results after selecting a recipe.
- Ingredients can be checked and unchecked (so the user doesn’t get stuck in one state)
- There is error checking in the “share” modal, to ensure that the recipe will be sent.
Design decisions
...
The feedback page is meant for the children to rate what they thought of the meal, and help parents make meals in the future. First, they are presented with a modal window where the child or parent can click on the current child giving feedback.
After choosing the correct child, the child is presented with a page that reminds them of the meal they just ate and allows them to rate what they thought of the meal as a whole and each separate ingredient.
The smiley face changes based on where it is on the sliding bar, and moves the ingredient yes/no choice based on if the smiley face is on the “happy” side or the “sad” side. If the smiley is dragged toward the left, the ingredient preferences toggle to ‘no.’
However, once the toggles are changed manually, they are no longer tied to the slider. After the child has moved the slider accordingly and toggled the ingredients based on their preferences, they click submit and are prompted with another modal window. The idea is that once one kid finishes, they will pass the app off to another kid, who will complete their feedback – continuing until all kids have given feedback.
The modal window that appears after one kid has given feedback has grayed out the picture of any child who previously submitted, and provides an alert saying that the feedback has been sent to the parents.
...