For the user research, our team designed qualitative interviews with 10 people who tried to track their nutrition habits and failed. There are five pain points we’ve discovered through literature review and user stories.
Sean used to track his diet with food scale. However, he feels like it’s sometimes too difficult to track it in an effective way because he is too busy. Unhealthy eating habits make him unwilling to track his diet habit.
Wayne works as a fitness trainer. He wants to lower his body fat from 14% to 10%. He used to download diet tracking apps to control the consumption of calories and carbon-based foods. However, he found current apps don’t provide accurate portions and calories of the food.
Our team conducted competitive analysis from literature review and implementation of current apps. Current solutions tend to include a dietary record that allows users to search and log specific food items. Some will use image-recognition to log in the food items and scan barcodes. They have common flaws listed below.
I identified that users don't want to spend too much time on the app and they want personalized recipes to start building healthy eating habits.
Based on the clear identification of our users’ pain points and the limitations of the current diet-tracking apps, we want to develop an innovative application for accurate nutrient calculation. We aim to make the tracking process as easy as possible, improve the accuracy of the nutrition prediction and provide personalized recipes.
We built the user flow after we decide functions in our app. By drawing the user flow, out team could imagine the way user might navigate through our app to achieve their goals. We used Figma to complete the user flow.
For the wireframe, we drew low-fidelity wireframe on the notebook and Figma. It's the samples of our low fidelity wireframe. During the process, we had the chance to examine our original ideas and information architecture. By drawing and designing the wireframe, we could check if functions align with solutions to satisfy users' goals in a feasible way. The sketch served as a guide for our mid-ifelity digital wireframes.
We focus on the features of our personalized recipes function in our app. It served as the guideline for our mid-fidelity digital wireframe. When users enter the recipe page, they can choose to read our recipe guides or to discover their favorite recipes. We provide different kinds of recipes for users with different diet habits. If the user choose "Fat Loss" recipe, they can unfold the food and examine ingredients and recipes of the food.
Then they can choose to add the recipe to their favorite or create own recipes.
The mid-fidelity wireframe of diary page and AR functions display how we help users to analyze the nutrients of the food. Users can choose to use AR or to scan the barcode to identify the certain food they are eating.
At this point of design process, we outlined all of the features and elements we wanted to incorporate into the design.
In order to help users achieve their goals which are to control their weight, we ask users to provide their goals and how they would like to achieve them in the first step.
Pictures below are major AR function in our app. Users can choose different ways of calculating calories of food. After they scan the box or the barcode, we provide different calories based on how users cook the food. They can save the results in the diary page.
We provide personalized recipes based on different needs of users.
Users can choose whether they want to build muscle or lose more fat. Corresponding recipes will appear on their pages.
If the user didn't consume enough nutrition, the app will notify them to consume more and where they can find food with this nutrition. It is more convenient for users because the app automatically calculate nutrients for them.
In the profile page, users can see their goals, the daily nutrition they have consumed.
We modified diary features and added more details to the descriptions of components of different food.
We consulted with dietitians and involved dietitians in our design process.
Users can also easily see what kind of nutrient they still need from the diary page. The notification function will also notify users of the daily nutrients they need.
We use augmented reality to interact with the physical smart lunch box to recognize the accurate portion size and the real weight of the food. With this function, we create a space for users to get the nutrition immediately and avoid using disposable boxes.
With AR and valid large database, we promote nutrition education and deliver behavior change. When users scan the food, the virtual nutrition element cards will pop up.
Users can use our app to acquire knowledge about diverse nutrients and weight management. In addition, users don’t have to bring a food scale to weigh their food. This app is like a portable scale.
We provide personalized recipes to cater to the user’s diet plans. Users can choose muscle building recipes, low carbon diet plans, weight loss plans and so on. The combination of personalized recipes and diet-tracking features can promote self-efficacy by allowing users to effectively work toward simple personal goals.
Since the presence of behavior change features generally tended to be correlated with higher usability.
In terms of usability, users told us our app is easy to use, all the functions are well-integrated as well as the consistent and eye-catching interface. They like the recipe feature because she can learn how to make healthy snacks by herself.