End to End Mobile App

Your go-to app for personalized recipes based on your
preferences.

COMPANY

Foodwise

ROLE

UX Designer

EXPERTISE

UX/UI Design

YEAR

2024

End to End Mobile App

Your go-to app for personalized recipes based on your
preferences.

COMPANY

Foodwise

ROLE

UX Designer

EXPERTISE

UX/UI Design

YEAR

2024

Weather app image

Choose a diet that suits you

Not Listed? Let us know here!

Skip for now

Next

Keto

Vegan

Paleo

Vegetarian

Gluten Free

Lactose Free

Weather app image

Search Foodwise

Categories

Breakfast

Lunch

Dinner

Dessert

Meals Under 30 minutes

Roasted Red Pepper Chicken Sandwich

Aioli Gourmet Burger

Mediterranean Pita with tahini Hummus

Vegan Butternut Squash Soup

Easy Baked Beef Empanadas

Easy Baked Egg Cups

Acai Berry Popsicles

Popular Dishes

Elk Steak Nachos with Avocado Crema

Garlic Shrimp Pho

sweet Potato Tacos

Lemon Ricotta Pancakes

Pork and Cabbage Potstickers

Salsa Verde Baked Tilapia

Caprese Panini

Weather app image

Breakfast

68%

Health Score

3/4 cup flour

1 lemon

3 large eggs

¾ cup whole-milk ricotta

Lemon Ricotta Pancakes

Super soft and fluffy Lemon Ricotta Pancakes made from scratch!

Start Cooking

easy

30 min

5.0

4

Home

Recipes

SCAN

Profile

Saved

Overview

There is a growing concern about the inaccurate labeling of chemicals in our food, along with the common inclusion of cheap additives that are banned in other countries. It is crucial to highlight that excessive consumption of ingredients can potentially harm our health.

Problem

Finding food that is both nutritious and affordable can be a challenge. How can we simplify nutrition facts and ingredient breakdowns to users, ensuring they easily understand the meaning behind lengthy ingredient labels?

Solution

Solution

Foodwise, a mobile app, enables users to cook healthy meals by providing simple ingredient explanations and nutritional details. It also allows the saving, sharing, and viewing of meal nutrition information for a comprehensive health overview.

Foodwise, a mobile app, enables users to cook healthy meals by providing simple ingredient explanations and nutritional details. It also allows the saving, sharing, and viewing of meal nutrition information for a comprehensive health overview.

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

Research

Objectives

Analyze the effect of packaging and advertising on the shopping behavior of the target audience.

Understand the target audience's perception of healthy food choices and its impact on their health.

Assess the target audience's use of and need for healthy foods

Competitive Analysis

Post-market research, the problem statement was assessed. A competitive analysis of apps aiding in grocery and beauty shopping through ingredient breakdowns and risk highlights was executed for potential market solutions.

Competitive Analysis

Post-market research, the problem statement was assessed. A competitive analysis of apps aiding in grocery and beauty shopping through ingredient breakdowns and risk highlights was executed for potential market solutions.

Recommended by doctors, dietitians & fitness trainers.

Highest cost price at $10/mo

Users complained about too many ads

Biased results.

Free

Notifies people with allergies

No scan feature

Accepts affiliates and ads

Doesn't accept affiliates

Some dated health recommendations

Doesn’t recognize healthy fats

No recipe feature

Search foods by categories or ingredients

No scan feature 

Connects to a browser extension

Only scans skincare products

PROS

CONS

Secondary Research

85%

People in the United States prioritize eating healthy foods.

- International Food Information Council Foundation

76%

Adults in the United States reported trying to eat healthier

- National Center for Health Statistics

User Interviews

Dan - M, 32

I notice a difference when I'm eating

healthy vs. buying junk food. Although I try to shop for healthier items at the grocery store, I usually stick to the same items.

Serena - F, 30

I'm allergic to shellfish and soy, so I

have to be careful with what I

consume. I spend a lot of time

reading labels.

Factors that prevent people from eating healthy:

Lack of time: Busy schedules and hectic lifestyles can make it challenging to prepare nutritious meals.

Cost: Healthy food options can often be more expensive than processed or unhealthy foods, making it difficult for some individuals to afford them.

Lack of knowledge: Not knowing how to cook healthy meals or understanding proper nutrition can hinder people from making healthy choices.

Accessibility: Limited availability of fresh produce or healthy food options in certain areas can make it difficult for individuals to access and incorporate them into their diets.

