ReMeal
Product Design

Designing a nutrition diary for healthy-minded people to record meals without a hassle.

Summary

ReMeal is a meal diary app that uses image recognition to help users write food diaries and ensure nutrition balance.
Targeted users are young adults from age 20-35 who enjoy eating for pleasure, and want to document and understand their meal pattern from their nutrition intake.

Timeline

Mar - May 2023

My Role

UX Strategy
Product Design
Storyboard
User Flow
Prototyping

Teammate

Amanda Hamlet
(Root Concept,
Wireframing)

Deliverables

Product Plan
Storyboard
Prototype

8 ReMeal Interface Screens presented beautifully side by side.

Why

How might we make nutrition and calories easier to track without manual input?

Nutrition and calorie tracking relies on people to manually weigh their food, search, and enter proportion, which is a tedious and loading process.

What

ReMeal helps users effortlessly document their meals, gaining insights into their nutrition content without the pressure of calorie counting.

ReMeal help users align with nutrition goal and take pleasure in eating by prioritizing easy data input over calorie counting.

Design Process

Root Concept
Persona
Lean Canvas

Project Plan
Requirements

Target Audience

Task Analysis
to
Minimum Viable Product

Paper Prototype

Visual Design

Testing

Target Audience

Our audience consists of young adults (approximately 18 - 30 years old) who are interested in health, cooking, and/or nutrition and want to document their meals. More specifically, the characteristics of our target audience ranges from:

1

Nutrition watcher
who want to maintain balanced nutrition from diverse meals and ingredients and avoid excessive nutrition intake.

2

Fitness enthusiasts
who track macronutrient intake each meal to reach my exercise goals and maximize workout performance.

3

Weight Loss Seekers
who want to lose weight healthily through controlled diet without the burden of manual calorie calculation.

Meet Brianna

Brianna is a nutrition watcher.

She mostly cooks for herself to ensure she has balanced food source and nutrition.

She prefers her meal to have lots of vegetables, enough protein, and diverse food sources.

She is always keeping an eye on sodium and sugar of her food because she thinks they're unhealthy.

Latino woman preparing healthy meal in front of a clean kitchen

Core Task Analysis to Minimum Viable Product

Brianna's Goals: Core Tasks and Functional Features

1

Use camera to capture and document a meal as she's eating or after she's done.

2

View nutrition breakdowns and potential total calorie of her meal.

3

View a visualization of their nutrition and the types of foods users are consuming

3

View meal diary to review the food she had for the past few months

Flow and Design

Add Meal Task Flow

Homepage:
Quick button to start adding a meal

Add Meal Options:
Scan food package barcode, take photos, or add from camera roll

Image Recognition:
Analyzes meal nutrition from image

Customization:
User adjusts nutrition data and portion size, add text for future references

A plus button on the top of the page for user quick accessUsers can add meals from one of three optionsPizza image will be analyzed by AI to document the ingredients and nutrition valueNutrition will be split into categories and ingredients will be tagged

Add Meal Task Flow - Demo

Stacked Bubble Chart
uses "size" to compare the nutrition intake amount.

Community Feed

My Friends
See what your friends are having, reply, and like their photos.

Use bubble chart to present nutrition information.  Ingredient that provide each nutrition amount from eachare represented as circles in a larger circle

Analysis - Nutrition Dashboard

Stacked Bubble Chart
is an interactive visualization of nutrition information to helps user their food composition.

Stacked Bubble Chart - Zoom
Tapping on a pie chart, users can investigate on a specific food type.

Stacked Bar Chart
is provides a visually more accurate comparison for users to know where their nutritions are made of.

Filter Selection
User can specify nutrition entry from a certain time frame or limit to a nutrition type.

A plus button on the top of the page for user quick accessPizza image will be analyzed by AI to document the ingredients and nutrition valueUsers can add meals from one of three optionsNutrition will be split into categories and ingredients will be tagged

Visual Design

Typography

This is Rockwell,
ReMeal’s display font

Rockwell is bold and robust for creating a friendly and memorable identity. It is also effective for headings and titles.

Karla is ReMeal’s supporting font

Karla offers readability and versatility, ensuring clear and accessible information. Its clean and modern appearance conveys professionalism for presenting nutrition data visualization and content.

Hierarchy

Headline

32px / 100%

Rockwell Bold

Heading 2

22px / 100%

Rockwell Bold

Heading 3

22px / 100%

Karla Bold

Heading 4

18px / 100%

Karla Medium

Heading 5

14px / 100%

Karla Medium

Heading 6

13px / 100%

Karla Bold

Body

16px / 100%

Karla Medium

CTA Button

20px / 100%

Karla Extra Bold

Identity Color

Interface Component Color

5.12

50817B

7.44

7BA79F

12.37

BBDFD5

11.34

E8CF37

9.41

3A446E

The color palette combines earthy, natural tones with vibrant accents, creating a harmonious and visually pleasing atmosphere.

It wishes to evoke a sense of balance, vitality, and trust, resonating with users who value a nutrition-focused approach to their meals, promoting a fresh feeling while feeling reliable.

Supporting Colors

Data Visualization
Neutral Color

Key Learnings

What would I do Differently?

A lot of quick design decisions are made without a second thought and without validation from users or other perspectives.

Navigation/Information Architecture: Navigation page could examined: Maybe the "Community" page go after the "Goal" page in the navigation bar? Should I use "Analysis" or "Dashboard"? Next time, I would bring in second/third/more opinions as soon as possible to help me recognize terminology or design expressions I took for granted, especially regarding information architecture.

Data Visualization: I would start with understanding how to categorize nutrition data, making it more align with the official guides. I also noticed that a nutrition dashboard would be ultimately complicated over a period of time, and each ingredients provide more than one nutrition, making the data more intertwined. This would create more requirements when designing for this the data visualization.

Further Development

Information Architecture Review: Take a step back to review the information architecture. Evaluate whether the current structure effectively serves the users' needs and whether any adjustments are necessary based on user feedback or industry standards.

Research Official Guidelines: Dive into official guidelines related to nutrition data categorization. Ensure product aligns with these guidelines to provide accurate and relevant information to users.