Nutro™ (UX/UI)

Should you consider supplements?

The Client

The fresh food you eat is loaded with nutrients necessary for good health, such as magnesium, calcium, and vitamins A and C. But many older adults are not getting enough nutrients from their diets. The typical American diet is heavy in nutrient-poor processed foods, refined grains, and added sugars—all linked to inflammation and chronic disease. Yet even if you eat a healthy, well-balanced diet, you may still fall short of needed nutrients. That is a consequence of aging. As we get older, our ability to absorb nutrients from food decreases. Also, our energy needs are not the same, and we tend to eat less.


Because the app needs the user to scan the food and other things they ingest, this adds a new step to the user's daily routine before they get to enjoy their meals and snacks. This task can be viewed as annoying and difficult to remember.


To develop a product with an AR feature that scans the food, drinks, or vitamins and supplements the user's intake. Based on that data, the app will provide the user nutrition facts and suggestions for how to improve health and diet based on nutrition that they lack. The app will give its users sources of the missing nutritional elements, for example, food and vitamins/supplements recommendations. In the beginning, the app will provide food recommendations because it is better to get the nutrition from the source. However, if this route does not improve your health, the next step will be to supplement recommendations. Also, at the end of each week, the app will provide the users with information stating your level of diet and ways you can improve, promoting a healthy lifestyle.

The Role

As the main UX/UI Designer, I was involved in all phases of the project, from mapping out the problem to delivering final designs.

Competitive Analysis

Other Competitors

My competitive analysis focused on the mix of the most popular apps, so I could highlight the strengths and weaknesses of these products in order to make more informed decisions about my product strategy.

The first step into confronting this challenge was to have a look at the existing competitors in the field. I had a look at similar food scanner apps and I noticed that they had the same design and feel like their digital presence. However, this featured a lack of nutritional information provided that was being offered to their customers.

This led me to look at the existing digital solutions in the nutrition market. I started looking at diet tracking apps as that was one of the features. Some of the apps I considered and studied were Lifesum, My Plate, and Eat This Much. All of these generally featured macronutrients, data visualization, and dietary goals. However, one thing all of them did as well was to require users to input everything they eat and how much, exactly, they eat. Sometimes even requiring them to follow a strict diet plan laid out by the app.

Design Process

Design Thinking

The development process of the app was shaped by the principles of the design thinking methodology. It helped me to keep a solution and action-focused mindset with every design phase. Also, it assisted me with focusing on users and their needs at each phase of the design process:

• Formulate and validate the hypothesis.

• Conduct early user testing with rough sketches to unveil unexpected pain points.

• Focus on research results to create features that users really need.

• Develop a custom toolkit that includes sketch libraries, inspiration boards, and survey forms.

• Externalize the work using sticky notes, printouts, or sketches.

Research & Problem Definition


People who are not able to lead a balanced diet and lack essential nutrients, eventually get some health issues so, in order to prevent it, they begin absorbing supplements. However, it is very dangerous to take them because each vitamin has its own dose. But how can people be aware of that?

Project Goal:

So, the user will be using an app that scans his/her intake like food and any sort of supplements if he/she takes it. Then, the user will be asked about his/her goals in order to achieve them without potential issues since taking supplements could negatively impact someone with a certain condition. Afterward, based on the information, the app will provide its user with nutritions that they lack and recommendations for how to better diet. At that point, the app will allow its users sources of the lost wholesome components for example nourishment, and vitamins or supplements proposals. Within the start, the app will give nourishment suggestions because it is way better to urge the nourishment from the source. In any case, on the off chance that this course does not move forward your wellbeing, the other step will be to supplement proposals. After each week, the app will give the users information stating your level of slim down and ways he/she will be able to make strides, advancing a sound way of life.


Conducting a User Survey

I conducted a user survey to prove my hypothesis and gain user insights. To reach a larger audience, I wrote a short 8 question survey and posted it on different online communities and Facebook groups that matched the target user profile. I received enough responses.


• They want to monitor nutrition without the hassle of inputting detailed meals and calorie-counting.

• They value fresh, quality, and organic produce.

• They want to know the nutritional information of food before buying it, but there is not enough readily available information for them out there.

• Most of them are familiar with nutrition and already take some supplements.

• Half of them had some experience with using a nutrition app.