Emotional factors: Stress, emotional eating, and cravings for unhealthy foods can also prevent people from consistently eating healthy.

Factors that prevent people from eating healthy:

Lack of time: Busy schedules and hectic lifestyles can make it challenging to prepare nutritious meals.

Cost: Healthy food options can often be more expensive than processed or unhealthy foods, making it difficult for some individuals to afford them.

Lack of knowledge: Not knowing how to cook healthy meals or understanding proper nutrition can hinder people from making healthy choices.

Accessibility: Limited availability of fresh produce or healthy food options in certain areas can make it difficult for individuals to access and incorporate them into their diets.

Emotional factors: Stress, emotional eating, and cravings for unhealthy foods can also prevent people from consistently eating healthy.

Finding a reliable, affordable, unbiased app with an honest nutrition breakdown can be challenging. Fooducate was the most popular among the four apps, but users expressed concerns about its price increase, privacy issues, and excessive advertising.

Define

Affinity Map

I categorized common findings on food relationships, grocery preferences, habits, food sensitivities, allergies, guilty pleasures, avoided foods, and health needs and wants.

Discovering Insights & Commonalities

Discovering Insights & Commonalities

Use Packaging as a Guide

Participants rely more on the packaging of an item than reading the ingredients label.

Long Ingredient Labels

Users found ingredient labels too long and confusing to interpret and taking too much time to rely on.

Time & Money are Factors

Participants are aware of additives/dyes but consume them when in a hurry, dining out, or trying to save money. 

Labels can be Misleading

Healthy-sounding marketing terms can mislead consumers into thinking unhealthy, processed foods are good for them.

User Personas

User Personas

User Personas

The interviews and affinity map analysis yielded three unique user personas: The Diligent Mother, The Over-Indulger, and The Conscious Consumer.

Ideate

POV

I’d like to help people who are trying to make healthy choices navigate the grocery shopping process with ease and keep them engaged with what they put in their cart.

I’d like to minimize questions people with food allergies or sensitives have when it comes to items they buy, to make purchasing food choices easier.

HMW

How might we make grocery shopping engaging and fun for the user while keeping them on track to buy healthier items?

How might we make the user more informed about the ingredients a food item contains that may trigger food sensitivity?

POV

I’d like to help people who are trying to make healthy choices navigate the grocery shopping process with ease and keep them engaged with what they put in their cart.

I’d like to minimize questions people with food allergies or sensitives have when it comes to items they buy, to make purchasing food choices easier.

HMW

How might we make grocery shopping engaging and fun for the user while keeping them on track to buy healthier items?

How might we make the user more informed about the ingredients a food item contains that may trigger food sensitivity?

User Flow

Three User Flows were created. Create an Account/Login, Browse Recipes, and Scan an Item.

Design

Mid-Fi Wireframes

Mid-Fi Wireframes

Mid-Fi Wireframes

I developed preliminary mid-fidelity designs using Figma for rapid concept generation, which were then refined into high-fidelity designs, guided by Information Architecture principles.

Branding

Before initiating High-Fidelity design, I established a design system to maintain uniformity across my designs. Emphasizing consistency was instrumental in building a robust brand identity, ensuring the alignment of color, typography, imagery, and messaging throughout all brand materials.

Hi-Fi Wireframes

The hi-fidelity wireframes, featuring onboarding, home page, browsing, recipe page, and scanning, closely resemble the final product. They provide a precise visualization of the user interface and interaction flow, helping stakeholders and developers understand the project better.

Hi-Fi Wireframes

After creating the Mid-fidelity wireframes and implementing the UI library, I created the Hi-fidelity wireframes. These include onboarding, home page, browsing, recipe page, and scanning feature.

Hi-Fi Wireframes

The hi-fidelity wireframes, featuring onboarding, home page, browsing, recipe page, and scanning, closely resemble the final product. They provide a precise visualization of the user interface and interaction flow, helping stakeholders and developers understand the project better.

Testing

Usability Testing

Synthesizing test results

Synthesizing test results

The usability test showed users find the recipe font too small and the 'Like' icon difficult to see. They want detailed health scores on the recipe card and prefer a combined pros and cons section with clear symbols. Users prioritize search function over filters and suggest less important key ingredients should be placed at the bottom, after diet, cuisine, and nutrition details.

User feedback 

