Sugar Tracker

An interactive prototype application to monitor sugar intake


Individual Work




2019 Spring

The goal of the project is to motivate people to be healthier,  help them to make healthier decisions and make being healthier more convenient. Using my passion, UX and visual skills to let my user have a better understanding of sugar intake and make better decisions


Have you ever thought about you are consuming too much sugar?




Artboard 3 Copy 5

Things I find

Artboard 1 copy@4x-8f
Artboard 1@4x-8f
Artboard 1 copy 2@4x-8f

Too Much Sugar Intake

People take sugar unconsciously

Hard to Track the Amount

Most individuals eat too much sugar per day and they did not notice that. It is hard to notice the problems because they did not know the sugar containment of each food and it is hard to track that. Also, people are too lazy to input all the food data that they eat every day.  The problem is people consume too much sugar and they even don’t think that is a problem.



"how might we" help me uncover the deep motivations of thinking about the user's pain and assumptions that underpin a person’s behavior then reframe them into the opportunities. 



The HMW exercise helps me to brainstorm more what I can provide more to the user, I choose to focus more about how can I help them to achieve a long term goal, and how to make the app more attractive.

Then I conducted a competitive analysis to see what how is the way that current application or method to track the sugar intake. Trying to define the gaps in the market and what I can do to improve the market.

- What's already there in the market

Artboard-min (1)

Product Included


Database based

Keep track of eating

Ember is an applicatin that includes a temperature control mug, which provides me an idea that what if there is a mug cup can calculate the sugar amount in the drink.

Super tracker is a web app that user type the food and the amount of the food it will provide the sugar amount. 

It provides a fat tracking in user's daily life, especially for diabetes people who has a strong limitation for their eating.

Similiar with the previous one, the app is more foucused on food that are already in the system and provide user the statistics of the sugar for the food.


What I learned from the current market is trying to make the complex statistics more understandable and accessible for the user; trying to build the application that can be more involved in; optimize the input process; give the user instant feedback.

The info data for the current app is way too hard to understand

User can't feel involved in the data and information, they don't understand what the meaning of the data

Most of the time user just forget to input or even lazy to input the data

Most of the current app user needs to type all the food information they take to the app

Most of the app they don't suggest user what to do, what not to do

Even the user filled all the information the app requires, there's no more the next step for users to do to have a better habit

- Who are my Users

In order to understand my potential user, I conducted several interviews trying to define find the intercommunity and the difference. I transferred the interviewees into two different types of persona.

Artboard 2 Copy 13-min

- Transfer them into features

Page 1-min
Pagge 1-min

Easy input Process

Visualized Data

Instant Suggestion

What I learned from user's pain I find that they complain about the complex input process, hard to understand the statistics, it is doesn't provide the accurate amount moreover, users expect more about next step. It should not just provide the statistics and that's it. 


A Use case scenario was created to define the different context for the user.



Here comes to the exciting part --My design Solution




To sum up, from the previous research, defined user and context I build,  I assume the Visualized dashboard and clear information is the key part of the project.  

- Design Solution

In order to get global thinking of the interaction and the workflow, a lo-fi wireframe was set up to help me to get a better understanding of the context.

Artboard (4)-min

- Design Principle

Since it's a conceptual project, I don't pay much attention to the technical implementation. I want to make sure I create something attractive enough for users to use it. Or even for the viewer can get an understanding of sugar intake, and they can do something in their daily. That will be a huge meaning for me.

Artboard Copy 18-min (1)

These are four main iterations of data visualization view. The goal of the graphic is the comparison of the sugar intake amount and the daily sugar intake amount. I tried with the different hierarchy to present the data visualization for users to understand the information. Also, different color and illustration were made to present a different visual style. 

Artboard Copy 22-min (1)
  • The visual is too realistic
  • The design for dashboard and the list of food is not consistent
  • Hard to compare the take and needs
  • The data visualzation just showing the data hard to interact with it
  • Hard to compare two line chart without any indication
  • How can the line chart showing daily comparison
  • Thinking more about the way how the user can interact
  • the user can treat is as a rotatable 3d dashboard, not enough space for fingers to rotate?
Artboard Copy 14-min
  • Use the spilled bubble to show the sugar intake amount is over limit or still under control
  • use a string to  indicates user they can click and drag to the different time  
  • Click the Arrow or scroll down to see the list view of what you take for the day

- User story


As graduate students who always busy with their work and don't have much time to cook themselves. They find that there is an app that can help to set up a goal to stay healthy and record their daily. Then start to use the app.



Let’s suppose you are now in a restaurant and have already ordered a dish, you want to know the sugar amount about the food and open the app to scan the food, you got the amount about the dish by using the location of the restaurant it will automatically load the menu of the restaurant and analysis the sugar about of food.




After finishing your food, you bought a drink, you saw the nutrition facts bar and thinking this is so hard to understand what number means for what you decide to use the app to record what you drink, scanning the nutrition bar you got a visualized sugar amount instead of carefully read the number from the chart and you easily got this drink contains 210 grams of sugar and is almost 80% of your day 


Artboard Copy 13-min (1) (2)


After you add the drink to the amount, you got the overall sugar intake record on the main page and you are wondering what you took several hours ago, Click and drag to different color ring sections to view the sugar amount for the different types of the food has taken.


Artboard Copy 11
Artboard Copy 14-min


You got you can’t drink the coke now and wondering what you can eat, for now, you filter the recipe to know what to cook later, you filter your requirement and choose a dish to cook. After Dinner, you are thinking to do some exercise. For this app, we are not just recording what you eat, based on your goal, give you the specialized recipe to sweet your teeth, give you acceptable exercise when you out of limit for the day but also give you recommendations based on your goal.


Artboard Copy 12
Artboard Copy 15-min
filtered copy


The conceptual idea for a smart bottle, in some of the context, we might have a large size of drinks and user might not drink it at one time, I'm thinking to provide the user a smart bottle that when you pour your drink, it will analysis the sugar amount for you and sync to your phone.



- Motion Graphic Sequence

Showcased at Imagine RIT and Bevier Gallery the Vignelli Center for Design Studies

IMG_2317-min (1)

Insights I've taken

During the design iterations and getting feedback from classmates, I find that there is a lot to consider when designing for the data visualization in the phone. How to balance the text and the graphics is very important, how to make the user understand the data.

The project influences me a lot, not only because I learned a lot using the tool I am not that familiar with or I push myself to think deeper in user, it makes me rethink about my lifestyle and I control my sugar intake for 2 months and I’ve lost 30 pounds already and become more positive and confident.


Next Step

I designed the application without development knowledge. I hope it can be implemented one day.

If possible, I'm also thinking of make the application connect with the users' payment card or payment system especially for diabetes, when the sugar limit is out of limit for the day, when they want to purchase food that contains sugar, the application will remind them. 


More Work

Walmart Labs - EcommerenceProduct Design Intern

Sugar Tracker Concept + UX + Visual Design

Pill Memo Concept + UX + Visual Design


Youtube RedesignSide Project

Spotify RedesignProject type

Thanks for Watching !!!


Are you Looking for designers that passionate about

converting complex problems into meaningful experiences?

If so, let's get in touch!

Feel free to shot me a line:

Or find me on Linkedin & Behance & Dribbble


Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!