top of page

Nutrio app

Your personal nutrition tutor

2 months

Personal project

Jan 2022

MacBook, iPad, iPhone.png

Overview

The problem

Studies determined that population in Lithuania lacks knowledge about healthy eating recommendations. Currently, national nutrition policy targets include reducing adolescent and adults overweight, however, statistics show that obesity and overweight rates in Lithuania are consistently growing.
It is also determined that education to improve understanding of nutrition principles should start as early in age as possible since habits acquired in young age, will more likely to remain in adulthood. 

In addition, I have noticed that it is difficult to find a reliable, up to date and free information sources on nutrition topics relevant for young adults.

The goal

Design a tool that would help to improve eating habits of young adults.

Nutrio is an app that helps to track nutrition, gain knowledge and grow healthy eating habits.

Dec 2021 - Jan 2022

iPhone 11 Render-1.png
iPhone 11 Render.png

My role

UX designer leading the app and responsive web design from conception to delivery:

  • user research (conducting interviews & synthesizing results)

  • paper and digital wireframing

  • low and high fidelity prototyping

  • usability studies

  • iterating on designs

  • determining IA

  • responsive design

Main findings

  • young adults understand the importance of healthy diet and nutrition.

  • most of them would like to improve their nutrition habits if they knew an easier way.

Understanding the user

The research

In order to find out user expectations and motivations while learning about nutrition, I developed several questions and interviewed five people. It also helped me to identify gaps and challenges users face while looking for information about nutrition & healthy eating habits.

Major challenges and pain points:

Time.jpg
Cost.jpg
Having to put too much effort to find relevant information.jpg

Meet the users

In order to better understand and empathize with the user, based on user research I created personas.

_UX Design - Persona  Theo Sara.jpg
_UX Design - Persona  Theo Sara (1).jpg

Wrote down user stories

Frame 16315.jpg
Frame 16314.jpg

And created user journey maps

user journey 2021-12-07 at 15.38.45.png

Getting to know the market  | Competitive audit

I needed to understand how similar products position themselves in the market and identify potential gaps. I analyzed 4 direct and indirect competitors on the market. 

Screenshot 2022-01-28 at 15.24.12.png
Screenshot 2022-01-08 at 22.47.16.png
Screenshot 2022-01-08 at 22.45_edited.jpg

Main findings: 

Very few app options that target young adults specifically.jpg
Most consultations with nutrition specialists are not free.jpg
Most products focus either on providing information about nutrition or are designed to tra

Ideation

To come up with initial ideas for the product, I did a How Might We exercise and tried to generate as many ideas answering the questions I raised, such as:

  • How might we provide users with relevant, personalised content so they don't have to put much effort and time looking for it?

  • How might we make experience engaging and fun?

  • How might we make content easy to access anytime from anywhere? With slow/no internet connection?

  • How might we make content consistent and trustworthy?

  • How might we make content free?

  • etc.

Followed with a Crazy Eights exercise to brainstorm how could those ideas look like.

2022-02-09-042224229.jpg
IMG_20211130_132007.jpg

Starting the design

Before moving forward to create paper wireframes, I needed to think about information structure within the app. Thus, I created a sitemap to guide the organisational structure of each screen’s design.

Screenshot 2022-01-29 at 17.38.09.png
iPhone 11 Render.png

After ideating and drafting paper wireframes, I created the initial digital low - fi wireframes.

Designs focused on providing indulging learning experience as well as easy and quick way to get daily balanced recipes.

To prepare for usability testing, I created a low fidelity prototype. First, there is a learning about nutrition experience and second, there is a recipe search.

image 1.jpg
Screenshot 2022-02-04 at 14.15.37.png

Usability testing

Study parameters:

  • Moderated usability study

  • 5 participants

  • 25 min session

After completing interviews, I needed to synthesize study results and find common themes among them. For this I used Miro. 

Then I turned themes into patterns & insights.

Main insights from study findings

Nutrition tracking​:

 Add an easier option to add consumed food items to see its nutrition info.

Nutrition facts:

Add nutrition info section next to recipes and also include vitamin information.

IA:

Reorganize main learning page so that main information is easier to distinguish among other information.

Refining the design

Based on insights from usability study, I added an way to quickly add a nutrition info to user's nutrition tracker by scanning a barcode of food item label.

Lo fi track nutrition.png
iPhone 12 Render.png

Secondly, I redesigned how users see main information in their learning page. My goal was to make the ongoing lessons easier to distinguish among the rest of information on screen. 

Low fi learning page.png
iPhone 13 Render.png

Refined mockups

Here I got curious about and introduced animations to enliven the experience.

Screenshot 2022-03-02 at 16.52.03.png
Home.png
Learning 2.png
All Recipes.png
Nutrition.png

Accessibility considerations

Different size headers and body text used to make content accessible for a screen reader

Use of icons to make usage of app more accessible and easier to understand

I used colours which contrast ratio is considered accessible as per WCAG requirements

Responsive design

Sitemap

With the app designs completed, I started working on responsive website design. Same as when creating the app, at first I created a sitemap to come up with the structure of each screen’s design to ensure cohesive and consistent experience across devices.

Web.png

Responsive designs

Designs for screen size variation included mobile, tablet and desktop devices. I optimised the designs to fit specific user needs of each device and screen size.

Home.png
iPad Pro 11_ - Home Tablet.png
iPhone 8 Plus - Home Mobile.png

Project takeaways 

Impact

During usability studies users shared that they would try using such tool as they feel that it could really help deepen knowledge about nutrition and help improve their eating habits. Here is a quote:

I would like to see how my eating habits and well being change if I had access to easy to use and free tool like Nutrio".

What I learned

Even though the problem I was trying to solve was a big one spread worldwide, diligently going through each step of the design process and aligning with specific user needs help to come up with solutions that are feasible and useful.

Next steps

Conduct a round 2 usability study and iterate on designs.

Conduct research on how successful young adults are in improving their nutrition and dietary habits.

Prioritise and implement changes in the app & web, identified after usability tests.

Final notes

As this case is one of my first projects, my goal was not to achieve perfection but rather to experiment, practice and learn by following design best practices. 

bottom of page