Browsing for Recipes

  • The font under the recipe image is small on the homepage and browse the recipe.

  • The heart icon to 'Like' images is hard to see.

  • Users want a breakdown of the Health Score on the Recipe card.

Scan Barcode

  • Users want more information on the pros and cons, including the amount of protein/sugar/calories.

  • Users want to remove the pros and cons and combine the section while keeping green checks and red X to differentiate.

Filter Recipes

  • Users would rather search for the dish than apply filters.

  • 1/5 of the participants recommended placing Key ingredients at the bottom, as it is less important than diet, cuisine, and nutrition.

User feedback 

Browsing for Recipes

  • The font under the recipe image is small on the homepage and browse the recipe.

  • The heart icon to 'Like' images is hard to see.

  • Users want a breakdown of the Health Score on the Recipe card.

Scan Barcode

  • Users want more information on the pros and cons, including the amount of protein/sugar/calories.

  • Users want to remove the pros and cons and combine the section while keeping green checks and red X to differentiate.

Filter Recipes

  • Users would rather search for the dish than apply filters.

  • 1/5 of the participants recommended placing Key ingredients at the bottom, as it is less important than diet, cuisine, and nutrition.

Iterations

1. Homepage & Browse Recipes

The new color theme improves accessibility. Meal names are now under the images with larger fonts and a save icon. The search bar, with larger text, is moved to the top right with extra spacing between images and sections for less clutter.

BEFORE

AFTER

2. Filter & Scan Barcode

I used the same green theme for the Filter page for consistency, updated the button to match the Onboarding screens, increased category spacing for clarity, and improved the Scan Feature by adding camera functions, color, and a user-action image based on feedback.

AFTER

BEFORE

  1. Scan Results & Scan Recommendations ​

The initial design was modified for better contrast and clarity. User feedback prompted the addition of macros like protein, sodium, and sugar next to their colors for a quick overview. A link to a detailed nutrition breakdown was added, along with a link to the USDA Food and Nutrition Service for further information on healthy eating.

BEFORE

AFTER

Iterations

The new color theme improves accessibility. Meal names are now under the images with larger fonts and a save icon. The search bar, with larger text, is moved to the top right with extra spacing between images and sections for less clutter.

1. Homepage & Browse Recipes

BEFORE

AFTER

Search bar was

increased for

visability

Updated color

theme

Moved save button next to recipe name 

I used the same green theme for the Filter page for consistency, updated the button to match the Onboarding screens, increased category spacing for clarity, and improved the Scan Feature by adding camera functions, color, and a user-action image based on feedback.

2. Filter & Scan Barcode

AFTER

Updated color theme 

Updated scan 

BEFORE

Increased spacing

3. Scan Results & Scan Recommendations

The initial design was modified for better contrast and clarity. User feedback prompted the addition of macros like protein, sodium, and sugar next to their colors for a quick overview. A link to a detailed nutrition breakdown was added, along with a link to the USDA Food and Nutrition Service for further information on healthy eating.

AFTER

BEFORE

Nutritional

amounts

Additional information

1. Homepage & Browse Recipes

The new color theme improves accessibility. Meal names are now under the images with larger fonts and a save icon. The search bar, with larger text, is moved to the top right with extra spacing between images and sections for less clutter.

BEFORE

AFTER

Search bar was

increased for

visability

Updated color

theme

Moved save button

next to reciple name 

2. Filter & Scan Barcode

I used the same green theme for the Filter page for consistency, updated the button to match the Onboarding screens, increased category spacing for clarity, and improved the Scan Feature by adding camera functions, color, and a user-action image based on feedback.

AFTER

Updated color

theme 

Updated scan 

BEFORE

Increased spacing

3. Scan Results & Scan Recommendations

The initial design was modified for better contrast and clarity. User feedback prompted the addition of macros like protein, sodium, and sugar next to their colors for a quick overview. A link to a detailed nutrition breakdown was added, along with a link to the USDA Food and Nutrition Service for further information on healthy eating.

AFTER

BEFORE

Added nutritional

amounts

Additional information

Prototype

Final Design

Final Design

Reflection

Reflection

The insights gained from this UX case study have reinforced the importance of user-centric design and I have grown as a designer. I am excited at the opportunity to have worked on a project that prioritized the user, and I now recognize the value of continuously improving designs based on user feedback.


This experience taught me to design iteratively and seek feedback throughout the design process. I learned to avoid becoming too attached to one particular design and to remain flexible in my approach.