Diet Tracker

The Product

Diet Tracker is an app that allows users to track the nutrition of the food they eat, like calories, protein, fat, vitamins & many more. The app targets users like health-conscious gym enthusiastic people or anyone who want to know about the nutritional values of the food they are eating or want to know about their daily nutrient requirement and their intake.

The problem

Users want to know, how much nutrients are they getting from their diet. Is the food they're consuming providing them with all of the nutrients they need


The Goal

Design an app that allows users to easily track the nutrients of the food they are eating and their daily nutrient requirement depending upon their height, weight, gender, and their goal.


My Role

UX Designer designing the app


Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.



Understanding the user



  • User research

  • Personas

  • Problem statements

  • Pain Points

User Research

Summary

I conducted interviews and created empathy maps to understand the users I am designing for and their needs. A primary user group identified through research was people who are health conscious and people who usually go to the gym. This user group confirmed initial assumptions about the Diet Tracker app. The research also revealed that lack of awareness is also the factor limiting users from tracking their daily nutrients. Other users problems were: Not everyone can afford a dietitian or nutritionist and is very difficult for the users to search for the nutritional value of every food item they eat.

Personas

Problem Statement:

Saurabh is a Software Engineer who wants to track his daily calorie intake because he is getting fat.

Pain Points

Lack of awareness

Some users don't even know that they can track the nutritional information about the food they are eating

Can not afford

Most of the users can not afford a dietitian or nutritionist to get advice about what kind of food they should eat and drink to remain healthy


Difficult to find

Users found it a tedious work to search for nutritional information on various sources for each food item, then noting it down to calculate those values




Starting the design



  • Paper wireframes

  • Digital Wireframes

  • Sitemap

  • Low-fidelity prototype

Planning the app

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well suited to address pain points.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing useful visual element placement on the home page was a key part of my strategy.

Information Architecture

Low-fi Prototype

Using the completed set of digital wireframes, I created a low fidelity prototype. The primary user flow I connected was searching for the food item and adding it to the diet section, so the prototype could be used in a usability study.



Refining the design



  • Design system

  • Mockups with usability study findings

  • High-fidelity prototype

  • Accessibility consideration

Design System

Creating the assets: Diet Tracker is a Health & Fitness app, so I chose colours like purple that combines the calm and stability of blue and the fierce energy of red. I chose sans-serif font "Poppins" that seemed fitting with the app's casual atmosphere.

Mockups

Optimizing the app:

Early design do not have option to see the full stats on the homepage, only you can see is calorie, protein and carbs. But after usability study, there is an option to see stats of every nutritional value.

Mockups

Improving the the app:

The second usability study revealed that not all users know much about impact of deficiency and excess of these nutritional values. To address this issue, I have added a section at homepage where users will get recommendation about positive and negative impact based on their last week diet intake.

Key Mockups

Log In

Adding Food Details

Profile

High Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for searching for the food item and adding it to the diet section

View Diet Tracker app here:

Accessibility Consideration

In-app guides

When the user sign up for the very first time in the app, "In-app guides" will guide the user about the features of the app and how to use them.


Alternative text

Provided access to users who are vision impaired through adding alternative text to icons and images for screen readers.


Going forward



  • Takeaways

  • Future scope

  • What I learned

  • Next steps

Takeaways


Impact: The app makes users feel like Diet Tracker really thinks about how to meet their needs.

One quote from peer feedback:

"The app made it so easy and fun to track nutrients of my diet! I would definitely use this app as a go-to for maintaining my healthy diet." - Raushan

Future Scope


  • Users can consult a dietitian or nutritionist through message or phone call within the app at the very least cost.

  • Users can explore food items based on nutrition like protein-enrich food, carb-enrich food, etc.

What I learned


While designing the app I learned that the first ideas for the app are only the beginning of the process. Usability study and peer feedback influence each iteration of the app's design

Iteration (based upon usability study) is the step that leads towards the perfection of the app.

Next Steps


  • Conduct another round of usability study to validate whether the pain points user experienced have been effectively addressed.

  • Conduct a competitive audit to improve the app and find how this app can stand out in the crowd


Thank you for your time reviewing my work on Diet Tracker app! 🤗