The Nutri Guide

My Role

My role in this project as a UX designer was to take ownership of the app’s design.

Timeline

August’23

Responsibilities

Brand design, logo design, concept design, user research, wireframes, usability testing, and the creation of the final high-fidelity prototype.

Introduction

When it comes to your food, there’s no “one size fits all." Nutrition is something most people struggle with. That said, we should all strive to improve our nutrition choices and lifestyle. The issue is that some of us do not know where to start. We assume that we have to walk into a consultation room. But in this day and age where the internet is thriving, there are some nutritionists with an online presence you won’t believe. You do not need to walk into a physical consultation room. Today, we are going to focus on one such app. 

In this case study, we will be diving deep into an app for personalized plans for nutrition and sustained lifestyle changes. That helps you learn to adapt to verified nutritional guidance and simple meal plans for a healthy lifestyle.

Discover ✍️

Problem

The current generation of adolescents is growing up at a time of unprecedented change in food environments, whereby nutritional problems of micronutrient deficiency and food insecurity persist and overweight and obesity are burgeoning.

Solution

Design user experience which delivers verified content in Nutritional Science to assess mind-body balance and adopt a healthy lifestyle for overall wellness.

Define 📝

User Research

Nutrition is a critical part of health and development. Before conducting interviews and knowing that there are a considerable number of nutrition tracking apps existing in the market, I wanted to seek an in-depth understanding, so I did some research to effectively dwell on nutrition, what happens to our body when we eat different foods, food safety, and consumerism. 

To begin with, I wanted to have some data on general well-being to have a rudimentary grasp on health management and nutrition. 

According to a journal article from Indian Journal of Medical Research

- by Singh Sunitha and Gopalkrishna Gururaj

Findings from research

Poor nutrition can affect your health in many ways. Not only can it lead to certain diseases, but it can also affect your mental health, energy levels, complexion, and your overall well being. In the short term, poor nutrition can contribute to stress, tiredness, and our capacity to work. Furthermore, it can lead to:

• Being overweight or obesity

• Tooth decay

• High blood pressure

• High cholesterol

• Heart disease and stroke

• Type-2 diabetes

• Osteoporosis

• Some cancers

• Depression

• Eating disorders

📝 In short, the nutrition you put in your body can help you avoid certain diseases that can put your life at risk and cause your health to deteriorate.

User interviews

In order to understand the users I’m designing for and their needs, I planned to have user interviews to understand how things work. Understanding their motivations was important in ensuring that the product and features that I develop get to the root of the problem. 

So, I interviewed ten (10) working adults aged between 18 and 65 who regularly engage in physical activity and food tracking, including both first-time and regular users of meal planning and fitness apps

I interviewed users to learn about the following:

• How old are you?

• Can you tell us about your diet?

• Which diet are you following?

• What is the purpose of your diet?

• How does dieting impact your mentality?

• Do you usually plan your meals ahead?

  If yes, how do you plan them?

• Do you use any particular app to track your diet, health or fitness?

  if yes, which one?

• How physically active you currently are?

Findings from interview

• 5 out of 10 participants said they actively keep track of their dieting progress.

• 8 out of 10 participants said that due time constraints, they find it hard to consume food as per diet requirement.

• 6 out of 10 participants said they couldn’t reach their goals daily and lost motivation.

• 7 out of 10 participants plan their meals ahead.

• 9 out of 10 participants said different diets impact their mentality, but they wish to get help to understand digestive process and improve their well- being by helping them identify the root cause of discomfort.

Competitive Analysis

Before jumping into the process of creating a solution, I checked out some existing nutrition apps and interacted with them. I also read their customer reviews to help me identify some drawbacks of the existing nutrition apps and what can be improved.

Pain Points

Based on the research above, three major pain points were identified from users:

Personas

After all the research, it was time to create personas that would aid me in understanding the problems better and determining the essential features that should be included in the app. 

Meet Ruhi and Chetan

User Journey Map

Mapping Ruhi’s user journey revealed areas where we can make improvements in her journey for a better user experience.

User Map

To achieve my goal of creating an intuitive design, I mapped a user flow that prioritized recognition over recall. This was done by creating a path that is familiar to the users.

Design ✨

Paper Wireframes

I started with paper wireframing, but before drawing my wireframes, I wrote down a list of all the elements I needed to include. 

Going digital

After ideating, I started working on the Nutri Guide app while referring to my user research, pain points, personas, problems, and user journey maps.

Based on the findings from user research during the initial phase, I developed screen designs accordingly.

Using the completed digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was health goals and concerns and a meal plan checklist.

Usability study

To get an insight into the app's usability before the introduction of the main visual elements, I recruited some participants to test out the low-fidelity prototype.

By watching the participants interact with the app and hearing their thoughts, I was able to identify problem areas in the app’s design. The results were noted down.

Changes Made Based on the Usability Study

Based on the insights I obtained from the usability study, I made some changes to the digital wireframes to improve the user experience.

Understanding macronutrients will help users stay on track and achieve long-term weight loss, so users don’t get to exclude or seriously restrict any of them.

Per serving information was added for users to save time.

Here comes the exciting part

I was excited to finally start working on the UI. From color palettes to type scales and bringing designs to life, Color has an essential role in the visual experience. It is the most specific element of all. I chose #D88D68. Orange is the symbol of enthusiasm, determination, youthfulness, stability, inspiration, and health.

final Design

I then proceeded to create mockups and a high fidelity prototype of the design.

Develop 💻

It was then time to create a website that catered to the needs of our personas. Since most of them wanted a website to use, we designed a responsive website that adapts to various screen sizes and resolutions.

Responsive design

Sitemap:

With the app designs completed, I started working on designing the responsive website. I used the Nutri Guide user flow to guide the organizational structure of each screen design to ensure a cohesive and consistent experience across devices.

The designs for screen size variations included mobile, tablet, and laptop. I optimized the methods to fit the specific user needs of each device and screen size.