End to End Mobile App - Meal Planner

End to End Mobile App - Meal Planner

End to End Mobile App - Meal Planner

The Brief

The Brief

The Brief

We believe that it is never to late to make a change in your life, and often time many people choose their diet. Whether you are feeling adventurous and want to try out new recipes, or just want to eat healthier we want to provide the launch pad for people to start.

We believe that it is never to late to make a change in your life, and often time many people choose their diet. Whether you are feeling adventurous and want to try out new recipes, or just want to eat healthier we want to provide the launch pad for people to start.

Role

UX/UI, Research,

Branding

Tools

Figma, Figjam,

Maze

Timeline

3 Months


Team

1 UX Designer


The Problem

The Problem

Filler

Filler

Filler

Filler

Filler

Many people want to learn how to cook but have no idea where to begin. Just like any other skill, starting something new can be daunting. From the wide variety of ingredients to the availability of their equipment and utensils, it can be very intimidating to start cooking. 

The Solution

The Solution

Filler

Filler

Filler

Filler

We created an app full of popular user-reviewed recipes, tutorial videos, and a meal-planning feature where users can select their ingredients and track their nutrition.

🔬 Research

🔬 Research

🔬 Research

9 participants were interviewed

9 participants were interviewed

9 participants were interviewed

Mood, convenience, nutrition, & accessibility to ingredients were all most important when deciding to cook or not


“Food is a way to share your culture”

“Food is the love of my life”

“Food is the love of my life”

“Food is the love of my life”

“I can transform ingredients from raw material to what I want to eat”

“I’m over it (cooking)”

Mood, convenience, nutrition, & accessibility to ingredients were all most important when deciding to cook or not


Mood, convenience, nutrition, & accessibility to ingredients were all most important when deciding to cook or not.


Competitive Analysis

Competitive Analysis

Competitive Analysis

  • Market is oversaturated with food apps

  • Each has their own unique niche

  • Most are free with premium version behind a paywall

  • Market is oversaturated with food apps

  • Each has their own unique niche

  • Most are free with premium version behind a paywall

  • Market is oversaturated with food apps

  • Each has their own unique niche

  • Most are free with premium version behind a paywall

Competitors

Competitors

Personas

Personas

🌉 Information Architecture

🌉 Information Architecture

🌉 Information Architecture

Sitemap

Sitemap

Sitemap

User Flow

User Flow

User Flow

🔨 Development

🔨 Development

🔨 Development

utilize gamification in

the form of a visual chart

Utilize gamificat-ion in

the form of a visual chart

Utilize gamification in

the form of a visual chart

search icon on top

left for ease of access

Search Icon on top

left for ease of access

Search Icon on top

left for ease of access

Hamburger Menu > Footer Nav Bar

  • Too many pages for bottom nav bar

  • Will be a cluttered distraction

Hamburger Menu > Footer Nav Bar

  • Too many pages for bottom nav bar

  • Will be a cluttered distraction

Low Fidelity Wireframes

Low Fidelity Wireframes

Low Fidelity Wireframes

UI Kit

UI Kit

utilize gamification in

the form of a visual chart

High Fidelity Wireframes

High Fidelity Wireframes

Nutrittion Tracker Chart

Optimized for better readability

Nutrittion Tracker Chart

Optimized for better readability

Vibrant Imgagery brings

in high-contrast

Vibrant Imagery brings

in high-contrast

Past Meals Bar Graph Added

Past Meals Bar Graph Added

🔎 Testing

🔎 Testing

🔎 Testing

Specifics

Specifics

  • 6 participants in a moderated usability test

  • Measured on ability to successfully complete tasks, and in a timely manner

  • Questions about the user’s experience after task tests were successfully completed




Task Tests

Task Tests

Task Test 1 - Create an account, complete onboarding, and navigate to the home page


Task Test 2 - Navigate to the Meal Planner page and create a meal/recipe


Task Test 3 - Navigate to the Meal Planner page and select a Popular/Meal recipe

Findings

Findings

What Worked

What Worked

  • Very straightforward, easy to use

  • Navigation is clear

  • Good contrast with imagery

  • Create a recipe feature with visuals

















What Didn't Work

What Didn't Work

  • Icons in the header are too big, not enough contrast in size

  • Review icons, and like, comment, & share buttons are not properly aligned

  • No verification for buttons and screens

  • Hamburger menu shouldn’t stay after selecting a screen

  • No overlook for recipe screen

  • Don’t know where the instructions are

  • Overall scale and spacing should be adjusted)







Ideas/Suggestions

Ideas/Suggestions

  • Left align text in Hamburger Menu

  • Add a screen if you want to see Nutrition Facts or not

  • Change wording on headers/titles

  • Add Meal Mentors Originals Section
















💡 Iteration

💡 Iteration

💡 Iteration

Dark overlay + one labeled

annotation per screen,

making tour more digestable

Dark overlay + one labeled

annotation per screen,

making tour more digestable

Redesigned Header

  • Smaller icons

  • Inverted Colors

Redesigned Header

  • Smaller icons

  • Inverted Colors

Added Variant for the

Meal Overview Screen

Added Variant for the

Meal Overview Screen

💡 Iteration (Or not?)

Since there were no reported issues from users, no iterations were neccessary

Since there were no reported issues from users, no iterations were neccessary

Since there were no reported issues from users, no iterations were neccessary

Welcome to Meal Mentor!

Welcome to Meal Mentor!

Welcome to Meal Mentor!

🤔 Reflections

Challenges

  • Having so many potential pages, that wouldn't fit on a traditional footer nav bar

  • Finding Meal Mentor's Niche, especially since the market is so saturated







How I overcame them

So Many Pages - Added a hamburger menu, with sub-sections for all potential pages


Finding Meal Mentor's niche - Using vibrant imagery, I created the Create a Meal Feature. While displaying delicious looking ingredients, users could then choose their meals. Also has pre -set meals for those who don't want to create their own meals.



🤔 Reflections

Challenges

  • Having so many potential pages, that wouldn't fit on a traditional footer nav bar

  • Finding Meal Mentor's Niche, especially since the market is so saturated







How I overcame them

So Many Pages - Added a hamburger menu, with sub-sections for all potential pages


Finding Meal Mentor's niche - Using vibrant imagery, I created the Create a Meal Feature. While displaying delicious looking ingredients, users could then choose their meals. Also has pre -set meals for those who don't want to create their own meals.



🤔 Reflections

🤔 Reflections

Challenges

  • Having so many potential pages, that wouldn't fit on a traditional footer nav bar

  • Finding Meal Mentor's Niche, especially since the market is so saturated







How I overcame them

So Many Pages - Added a hamburger menu, with sub-sections for all potential pages


Finding Meal Mentor's niche - Using vibrant imagery, I created the Create a Meal Feature. While displaying delicious looking ingredients, users could then choose their meals. Also has pre -set meals for those who don't want to create their own meals.