top of page
iPhone 13.png
tittle.png

Quit Sugar App Design

# Manage Your Sugar

Anchor 1
甜甜圈.png

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

MacBook Pro 14_ - 2.png
Design Introduction
甜甜圈.png

Design Research

Design Background

MacBook Pro 14_ - 3.png

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

Frame 2.png

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.

Design Research
甜甜圈.png

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?

Frame.png

Participants

MacBook Pro 14_ - 4.png

Affinity Map

affinity map.png
affinity map 2.png
111.png

Persona

MacBook Pro - 12.png
MacBook Pro - 13.png
User Research
甜甜圈.png

Ideation

Brainstorm

Frame 4.png

Low-Fi UI Prototype

Frame 3.png

High-Fi UI Prototype

Frame 5.png
Ideation
甜甜圈.png

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

process test.png

Participants

MacBook Pro 14_ - 4.png

Feedback

Frame 7.png

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

MacBook Pro 14_ - 5.png

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.

User Test
甜甜圈.png

Design Delivery

User Flow

legend.png
user flow.png

Visual Design

MacBook Pro - 18.png

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.

Frame 8.png

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.

2.png
  • Posts: browse posts and flow bloggers. They could add friends. Bubbles' sizes are based on similarities.

000.png

List

  • Check the sugar content of each food based on different categories.

  • Details of each food.

  • Total sugar content.

  • Scan OR code.

4.png

Record

  • Daily records of each meal. Quitty will learn your flavor.

  • Collect your favorite meal.

  • Weekly statistic records.

5.png

Profile

  • Statistic records

  • Your posts.

  • Your achievements.

profile.png

Connect with kitchen sale

  • Connect with your kitchen scale to calculate sugar content when cooking by yourself

connect.png

Dashboard

  • Collections

  • Notification

  • Settings

  • Help

  • Feedback

000000.png

Video

Design Delivery

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.

Future Thinking
bottom of page