TRACKIT
An interview assignment for Nanit.
Keeping a healthy lifestyle is hard, especially when we are all
stuck at home during the pandemic, not exercising and not eating well.
The solution:
An app that lets you track everything you eat and drink during the day, shows your calorie intake, and lets you see your progress overtime.
The goal:
Reducing the daily calorie intake over time.
Tasks:
Design the UX (just wireframes) of these actions:
Logging a type of food or drink
Viewing everything you ate and drank in a single day, with a sum of the daily calorie intake.
A screen where you can see your progress over time
Choose just one screen or element out of your flow and create the UI for it. Since this is not part of any certain existing app you are free to choose any style and visual language that you want.
The time has come. Almost two years into this pandemic, you have had enough of being stuck in your house, at your computer, eating whatever your hand reaches for that day. You want to take control of your health and make a lasting lifestyle change! But where to start?
Rather than paying for an expensive dietician or meal planning program, you decide you want to start tracking the foods you eat, in order to see where you stand and how you can reduce your overall caloric intake.
So, like any good millennial, you search for an app to help. But, four hours later, you're left with 7 new apps that were too hard to even get started with and the empowerment you had been feeling about your new healthy lifestyle is slowly fading away into thoughts of 'should I order pizza for dinner tonight or hamburgers?'
Inspired by the all-too-familiar above scenario, in this case study, I'm going to focus on building a simple, intuitive, and delightful food tracking app we're going to call Trackit.
Before diving into this project, the first and most important thing I would need to do is to sit with the other relevant stakeholders (Product Management, Dev, etc.) in order to fully understand the product goals and technical requirements for the features I will be designing. Design work is not done in a silo, and understanding why the decision has been made to spend time on this, the value this feature is expected to bring (both to the user and the company), and the limitations (such as technological or timeline) are crucial for me to be able to create a successful design.
Obviously, due to the nature of this task, I do not have a team I can sit with in order to get answers to all my questions. But let's say I did. Next step, research!
Ideally, I'd want to create and implement a full blown research plan. Really get to know our potential users and their needs through surveys and in-depth interviews, use those findings to build personas, empathy maps and user journeys. Conduct competitive analyses to learn about the market space and research best UX practices I might be unfamiliar with (such as gamification and data presentation).
Below are some of the questions I might have asked during my research process, and some answers I found during a quick round of internet research.
Here are some of my questions:
Why do people want to track the foods they eat? What benefits are people looking to gain from tracking?
What methods are their (both app or otherwise) that people use to track their intake? What are the pros and cons of those methods?
When it comes to an app, what is the biggest barrier preventing someone from successfully tracking all that they consume?
What type of people use tracking apps? A specific demographic? How technologically savvy are our primary users?
How often do people open a tracking apps? How long do they spend in the apps themselves?
How do people come up with health related goals? Why do they have those goals? Where do they generally keep track of those goals?
Here are some of my findings:
The main use cases for tracking apps are to help people lose weight, manage chronic conditions, and understand dietary patterns.
Encouragement of goal attainment and mutual support (including social connections) helped strengthen journaling habits
'Ease of use' and 'simplicity' were cited as the most important factors relating to consistent app usage.
Users who tracked food intake along with metric for a specific goal (such as keeping track of current weight with a goal of weight loss) were found to be more successful at actually reaching that goal.
The most successful food tracking apps do not require considerable amount of learning or technical support and offer multiple ways for users to input different foods.
Once my research is completed, I would want to work along side Product Management to figure out which features are most valuable for us to get started building first; what will set us apart from our competition and how can I design those features to bring the best experience to our users?
For the sake of this project, I'm going to focus on three guiding principles, which I believe would be important to the success of this product based on my quick research above.
1. Simple
No one wants to spend time inputting ingredients, scrolling through food lists, or getting lost in bloated app features. Trackit's minimalistic design will help the user focus on the task at hand, and do so in as few steps as possible.
2. Intuitive
Trackit offers multiple ways to input foods and drinks in order to align with the different ways people naturally think.
3. Delightful
Delight is important for keeping users connected to our app. Deep delight will come from the successful implementation of the first two principles, but I will also focus on creating surface delight, through gamification and a joyful UI.
The next step in the process would be to start building out an app map, specific feature lists, and user flows. Again, due to the nature of this assignment, I will not be creating this all here. But, I did feel that it was important to create a basic outline of where the features I design will sit, and how they will fit together. Here are a couple quick sketches I did:
While sketching, I had a lot of questions about how to best design these features. What information is important to show in the overview, and what is the most effective way to design it? How would users prefer to enter foods? Is it easier for them search using their voice or by typing? Would users be interested in importing recipe links? Could our technology support that? How do users think of progress and how can we best support that visually?
Let's go back to your story, but this time, imagine you had downloaded Trackit!
It's been three months since the big lifestyle change and you are feeling great! By easily tracking the foods and drinks you consume everyday, you realized that you drank way too much soda and were constantly snacking on chocolate - consuming two whole bars each day. But, by learning from your tracked habits, you have already managed to lose almost 15 lbs!
Here are some wireframes of how your app looks:
When you open your app, the first thing you see at the top of the page (besides a welcome message) is the total amount of calories left. This helps you figure out what you can eat the rest of the day in order to stay within your goal amount.
Let's say you just ate a bag of chips. You'll open the app and be able to quickly and intuitively add those chips to your log by scanning the barcode. When creating this feature, I was debating between having one main CTA button, or the four shown here. One of the guiding principles I noted before was 'simplicity' and by showing four buttons on the main page (while still maintaining an uncluttered and focused UI) I am able to reduce the number of steps you will have to take each time you input a new food or drink.
You can also check out your daily overview - if you need to edit something or want a more in-depth look at what you've eaten today. And finally, you can visit the Progress page, where you can keep track of all your personalized goals.
There are many other important UX steps I could take at this point to ensure these feature, and the app as a whole would be as successful as possible (prototypes and usability tests to start!). But, with the time constraint and expected deliverables for this project, my next step is to jump straight into UI.
My goal with the UI was to create something that was first and foremost simple, yet friendly. The bright colors make the app feel approachable, and the illustrations in the background add a small element of delight. Even when it comes to the UI, there is ideally more to do! Things like checking the accessibility of the colors, or making sure the copy text is clear and understandable, among others.
Good design requires teamwork and constant iteration, and throughout this whole project there should be many internal reviews and discussions (with PMs, Team Leads, Dev, etc.) that are not mentioned here. Rather, this case study represents an idealized snippet of the process and steps I would take in order to complete this assignment.
