Quit Sugar App Design
# Manage Your Sugar
Design Introduction
Design Statement
This is an exploration of UIUX design. We focused on health issues. Taking sugar cessation as the starting point, we explore how the interface design can help users improve their lifestyle habits and eat healthily.
Design Description
This design is aimed to help people who want to quit sugar to keep in good health. They could use the app to manage their sugar intake. Filling out basic information, the app will calculate their quit sugar goals. They could record their daily meal and set a quit sugar challenge. When cooking by themselves, they are able to connect the kitchen scale with the app to measure sugar content.
Design Duration
Sep. 2021 - Dec. 2021
Design Team
Personal project
Design Tools
Figma
Illustrator
Photoshop
Adobe After Effects
Design Process
Design Research
Design Background
With the development of society and lifestyle changes, some diseases that used to be more common in the elderly population have become more and more common in young people, seriously endangering their health and affecting their lives. The diet structure and habits of the busy young people have also changed. People who rely on take-out and fast food consume too much sugar unintentionally. Faced with the incredible pressure of life, many young people choose sweets to relieve stress.
Excessive sugar intake also has many dangers：
-
Causes myopia to deepen
-
Diabetic eye disease harms the fundus of the eye
-
Cataract induced
-
Induced open-angle high intraocular pressure glaucoma
-
Converted to fat
-
Induced diabetes
-
Affects appetite and leads to nutritional deficiencies
-
Excessive stomach acid causes gastritis
-
Causes tooth decay
-
Can lead to calcium deficiency
-
Prone to skin diseases
-
Causes metabolic disorders and weakens the immune system's ability to prevent disease
-
Excessive consumption of sweets can produce a physiological dependence similar to chemical consumption
Changes
Young people are becoming concerned about health issues and looking for solutions. The current mainstream approach is fitness and a proper meal mix. Quitting sugar to improve the structure of the diet is also receiving attention from young people.
User Research
Through user research, we understand users rationally, extract typical characteristics according to their purposes, behaviors, and attitudes, give a persona, and finally dig out the people's preferences and potential needs for products.
Semi-structured Interview
Interview questions:
-
Are you facing much stress in your life? Have these pressures caused any negative physical effects on you?
-
Has the situation you are currently facing affected your eating habits? What is the current way of eating?
-
Do you realize that you're consuming too much sugar?
-
Do you know the dangers of excessive sugar intake?
-
Have you learned about quitting sugar? What do you think is the hardest part of quitting sugar?
-
Do you know how to quit sugar?
-
Do you think that quitting sugar will influence your lifestyle?
-
How do you think the app design will help you quit sugar?
Participants
Affinity Map
Persona
Ideation
Brainstorm
Low-Fi UI Prototype
High-Fi UI Prototype
User Test
We invited three people to participate in the user test. We designed the low fidelity interface prototype with Figma and projected it on the iPhone XR.
Goal
Our user test had two primary goals: evaluating App design rationale (including categories, interactive and icon), and whether our users’ mental model of the application matched that of our own.
Test Process
-
Register the App
-
Check quit sugar goals and set up a 7-day challenge
-
Add what you want to eat and calculate sugar intake
-
Check statistic Record
-
Browse friends' posts
-
Connect the app with a kitchen scale
Participants
Feedback
My Insights
-
Change the app information structure.
-
Add achievements part to motivate users.
-
Distinguish male and female users. Add a menstruation button for female users, and generate a more suitable schedule for our target user.
-
Add a profile page to check records, posts, and achievements
-
Change visual design color.
Iteration Design
Change visual color to purple
Move "Knowledge" and " Circle" to the home page.
For female users, we add menstruation time in filling out the basic information phase. And considering the fluctuation of menstrual time, we add a button on the "goal" page.
Add "Profile" page, users could check their weekly records.
Design Delivery
User Flow
Visual Design
Interface Design
Log in
-
Click the logo to start.
-
Log in/sign up.
-
Fill out basic information to calculate sugar intake.
-
For the female user, they could add their menstruation date. Quitty will adjust their quit sugar goals.
Home page
-
Four categories.
-
Daily sugar intake process.
-
Recommendation recipes based on users' flavor.
-
Goals: check daily sugar intake process and sugar content ranking of food.
-
Challenge: set up a challenge. Choose the duration and add protocols.
-
Knowledge of quitting sugar.
-
Posts: browse posts and flow bloggers. They could add friends. Bubbles' sizes are based on similarities.
List
-
Check the sugar content of each food based on different categories.
-
Details of each food.
-
Total sugar content.
-
Scan OR code.
Record
-
Daily records of each meal. Quitty will learn your flavor.
-
Collect your favorite meal.
-
Weekly statistic records.
Profile
-
Statistic records
-
Your posts.
-
Your achievements.
Connect with kitchen sale
-
Connect with your kitchen scale to calculate sugar content when cooking by yourself
Dashboard
-
Collections
-
Notification
-
Settings
-
Help
-
Feedback
Video
Future Thinking
-
More innovative ways to quit sugar. The app can connect with the fitness app and recommend recipes and quit sugar schedules based on activity intensity.
-
A new channel for users to meet more friends.
What I learned
-
In this project, I learned how to use different design research methods.
-
When doing design, I categorize different user groups.
-
Visual design should match design goals.