- Overweight & obesity are serious problems.
- During COVID-19, people work from home and lack of exercise.
- Obesity leads to cardiovascular disease, diabetes, cancer, and other problems.
- Four million people died from obesity-related diseases in 2021.
- A healthy diet could prevent rising obesity rates.
Cooking your own meals reduces the intake of excess calories and is a good choice for dieters. The random mix of rich ingredients within a certain range of calories also ensures nutritional balance.
Drinking water can help you eat less and lose weight, especially if you drink it before a meal. It also boosts the body's metabolism and accelerates fat burning.
DietWave tells you how many calories
- DietWave prevents user from overeating.
- Upload meal picture to calculate calories.
- Set daily drinking water reminder.
- DietWave provides health cook recipes.
"Diet"
Diet is an app to create a personalized meal plan to lose weight quickly and naturally. Lack of usability and accessibility, half of functions are hide in profile page, and two pages in navigation bar are less important for user to count calorie information.
"MyPlate"
MyPlate is an app to help people to lose weight and improve nutrition combination. It has Calorie Tracker to check food and exercise on iPhone, and Apple Watch. For some of users don't need fitness features, and work out.
Comparing the two competitors, they have common pro on meal plan feature.
I decide to simplify the process of DietWave, and combine the features, such as
the MEAL PLAN, CALORIE COUNT and the weight count and water statistics.
Health-conscious people
Age: 18-42
Busy bee, 8-10 hours work per day.
These health-conscious young people don't have a lot of time to work out, but can afford to make a simple lunch or dinner.
Brandon is a contract lawyer in San Francisco, and his busy schedule prevents him from having a time to work out. He works an average of 10 hours a day.
He was very distressed about his current body shape and wanted to find a healthy diet to control his daily calorie intake. Brandon doesn't have a clear understanding of the calories in each food, it's also hard to keep himself from eating junk food. So diet plan is his "last hope".
USER SCENARIO
1
Brandon is feeling unsatisfied of himself in the mirror.
2
Tons of work prevent him from going to gym.
3
Beside lack of exercise, he also like eating junk food.
4
He decides to get rid of the junk food.
5
He downloads DietWave to achieve goals.
6
Daily check the food and calories intake on DietWave.
Considering how much and how long information the users will capture in one page,
I kept one page content without scrolling, which not only demystify structure,
but improve flow of usability, making the layers of each page progress logically.
iteration 1: EDIT PLAN
- Combined four sketches in one page.
- Centered calorie deficit to improve readability.
- Created visual hierarchy with changing font size to emphasize data.
Iteration 2: DAILY RECORD
- Centered layouts, reduced blocks.
- Added calorie percentage on mid.
- Added small calendar to help users match date.
Register & Set up
- Select their gender, age, current weight and height.
- Click the "OK gesture", arrive at goal setting page.
- Enter the dream weight and set up a weight loss plan.
- Click on "Edit" to the sub-page.
- Set the specific plan time, plus daily calorie deficit.
Calorie deficit
A calorie is a unit of energy, with 1 cal = 4.184 joules.
A calorie deficit is when consuming fewer calories than burning.
Our body receives energy from what we eat and drink and spends this energy to perform every function essential to keep us alive, like breathing, digestion, blood circulation, etc.
“Croissant” design
I added croissant to calorie deficit design, because 210 calories are equal to one croissant, which helps users quantify calories intuitively.
Record calorie
- First page has today's calendar, calories ingested, the total calories.
- Daily resting energy minus the calorie deficit equal to 1713.
- Calories for each meal can be seen in the mid page.
- Select "Lunch", and click the + button, three options will pop up.
- Select the first "Add food".
- Click "photo", also manually type the name of the food.
- After uploading lunch photo, click "Analysis".
- The lunch report will appear below the photo.
Shuffle meals
Users can click the small triangle buttons to select each meal, including breakfast, lunch, dinner and snacks. Users not only see the calories for each meal, but also add food after selecting.
Food edit
Click "Edit" from Launch analysis page, click food avatar, users can edit each food name, type and quantity with different units.
Calorie analysis
Based on the amount of food added by the user, DietWave automatically calculates the total number of calories for a lunch.
Nutrition analysis
Click on "Nutrition" to view the nutrition data for lunch and the ratio of carbohydrates, protein and fat. Nutrition is also evaluated below.
Feature 1: Drink water
- Without water, the body cannot properly metabolize stored fat or carbohydrates.
- Water increases calorie burning and satiety.
- Large water bottle is a drinking progress bar.
- Water level shows how much water the user drank today.
- Left button is to record the water they drink every moment.
- Right one is to add reminder to drink water.
- Click "My statistics" to see the statistics of the users water data.
Feature 2: Weight analysis
Simply enter users' weight and submit it, after which it will be updated to connect to the weight scale using Bluetooth and automatically download the data.
Feature 3: Meals recommendation
- DietWave recommends healthy recipes to users with nutritional ratio.
- Click recipe's avatar to see the weight of carbohydrates, fats and proteins.
- Add recipe, and click on more recipe recommendations.
color & typography
I choose warm colors because orange and yellow stimulate the user's passion for weight loss, and these two colors also represent food and calories, and the saturation of orange reduce the user's appetite.
After designing this project I realized that my knowledge about diet eating has grown a lot and learned how to experiment with user interaction through the help of Boohee Tech. I also learned to reduce anxiety and cut out useless steps as a designer when there is a strong demand from the target audience.
Next step I will add more features in DietWave to expand the target audience.
- Fitness: provide workout training, convert how many calories corresponding to exercise into food, and help users create a mix of diet and fitness programs.
- Delivery: order food delivery by add recipe.