EatWell - Case Study

Project Overview

Finding healthy recipes that meet your needs, and knowing exactly what to buy to cook them can be time consuming and frustrating, especially when you have things to keep track of like dietary restrictions, nutritional goals, and more.

EatWell is a website and mobile app that allows users to search for healthy recipes, keep track of what they eat and what ingredients they have on hand, and create lists to make grocery shopping simple and convenient.

My Contributions

Completed as part of the Google UX Design Certificate program, I conducted user research and usability tests, completed a competitive analysis, developed personas, sketches, wireframes, mockups and both low and high fidelity prototypes of the final product.

Summary

I conducted in-person interviews with potential users to determine what barriers are presented when it comes to finding healthy recipes and knowing what to get at the store. My research resulted in two primary user groups of focus for the project : users who are on the go and want to be able to identify items in stores that meet their needs, and users who shop at home but want to be able to keep track of complex lists and data sets with regards to their diets. I created personas for each of these user groups and focused on their needs for the initial design.

Some common concerns among interviewees included having to remember what they already had on hand for a recipe, keeping track of different spreadsheets and documents where they keep their information, and knowing exactly what is in groceries that they buy (in terms of nutritional information and ingredients).

Pain Points

Pantry Tracking

Several potential users expressed difficulty with remembering what they have at home while they are out shopping for groceries for a recipe.

Scattered Lists

Some need to keep detailed track of what they are eating, and for those users they can find themselves referring to multiple lists and spreadsheets when meal planning.

Nutritional Info

Multiple people interviewed expressed frustration with how nutritional information is presented on a label (what a serving size is, etc).

Personas

Cara

Age : 26
Occupation : Designer
Hometown : Toronto
Family : Single

“I want to eat a plant-based diet, but my food allergies make finding the right products tricky”

Goals

Cook nutritious meals that taste good
Identify ingredients in the grocery store that meet my needs

Frustrations

Difficult to remember what I have at home
Keeping many lists for recipes I want to make

Cara likes to cook but has trouble finding the time to sift through recipes online, she also has a severe mushroom allergy and is trying to eat a plant-based diet, so when she goes to the grocery store things can get a bit confusing.

Dan

Age : 22
Occupation : Developer
Hometown : London
Family : Single

“Managing all of my nutritional needs is cumbersome, and takes away time from things I enjoy”

Goals

Cook meals that support my health
Plan meals for a week ahead of time

Frustrations

Having multiple spreadsheets and lists for nutrition info and recipes
Online shopping is time consuming

Dan works a remote job during the day, and spends his nights and weekends on his fitness hobbies. As an athlete Dan has very specific dietary goals that he supports with complicated recipes and spreadsheets. Dan primarily shops online and he finds that spending extra time on the shopping process takes time away from what he enjoys.

Sitemap

Based on the outcome of user interviews, the site should feature two primary components : tracking (for meals and ingredients at home) and recipes (to generate lists for shopping). In addition to that the web based version will offer blog posts with lifestyle information and tips.

Digital Wireframes

The design of the mobile app focused on activities that users would be completing on the go. For that reason I wanted to zero in on the nutritional stats of the user for that day, and the Recipe to Shopping list workflow.

This workflow includes a quick look at the day's nutrition so far, a tabbed section of recipes and ingredient lists, and the screens for viewing and selecting a new recipe to create a new list.

For the web based version of this tool, I wanted to give the users more information and the ability to see more options at once. Since their information can be viewed at a glance on the app and in their profile, I felt it was good to focus on the recipe search and sorting flow, while also providing suggested recipes and blog posts based on their activity.

Because this tool is being designed to work responsively, I made sure to design the flow in several popular screen sizes for different mediums.

Low-fidelity Prototype

To create a low-fidelity prototype in Adobe XD I linked the wireframe artboards together to simulate one of two intended flows before user testing occurred. At this point I had iterated on some of the layouts and moved some elements around in order to better facilitate the intended flow.

Parameters

For the initial usability study on this project I wanted to determine if the recipe suggestion and shopping list flow works for users.

Format of Study

Unmoderated usability study

Location

Canada (remote, at home)

Participants

Length

15-20 minute sessions

Research Questions

How long does it take for users to select a recipe and add the ingredients to their list?
Are there any areas where users feel stuck?
Is the order that information is provided intuitive for users?
Are there missing features that users are looking for?

I considered Time on Task and User Error Rates when determining the performance of the study, and used those observations to build out insights for next steps.

Findings

The usability study resulted in a few key insights :

Users wanted a more clear and robust search function for new recipes.
Users want an easy way to see what ingredients they have on-hand while viewing a recipe on their mobile app
Some users sought the ability to export grocery lists for use with delivery apps and other online grocery ordering systems.

Mockups

Based on my usability study, I decided to add a filter setting to the recipe search for only recipes where the users have ingredients on hand. In addition, I added a notification on the recipe screen that indicates how many ingredients the user is missing, and links to their lists.

For the web version, most features were included based on the previous iteration, but I included a filter system for the search function and a quick “Add a meal” button in the header for simple tracking from any device.

Visual design system

Take a look at the EatWell mobile app prototype!

Open Prototype

What I Learned

A dedicated mobile app can provide functionality for users that the web version doesn’t, and focusing on the mobile experience is key to determining what features are most important when the user isn’t tied to their desk.
‍
In terms of user research, the process of completing a usability study can shed light on frustrations that the designer was unable to see, and reveal opportunities to make the final product the most useful for the largest number of users possible. In contrast to the initial testing, users who tested the high fidelity prototype said that the designs felt exhaustive in terms of features, though there was some room for simplification in a few areas.

Next Steps

If I were to progress with this project, the next thing I would do is create additional workflows for the mobile app, most importantly for the barcode-scanning feature for in-store shopping. After that, another round of usability studies and revisions for these new features in the mobile app would be the most helpful.

EatWell - Healthy Recipes On The Go

Pantry Tracking

Scattered Lists

Nutritional Info

Goals

Frustrations

Goals

Frustrations

Format of Study

Location

Participants

Length

Research Questions

Overview of mobile app mockups

Home page for different device sizes

Recipe view for different device sizes

Create shopping list flow - tablet

Detail view of ingredient lists (Mobile web and mobile app)

Wanna work with me? Send me a message!