neutrinl - a diet app.

a mobile app designed for calorie tracking/managing with options to add food(s) for breakfast, lunch, and dinner.

sneak peak of the mockups

role.

uiux design
visual design
developer

timeline.

september 2021

tools.

figma
user personas
wireframing
prototyping

the vision.

we all know that a good calorie tracking/diet app always unfortunately costs money for the desired features, so this was the motive - to create a simple, convenient and user-friendly app that everyone can use at no cost.

user personas.

primary user:
Jessie Zhang is a 19 year old university student who wants to start tracking her calorie intake to work towards her goal of losing weight healthily. she finds it hard to come up with a diet plan of her own, so she wants a customized calorie plan created based on her goals. however, under her budget, she can't find a free app that has all the basic features she wants.


secondary user:
Mark Zhu is a 24 year old who is in the early stages of his career after just graduating university. he doesn't have a specific goal in mind to lose or gain weight. however, he wants a product that can save the meal data he enters so that he can look back on previous days or weeks to track his eating progress. most apps he has come across are too complicated to use, so he wants to look for something simple.

to build an app that would satisfy the users, we need a design a simple yet intuitive UI so that the users can easily access the features they want.

solution approach.

to create a product that would satisfy both the primary and secondary personas, we created the following requirements for our minimum viable product. the product should:

  1. allow users to track their calorie intake from different meals throughout the day at no cost
  2. a feature that asks users to enter their goals/basic information to create a customized calorie plan for each user
  3. have a feature that saves user data and allows them to look back on previous days or weeks to see their progress with a clean and simple UI

wireframe.

to start visualizing what the app should look like, i drew a hand-sketched wireframe with the main features.


a rough sketch of the Neutrinl App screens
here is the hand sketched wireframe

prototype.

once i finished the wireframe, i headed to figma to create a prototype.

this was definitely the best part of the project as i was able to see the app slowly come to life!


the neutrinl app screens laid out in a grid
high-fidelity prototype made in figma

next steps.

there are still many more features that i plan on designing for this app in the future.

  1. a feature that allows users to track macros (fat, carbs, protein) as well as calories
  2. a feature that suggests appropriate meal plans to users that match their goals

these additional features are next up on my to-do list to work on :)