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.
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
“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.
“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.
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.
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
Mockups
Accessibility considerations
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.