DESIGN CHALLENGE
EatWell
Challenge
You are tasked with designing for a service called Eat Well where customers send in a blood sample,
record basic information about themselves, and the service recommends recipes and diet changes to improve health and cognitive ability based on the output from Eat Well’s AI. The service is geared for
18-35 year olds who are interested in nutrition, but do not know a lot about it.
Design a recommended recipe page for one of Eat Well’s customers based on the data outputted from
the AI below and the recipe details. The goal of this page is to show the customer the recipe and why it’s
recommended, while making it easy to understand. In addition to the page itself, we’re looking to
understand how the customer gets to this page. Assume the page will be viewed on a desktop screen
size. Use your creative freedom to design with any content you see fit.
Quick Research
Short conversations with potential users
I talked to a few individuals who do the majority of their cooking at home and asked them the following questions:
-
Is the nutrition that you get from the food you eat important to you?
-
2/5 said they think the nutrition they get from their food is important to them.​
-
2/5 said they think it's important, but don't go out of their way to focus on it, they are too busy and need quick meal ideas for their family.
-
1/5 said they don't care as long as it tastes good.
-
-
How do you find recipes? Do you have a preferred medium (internet, cookbooks, Instagram, etc)?
-
4/5 said they use the internet and/or a social media app​
-
1/5 said they use a variety (cookbooks, internet, family recipe cards, social media)
-
-
If there was one thing you could improve about how a recipe is shown to you, what would it be?
-
One user mentioned that when they are on websites using a recipe to cook that they are constantly having to scroll from the steps back to the ingredients. The user wished they had a way to see what ingredients/how much for each step.​
-
One user mentioned they wish recipes would let them know what type of utensils/appliances they would need to complete the recipe.
-
One user mentioned that a lot of recipes were meant for families and that they were only cooking for two people and didn't want to worry about leftovers. They mentioned that they would like a way to change the ingredients needed to fit a specific number of servings.
-
Looking at similar sites
I spent some time looking at different sites that contained recipes, prepared meal delivery, different home tests for allergies, food sensitivity, etc.
I also did some research on which websites were most popular with millennials. Some of the more popular sites that weren't social media were Shopify, Intuit, and Instructure.
User Journey
Below is the user journey for a new, unauthenticated user.
Wireframes
After the initial research, I completed a few sketches before landing on a more high-fidelity wireframe.
.png)
RECIPE DETAIL PAGE
RECIPE DETAIL PAGE - VIDEO ACTICE
Final Designs
RECIPE DETAIL PAGE - Final
-
For the final design, a combined usage of imagery and typography play a integral part in this design. Users like to have a visual of what they are cooking, as well as understand how much time and the level of difficulty a meal will take to prepare.
-
I also wanted to make sure to call out the Key Health Benefits above other information. This after all is one of the main purposes for using this service.
-
As the user scrolls through the page, they can easily see the list of ingredients along with the ability to change the number of servings. Ordering ingredients from online recipes has become a staple, so I made sure to include that functionality here.
-
The user can also see a list of the utensils and appliances that will be needed to cook this meal and the nutritional facts for this meal (for those more worried about the macro nutrients in their food).
-
To the right of the ingredients, are the step-by-step instructions that also include images of the ingredients needed for that step and the measurment as well. I didn't want a user to have to constantly be going back and forth between the ingredient list and the steps.
-
This section also contains a video that shows how to prepare the meal, as the video plays the step that is currently being shown in the video will also be located directly below. (please see visual below)
RECIPE DETAIL PAGE - VIDEO ACTICE