• They do not follow a strict diet, but once faced with a need to have a diet due to some factors such as slight overweight, insecurities, and health issues.

• Only a few believe their diet is healthy; however, the rest of them seek improvements.


Conducting an interview with Nutritionists

During the research part of my project, I interviewed two nutritionists and two of my previous fitness coaches to gain a better understanding of supplements intake and diet.

3 Key Interview Questions:

• Can you tell me about the last time you followed a diet?

• What was the hardest part of it?

• What were the hardest parts of meeting your nutritional goals?

Interview Questions:

• What kind of diet would you help someone develop if they are trying to lose weight?

• How would you advise a client to incorporate nutritional supplements into their diet?

• Which aspects of nutrition would you address for someone trying to gain weight?

• How would you develop a meal plan for elderly clients?

• Would you consider collaborating with a fitness trainer to help a client achieve optimum health?

• How would you address the nutritional needs of a client with Type 1 diabetes?

• What kind of diet would you prescribe to someone with an autoimmune deficiency?

• What nutritional recommendations would you make for vegetarians?

• What kinds of diet tracking methods would you use with your clients?

• In what situations could dietary supplements pose a health risk?


• For best absorption, some dietary supplements should be taken with food; clients may need to take others on an empty stomach. 

• Too much vitamin A can cause headaches and liver damage, reduce bone strength, and cause birth defects. Excess iron causes nausea and vomiting and may damage the liver and other organs.

• The easiest method you can use for the collection of info is via a questionnaire form, which will permanently capture a sufficient quantity of all the details you need. For some, transitioning onto a completely new diet is very difficult, and this will be your main method to track the transition phases and to help with these. 

• Seniors need fewer calories than they may have needed when they were younger. This is partly because they tend to be less active. However, their need for certain vitamins and minerals does not diminish. As a matter of fact, because their bodies tend to become less efficient at absorbing or producing some essential nutrients as they get older, seniors may actually need to consume more foods containing important vitamins and minerals like calcium, and vitamins D and B12.

• Some vegetarians rely too heavily on processed foods, which can be high in calories, sugar, fat, and sodium. And they may not eat enough fruits, vegetables, whole grains, and calcium-rich foods, thus missing out on the nutrients they provide.

• Avoiding caffeine, alcohol, sugar, grains, dairy, and red meat, but focusing more on fruits, vegetables, healthy fats, and fish can ease pain and heal autoimmune diseases.

• Most people with diabetes can control their blood sugar by limiting carbohydrate servings to 2-4 per meal and 1-2 per snack. Balancing caloric intake and expenditure for optimum weight management.

Understand the Challenge

There are multiple users that use diet apps in general and what diet subscribers want.

• People who like to keep themselves healthy all the time.

• People who exercise once a day but believe more in dieting.

• People in between want to be fit and healthy at the same time.

• Subscribers want flexibility in designing their own diets and tracking their food, exercise, and water intake.

Asking multiple users, I came to the conclusion that people like to keep track of their fitness routines + keep track of their meal plans and an app that would help them keep on track.

Secondary Research

For this method, I assimilated basic information and increased the knowledge about the supplements and their causes via online articles, blogs, and forums.

• Taking too many dietary supplements can actually harm you. For example, getting too much of a particular nutrient without realizing can lead to dangerously toxic levels.

• Multivitamins do not reduce deaths from heart disease. Also, they lower the risk of death from heart disease in women, but not in men. However, multivitamins showed no benefit in preventing early death.

• Doctors advise people to try to improve their diet before they use supplements. That is because nutrients are most potent when they come from food.

• If you are unable to make dietary changes, or if you have a genuine deficiency in a particular nutrient, such as vitamin D, both doctors say that a supplement may be helpful.

• Roughly 90% of American adults do not eat enough fruits and vegetables, but many are trying to make up for it by popping pills. 75% of U.S. adults take a dietary supplement of some kind. Multivitamins, many people believe, are a one-step way to get the nutrients they need.

• About 30,000 U.S. adults participated in the National Health and Nutrition Examination Survey from 1999 to 2010. Each person provided information about their supplement use in the past month — more than half had used at least one — as well as their dietary habits. During the follow-period, which lasted about six years, more than 3,600 people died. After examining the data, it looked as though dietary supplements were associated with a lower risk of early death. It became apparent that mostly higher-income, better-educated people — who are more likely to be in good health, to begin with — were taking supplements.

