Vector.png

Chow is a web and mobile app that offers users a way to meal plan for their family and track their food budget. It also offers healthy and culturally-relevant recipe ideas that are submitted by users across the world.

Project duration:

July 2022 - September 2022

My role: 

UX designer and researcher 

Design type:

Mobile app and website

Problem

Meal planning and budget tracking can be difficult for many busy families. They want to find healthy low-cost meals for themselves and their family, but many recipe sites are often overwhelming and don’t give a sense of cost. They also want to track their food expenses easily on the go to ensure thye stay in budget.

Goal

Create a multi-purpose web and mobile app that can help users track and manage their weekly food budget and meal planning, while also providing healthy low-cost recipe suggestions.

chow-screen-mockup.png

initial user research

Research from the CDC indicates that meal planning encourages healthier eating by reducing last-minute decisions of unhealthy drive-through dinners. Also a study by Charles Schwab shows that 59% of Americans live paycheck to paycheck each month. That means more that half of the population has a limited amount of money they can spend on food and other items. There is a need for easy-to-use systems that can help people save money and encourage healthier home-cooked meals. 

pain points to solve

1

 

TIME

Meal planning can be arduous and take a lot of time and thinking. A simple and accessible app or website can make this process faster and less overwhelming to users. 

2

 

Cost

Cooking at home is harder to calculate the costs. This can push people to instead choose to eat out or go to drive throughs instead. With this app we can show estimated costs for recipes and meal plans.

3

 

Recipes

Recipe sites can be overwhelming, and it can be hard to find recipes that cater to folks with dietary restrictions. This app will provide ways to filter recipes with many different parameters and find healthy low-cost meals.

user Personas

kate-bezzubets-7JTu5sKxohU-unsplash.jpg

“My kids are super important to me, I want them to eat healthy, but I don’t have much income so I need to plan our meals to fit into our budget.” 

As a single mother Tamia has a tight budget. She needs to make sure she has enough money to feed her kids each week. While fast food is a cheap option for meals, it isn’t healthy to have very often. She wants a way to find cheap affordable meals and to track her food budget each week. Tamia also has tremors in her hands and arms that sometimes makes it difficult to use phone apps with small buttons so she prefers web apps she can access with a computer.

Goals 

  • Budget-planning.

  • Healthy meals for her kids.

  • Find recipes for low-cost meals.

Frustrations 

  • Fast food is cheap but it isn’t very healthy for my two kids.

  • It’s hard to figure out how much we spend on food each week.

jorge-salvador-9QtBe11i2yk-unsplash.jpg

“Being in college I can only work part-time and I don’t have the qualifications for a better paying job. I want to make sure I’m saving money each month so I can work toward my goals.” 

Trevor is a junior in college getting his bachelor’s degree in business. He works part-time at retail store that sells sporting goods. He is trying to save up money to buy a car so he can have a little more freedom. Trying to save money whenever he can, he wants to keep track of how much he spends on meals and groceries each month.

Goals 

  • Save money for a new car.

  • Pay off student loans

  • Learn how to cook better meals

Frustrations 

  • Want to be a better cook.

  • Food is expensive.

  • Wants an easy way to keep track of spending from his phone while he’s on the go.

Tamia Graveer

Trevor Fareph

user Journey maps

I created a user journey map for my user personas to identify pain points and opportunities for improvements for the user experience of trying to budget and meal plan.

chow-paper-wireframes3.jpg

Paper wireframing

Creating quick paper wireframe sketches I worked to find a layout for the primary pages that allowed users to quickly and easily find pertinent information.

digital wireframing

After creating a plan for the main pages, I began to build out digital wireframes for the main user flow - creating an account and signing up for a volunteer shift - for multiple screen sizes. 

chow-wireframes.png
chow-low-fi-prototype.png

low-fidelity prototype

This user flow allows people to log in to their Chow account, browse recipes, and add a dish to their meal plan. Then users can view their current week’s budget and add an expense from grocery shopping.

usability studies

To better understand user needs, I conducted a moderated usability study with 5 participants.

I revised my designs based on feedback, then did another usability study to further improve usability as well as test new functions for clarity.

Study findings

  • Users wanted a more engaging experience with featured recipes on the main recipe page.

  • The initial budget data only showed how much you had spent so far that week. Users needed to see what the expected cost would be for their meal plans for the full week.

  • Users needed the calendar slots to be larger for both visibility and touch accuracy.

Before usability study

After usability study

chow-mockup-before-study.png
chow-mockup-after-study.png

high-fidelity prototype

After implementing a number of changes, the new high-fidelity prototype gained new screens and pages as well as additional overlays to help create clear and useful information and navigation.

Mockups

Accessibility considerations

1

 

Accessibility suite

An accessibility suite of tools was added that includes high-contrast, large font options, dark mode, and more. Accessibility tools can be changed by clicking the icon in the bottom right corner of any screen.

2

 

TEXT FOR SCREEN READERS​

All information is provided in text form even when icons are used, to ensure proper understanding for those using screen readers. 

3

 

color

contrast

High contrast colors were implemented to ensure WCAG AA accessibility for people with visual disabilities.

impact

“This app made it so easy to plan and budget our meals by providing tons of healthy low-cost options for me and my family!”

takeaways

This project helped me design using the mobile-first to ensure the user experience worked on small mobile devices while users are on-the-go. Then scaling up to larger screen sizes afterwards allowed for supplementary features to be added that weren’t necessary in the smaller screen sizes.