Sugar Tracker
An interactive prototype application to monitor sugar intake
Sugar Tracker
An interactive prototype application to monitor sugar intake
Type
Individual Work
Role
Design
Role
Design
Term
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
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?
”
"Have you ever thought about you are consuming too much sugar? "
"Have you ever thought about you are consuming too much sugar?"
"Have you ever thought about you are consuming too much sugar?"
Things I find
Things I find
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.
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.
Understanding
Understanding
"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
- What's already there in the market
Product Included
Calculate
Calculate
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.
- Transfer them into features
- Transfer them into features
Easy input Process
Easy input Process
Visualized Data
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.
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
”
Here comes to the exciting part --My design Solutions.
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.
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.
- 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.
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.
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.
- 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?
- 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
01
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.
02
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.
03
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
04
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.
05
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.
06
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
- Motion Graphic Sequence
Showcased at Imagine RIT and Bevier Gallery the Vignelli Center for Design Studies
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 E-commerence App Web, Search & Browse
Walmart E-commerence - Duplicate App Web, Search & Browse
Walmart LabUX Design Intern
VolterraEdge Enterprise - UX Intern
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: shiwen3795@gmail.com
