ReMeal App Design

ReMeal: Nutrition Diary for healthy Minded People

Designing a nutrition diary for healthy-minded people to record nutrition simpler and faster.

Summary

ReMeal is a meal diary app that uses image recognition to help users write food diaries faster and ensure nutrition balance.
Targeted users are young adults from age 20-35 who want to document and understand 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

Why

Current nutrition tracking apps requires users to tediously and manually weigh their food, search from data base, and enter proportion.
What if we want to exchange efficiency with a little accuracy?

What

By prioritizing easy data input, ReMeal helps users effortlessly document their meals, gaining insights into their nutrition content without the pressure of 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:

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

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

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

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

View nutrition breakdowns and potential total calorie of her meal.

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

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 access

Users can add meals from one of three options

Pizza image will be analyzed by AI to document the ingredients and nutrition value

Nutrition 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.

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.