• People who took high doses of calcium via supplement had a 53% higher risk of dying from cancer than people who were not taking supplements. But excess calcium from food was not associated with a similar uptick in mortality risk which suggests that the body may not be able to clear excess supplemental calcium as well as it can natural calcium.

• People who took vitamin D supplements but were not deficient in vitamin D also had a higher risk of dying during the study period, the researchers found, but the supplements did not seem to boost death risk for those who were lacking in vitamin D. It has been shown that vitamin D supplements may reduce risk of death and disease.

• One 2015 study estimated that unsafe or improperly taken supplements, including those for weight loss, send more than 23,000 Americans to the emergency room each year.

• A few populations may benefit from certain supplements, including the elderly — who often struggle to absorb nutrients from food — and those with dietary restrictions that may lead to deficiencies. Women planning a pregnancy can benefit from a range of nutrients, such as folic acid and iodine, that reduce the risk of birth defects. People with limited exposure to sunlight would certainly be advised to consider a vitamin D supplement. Frail and aged people are candidates as well due to food access problems, chewing and swallowing difficulties, absorption problems, and medication. Some vegetarians and people following chronic low-calorie diets all make the list as well. And, of course, people with a clinically diagnosed deficiency could all benefit from supplementation.

User Personas

Venus and Mark

At first, I created provisional personas of potential multiple users that use other nutrition apps based on online research and my understanding of people who I knew that used big nutrition apps. These personas were created with assumptions and were not entirely research-based, but it was something that helped me understand this project more and guided me in the early stages of the project.


• They helped me to focus my efforts on what functionality to prioritize by adding a real-world consideration to the conversation, I was able to target the customers that really matter to my project.

• I needed them to create reliable and realistic representations of my key audience segments for reference. These representations were based on my previous qualitative and quantitative user research.

• I described a number of specific situations that could trigger the use of the product I was designing. Then, I gave each of my personas life by creating scenarios that feature them in the role of a user. Scenarios usually started by placing them in a specific context with a problem they want to or have to solve.

• Since my users wanted to know detailed information about the product before buying it, I realized it would be great having a scanner feature that tells all nutrition information and how it fits your diet. Also, to make it more personalized, I found it good if the app asks the user's goals in order to correct the diet and eliminate any risks.

User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them find an approach to better understanding their expectations and reach their most important goals with the product as quickly and easily as possible.


• First, I mapped out all the possible customer touchpoints. Then, across these various touchpoints, I could identify the users' important goals. For example, an athlete or even amateur may typically become aware of what kind of nutrients they need to take without researching it on the internet, and finally, buy everything essential for him/her.

• By narrowing down my user persona like understanding goals, outlining touchpoints, and then identifying all pain points which led to possible steps. For instance, most of the users did not struggle at each step; however, they faced some difficulties such as uncertainty about getting specific nutrients, dislike towards a food recommendation, high prices for some supplements, and motivation to follow an assigned diet.

• For one particular step "Scan food in-store", I came up with a feature that scans food and shows all essential nutritional elements because nutrition facts on food packaging can be a lot to take in. The app will give the user this same information in a more productive way and whether or not the food item matches your diet in order to make sure they have the healthiest and educational experience.

• It helped me to identify some gaps within a product, for example, when users got insights about the diet, they were provided a ton of information which made UI slightly complicated and also confused users.

Customer Journey

To understand how customers find and interact with the service I created a Customer Journey Map. Also, it allowed me to find areas where I needed to improve designs through their experience.


• They realized the need for a solution after increased health issues due to poor diet and lack of nutrients.

• They found solutions for their problems effortless because of the collaboration between their past experience with nutrition and the accessible information in the app provided by notifications.

• The first impression was confusing due to the lack of knowledge about AR and its functionality since my target group was older adults, they may have had a hard time understanding all visuals. However, they adapted eventually because of the need to have a suitable diet in order to support health.

• They became more aware of their diet and perfected it.

• The users mostly interacted with the product via AR feature and recommendation messages due to their easy usage.

• The main pain points of the whole journey were purchasing recommended food/supplements and changing routine due to taking a picture of the consumed meal. The app will have a scanning feature, so users can shop for foods with having the needy information about that food's nutritional information.

