UI/UX Case Study: Nutrition Tracking App for vegans

For people following a vegan or vegetarian diet it is essential to make sure they get all the nutrients they need. Some trace elements such as B12 are hardly to find in plant- based food. A yearly blood analysis is recommended for everyone eating strictly or mostly vegan. But what about the rest of the year? Wouldn’t it be great to have an app that helps you to stay on track with your nutrient requirements?

Research & Scope

With 10% vegetarians and 1,6% vegans among the german population we had a great potential target group. One of our main insights from primary research was that there is an additional very big target group: people that want to eat more (or strictly) vegan. This showed us that we should not only concentrate on vegans but on people transitioning to a vegan diet or people eaten mainly vegan with some exceptions.

We also asked if people are concerned about meeting their nutrient requirements and found out that 40% are concenerned and 60% aren’t. Interesting enough that from both groups 60% would use an app to track their nutrient intake.

We asked also which functionalities this app should have and got several answers. We clustered them and the order of desired functionalities is:

1. Help with nutrient intake
2. Nutritional Info
3. Meal planning
4. Finding substitutes
5. Recipes
6. Motivation

We decided to create an app which helps you to stay on track with your nutrient intake, gives you nutritional information, let’s you plan your meals from an integrated recipe book and also motivates you.

The Market

After a brief competitor analysis we found out that there are several apps covering the market for people which want to become vegan and also for vegans tracking their nutrient intake. None of them were intuitive, inspirational and informative at the same time. All of them are green :)

Low and Mid-fi Prototype

Browsing through the competition we could identify good and bad UX. It wasn’t difficult to see that not every app on the market makes tracking your eating after every meal as easy as it should be. Thought through UX can be an important factor in users satisfaction and therefore the overall success of the company.

Low Fi Sketches

User journey

Without the app the user is always uncertain about the nutrient intake and also wastes time on searching for recipes in different places. She is not enjoying a great variety with her prepared meals as she is new to vegan cooking and doesn’t find recipes she likes.

When using the app ideally meals would be added after eating. The user would browse for recipes during the day or after adding meals. The app will save time with finding recipes tailored to the users needs. Planing meals ahead is easy and reduces visits in the groceries store.

User journey without and with the app

Defining UI

We wanted to stand out in the green ocean of vegan apps. We created different Mood boards to get the UI Process started. A voting lead us to the Mood Board that represents best the chosen brand attributes: healthy, fun, inspirational and mindful.

And the winner is…

Mood Board we based our design on

From there we started our design research to get inspired. Et voilà, let me introduce you to Eat & Tell:

Six selected screens from the Hi-Fi

Onboarding

The main value of the onboarding process needs to serve, is to set initial expectations from the app, and to get the minimum information we need from the user in order to get started. We need to be precise with the information as we want to make the choice of recipes and nutritional information as suitable as possible for users. Therefore we used forms and prepared answers but also search bars. After the collection of information the walkthrough of the functionalities starts and ends with the dashboard and the recommendation to already track the first meal.

Dashboard

Giving an overview of meals added on that day and providing a quick add option reminds users to add their meals. Progress bars with important food components such as fruits, vegetables, proteins is as well placed on the dashboard for quick assurance.

Favorites

In the favorites the user finds saved meals and recipes as well as meals he added in the last two days.

Testing

Early tests with the low- fidelity prototype gave us great ideas about the onboarding and the first engagement (how about you add your first meal now?). The mid-fidelity prototype testing showed us that the favorites are a great option to add meals but should be explained during the onboarding.

Redesign

With a few weeks distance to this project I was eager to improve the design and functionalities of Eat & Tell. Find the High Fidelity Walk Through here: https://vimeo.com/521782139.

Learnings & Next Steps

This project was my first bigger case study. The process gave me confidence and valuable insights into the relationship of UI and UX. One key learning was that how, often, great UI means nothing without an effective experience.

Next steps could be an expansion of features such as a bar code scanner, a quiz to learn more about nutrition or just more implemented nutritional information popping up while using the app. And of course testing, testing, testing.

Thank you for reading!

Project in cooperation with Diana Salameh

Other pictures: unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store