Mobile App Design Course Project
NewTreation combines nutrition tracking app, augmented reality and personalized recipes. It is an app aiming for solving accuracy problems in current diet-tracking apps.
A New Way to Treat Yourself With Better Nutrition.
Role User Experience / Visual Designer
Platform Mobile
Team 1 UX Designer, 1 UX Researcher
Tools Paper Prototype, Figma, Illustrator
PDF Version
UPDATE - Dec.2019, We won the highest-funded in class and now the app is under developing and we will launch this on the market in the near future.

Project Brief

There’s no denying that one of the most difficult battles for many people is to control diet. The hard battles also create opportunities. Because of the ubiquity and accessibility of mobile devices, individuals will be more willing to log dietary intake in almost real-time and to record dietary intake using apps over traditional paper methods. Our diet-tracking app focuses on people who want to track their intake of calories and nutrition more precisely to help control their weight and health condition. And we combines nutrition tracking system, augmented reality and personalized recipes to help support this issue.

Problem statement

Literature Review, Interview

Our team designed qualitative interviews with 30 people who tried to track their nutrition habits and failed. There are pain points we’ve discovered through literature review and interview.

Some people believe that they are too busy to record their diet plan . Other believe that there is no precise way to track exact calories or nutrients consumption of food. Moreover, it is too troublesome and not practical to carry food scales for tracking diet and weighing food.

Design Process


Competitive Analysis

Pain Point - Users don't want to spend too much time on the app and they want personalized recipes to start building healthy eating habits.
Diet-tracking apps tend to include a dietary record that allows users to search and log food items to track their diet habits. Based on our research, the current apps have some common flaws:

1. Food options in the app are crowd-sourced which leads to incomplete nutrient profiles and compromise accuracy
2. It’s time consuming for users to manually enter food and portions by themselves especially when entering meals with more than a few ingredients or composite dishes with many ingredients. Moreover, it will reduce the motivations for users to keep track of the food.

Design Ideation 1

Grid Analysis, Storyboard

Grid Analysis
At the brainstorming stage, we found out we're trying to solve too many problems at one time. Then we releazied we should frame the problem. We used grid analysis to decide what kind of function should we keep and assigned each function scores from 1 to 5 in terms of innovation, usability and functionality. Finally, we added the scores in order to decide necessary functions embedded in our app.
With grid analysis results in mind, I drew the storyboard to sort out how this design could help the user to track their nutrition habits, provide personalized recipes and, motivate them to track their food during their journey. We removed the limitation and emphasizes the benefits of using this system and focused on how the system can help the user landed on their goal.

Design Ideation 2

Sketches - Paper Prototype

We divided the app into several parts and assigned to each team member based on who has the best thought on that part. My parts are recipes page, login/register page, favorites page and home page.
Sample of Paper Prototype

Usability Testing & Iteration

User Flow, Wireframe

During the process, I had the chance to examine our original ideas and information architecture. After we had finished creating the first version of project UIs paper prototype, we conducted the usability testing with 3 users. Moreover, we came out with a user flow that illustrates the experience as a first-time user and a continued user. By drawing the user flow, it could direct the way user will navigate through our app to achieve their goals.

We consulted with dietitians and involved dietitians in our design process. Moreover, the app content and food nutrition data source are gathered from USDA Food Composition Databases, USDA NationalNutrient Database for Standard Reference, food manufacturers, restaurants and supermarkets.

Based on the feedback we received from the usability testing on Design Ideation Stage 1 and dietitians, we slightly revised the design and created low-fidelity wireframe on Figma.
Sample of Low-Fidelity Wireframe

Visual Design

Design System, High-Fidelity Prototype

Full Prototype Demonstration - Click and see how our VR Recorder works!


Take way & Next Steps

Since this was a four-week project, it was hard to develop each feature throughly in a short time. We cut down a lot of features and design process to keep things rolling at a fast pace. What we're going to do next is: we will do second round of userbility testing and a a A/B testin to validate our solutions through the High-Fidelity prototype.

Moreover, since my team members have no prior experience in UX Design, it became my first time to led the project. From this experience, I understand it's important to evaluate team member's performance on each stage to make sure every one is on the same page and to play a central role in crafting a vision for the product and brand design

Overall, this course project helps me to rethink about what are the characteristics of a designer should be and how to become a more successful designer. Based on my prior working experience, as a designer, I used to only focus on visual stuff. However, I believe a good designer should not only have a keen sense of aesthetics to drive design innovation but also think outside the box.