• The solutions for these gaps were recommending the most common and easily accessed sources of nutrition, and also reminding the users about the needed data uploaded by pictures.

Empathy Map

To be able to further understand users, I put myself in their position to be able to grasp what their true problem was, so I developed an Empathy Map for them.

The main insights that were taken from this exercise were that:

• They think and feel that the diet does not provide them all essential nutrients; therefore, they believe some of their health issues are caused by it. That is why they try using the app to better their health.

• Their main pain points even after adding the missing key nutrients, still leaves them confused about what causes issues. Also, some of the given information is too hard to comprehend; therefore, it gets skipped or misunderstood which could potentially lead to different problems. Lastly, half of the given recommendations for necessary food supplements are expensive which pushes them away from proceeding to use the app.

Prototype & User Testing


I usually start the design process with low-fidelity wireframes. It is a very efficient way of communicating design while allowing me to try out a multitude of ideas and iterate them before settling on one.


• In the beginning, my sketches mostly served for brainstorming in order to find what design elements will be needed for the final version. I do not stick to a certain screen or design since I used to mix all visual elements together across the different screens. It helps me to think outside the box and make designs more creative.

• For example, according to the research and surveys, I found out that most of my users got annoyed by filling in the information about the diet/food. It led me to come up with an integration of food choices (images) in case if the app cannot recognize what you are eating + to better its capability later. Also, they wanted to track all information about the diet and calories with no hustle, which pushed me to bring necessary data on the main screen.

• Along with the process, I developed 24 screens which are 8 screens per paper. Each of them showcases a certain functionality of the app and the journey through them. I used to sketch a lot of versions since it gives me more opportunities and ideas for the final designs.

• The main differences between the screens were layouts of the content because I wanted to make it simple and significant which makes it easy to comprehend since most people can become confused with dense information.

• Personally, I chose the first page of screens because the layout seemed very natural that gave me the ability to easily communicate the information to the users. The space in regards to design is more activated which made it more balanced. These designs also provided more interaction such as infographics, charts, and tabs.


At the beginning of my design process, I created wireframes for mapping out the functionality of the pages, catching problems early, and saving time on revisions later.


• It was useful because it allowed me to make changes at the wireframing stage, rather than making changes in the final mockup with plenty of visual elements. When jumping right into designs I sometimes forget about the usability and functionality for the end-users, so by eliminating the color and imagery, I was forced to think about only the functionality of each element on the page.

• I chose to make high-fidelity wireframes. They helped me to validate complex interactions during user testing since they provided test participants with realistic representations of what the product will look and feel like.

• I used Adobe XD for wireframing, so I could interact seamlessly with integrations to Adobe Illustrator.

• All wireframes were tested by users because it was a sure-fire way to ensure that I integrate a great UX into my product from the start + helped me to prevent needless reworks and save time, energy, and more. My whole user testing process started with drafting wireframes and getting them in front of my target group in order to get quick feedback without a significant investment of time. The process from idea to evaluation took several hours and it allowed me to quickly validate my work and move toward a new direction.

• During the journey, I had four iterations until I conducted user testing that led me to the current version of my product. Based on the target group's opinions and suggestions, my previous edits were too complicated for them as a lot of information was going on that made some of them quit right away or feel lost.

User Testing

Before designing the final versions of the app, I did a testing round in order to identify if users are able to complete specific tasks successfully, pinpoint changes to the design that might need to be made to address any shortcomings to improve performance, and learn more about the users' behavior and preferences.


• I was aiming to improve what I already had. For example, identifying the main issues, the strengths, and opportunities for further enhancement. Since it was also a school project, I really needed some extra time, so user testing helped me guarantee that by saving me from making costly mistakes.

• My target group was older adults that lack nutritional education. Also, for those who are not into sports but want to lead a healthy lifestyle. Since I had a chance to visit my friends' families, I could interview their families that matched my audience.

• Considering we are in the light of a pandemic, some of my users from the target group were outside of the country, so I did not have a chance to interview them in person. That is why I used different methods and one of them was a phone interview where I verbally instructed participants to complete tasks on their device. It was an excellent way to collect feedback from test participants since all of them were scattered around different parts of the globe. The other method that I applied was unmoderated remote usability testing where I asked them to complete tasks in their own environment using their own devices without my presence which led to the product being used naturally.

