Designing a nutrition diary for healthy-minded people to record nutrition simpler and faster.
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.
MY ROLE
Product Designer
DURATION
8 weeks
TEAM
Amanda Hamlet
(Product Designer)
Deliverables
Prototype
Storyboard
User Flow
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.
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.
The entire adding meal flow prioritizes easier input than manually entering food intake weights and amount.
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
Filter Selection
User can specify nutrition entry from a certain time frame or limit to a nutrition type.
Stacked Bar Chart
is provides a visually more accurate comparison for users to know where their nutritions are made of.
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.
This is Rockwell,
ReMeal’s display font
I choose Rockwell to create a bold and robust identity.
It is also effective for headings and titles.
Karla is ReMeal’s supporting font
I choose Karla, which offers readability and versatility, ensuring clear and accessible information.
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
20px / 100%
Karla Extra Bold
5.12
＃50817B
7.44
7BA79F
12.37
BBDFD5
11.34
E8CF37
9.41
3A446E
I choose this color palette that combines earthy, natural tones to evoke a sense of balance, vitality, and trust.
I choose colors derived from good groups to make color code more intuitive for the users.
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.
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.
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.
Dive into official guidelines related to nutrition data categorization. Ensure product aligns with these guidelines to provide accurate and relevant information to users.