• When I tested my app through the users, I got feedback that the app was not personalized and could lead to possible risks since it lacked important information about the user like height, weight, and goals. All those factors vary the number of supplements the user needs to take because high dozes can lead to different health issues. Later, I ran my app through testing for the second time, I was told that it was too much information and they got lost after 5-8 minutes of usage. For example, some of my screens already had the same information which confused users after seeing one of those screens before.

• Based on their insights, I had to go back and redesign my first pages by implementing questions like "What is your age/height/weight/goals?", so the app could better supplement suggestions. I also changed how I chose to deliver key information to users by depicting the info via visuals (diagrams, graphs, charts) to make it easier to comprehend, so they would not skip over said information.


I used moodboarding to provide myself with ideas, concepts, and the general direction I want to take for the design. First, it helped me in organizing ideas by putting all concepts and inspirations in one place, so I could quickly and effectively verify the composition and its harmony. Secondly, it was a great cure for the lack of ideas. Looking at things I liked that also matched my concept and inspired me, I could decide much quicker about the next steps to take.


• Green: #047659

• Dark green: #03523E

• Light grey: #F5F5F5

• I used a natural color palette with green because it symbolizes nature, good health, and a rooted lifestyle.


• Proxima Nova Bold

• Proxima Nova Regular

• Many sans-serif fonts are generally plain and minimal and have a lot of personalities that may not be suitable for everything. Proxima Nova was a good option so that the content could speak for itself. Likewise, it sends a message that you can entrust an app with your health. 

Final Design

Once I tested out all usability mistakes, I started designing the final screens in Adobe XD. During the whole process, I kept going back to the user testing stage because the new versions caused new issues which had to be fixed.


• I followed a fresh visual style which you can see in the simple and sleek design. The color also adds to this effect because the tint is warm and has a forest feel. Because this is a health app, I wanted them to feel refreshed by the design as well as the feature the app offers.

• I designed my app specifically for the IOS platform simply because I am more experienced in working with Apple's Human Interface Guidelines. For example, on some screens, you can see depth in them by adding a blurred background to create the feeling that the items are floating in their own space. When it comes to animation, I wanted to get my users from A to B without distracting them from the real content by creating a window, no complex motion that would otherwise deter users from the tasks. Also, I decided to use Apple's style of navigation bar because I needed to think carefully regarding the main functions of the application. By doing this, I was able to better help my users by providing them with less clutter. I wanted the navigation bar to add to the overall design, not just a function to hide, also this made it easier for the users to find the functions quickly.

• The design helps the users achieve their goals because it is simple and clean which helps them comprehend the information easily. The visual elements help the user remain active within the app and provide them with information much faster. It also reflects a user that wants to meet their goals and quickly.

What I've learned

I enjoyed working on this project. What I learned the hard way is that I really have to spend more time with the following factors:

• Simplicity is a strength. As a UX Designer, I am often lured by attractive and trendy designs. But I must always remember the "why". The main goal is to understand the users, their problems and then come up with a design that solves them.

• The process is essential. For a project that is vast, it gives me a way to navigate through what can be a foggy route. This is especially helpful when you are just starting out.

• Research is a must. I could have designed a product users love without the help of the people who will actually use it. The user survey revealed unexpected information and made it possible to adapt the product to users' needs.

• Personas are powerful. Being aware of users' needs and pain points helped me to create a seamless, end-to-end experience.

Next time, I will definitely pay attention to them. Apart from these issues, it helped me to learn more about the current meal planning app market.

The result

I enjoyed working on this project. What I learned the hard way is that I really have to spend more time with the following factors:

Simplicity is a strength. As a UX Designer, I am often lured by attractive and trendy designs. But I must always remember the "why". The main goal is to understand the users, their problems and then come up with a design that solves them.

The process is essential. For a project that is vast, it gives me a way to navigate through what can be a foggy route. This is especially helpful when you are just starting out.

Research is a must. I could have designed a product users love without the help of the people who will actually use it. The user survey revealed unexpected information and made it possible to adapt the product to users' needs.

Personas are powerful. Being aware of users' needs and pain points helped me to create a seamless, end-to-end experience. Next time, I will definitely pay attention to them. Apart from these issues, it helped me to learn more about the current meal planning app market.

What’s next?

Let me know if you want to talk about a potential collaboration. I’m available
for freelance work.

Let’s design your app