FoodTrail Nutrition
Mobile App – UX/UI Design
Problem Space
What is the nutritional value of this food item? I don’t know if I’m meeting or going over my required nutritional/caloric intake.
My Role
- UX designer/researcher
- Visual UI designer
- Tools Used: Figma, Google Meets, Google Slides
User Discovery
- User Interviews Quotes
- Personas
- Approach
What the potential users said:
“…Grocery shopping without the trouble of questioning ingredients or nutrition”
Tech Entrepreneur, age 26
“[More] Time to do things… like manually logging in food intake can be super time consuming”
Digital Marketing Coordinator, age 25
“Food diaries are super useful because it felt permanent, but I didn’t keep up with it for long”
Holistic Nutrition & Meditation Coach, age 24
“Knowing what is ACTUALLY healthy and has the ingredients in simple terms, rather the brands that are just trying to sell with an “organic” stamp”
Data and Business Analyst, age 28
User Personas
From my user interviews, I created two main user personas.
Leah
Matt
Approach
To create a mobile app where users can find meals with linked recipes based on specific diet and food goals, and then track thus meals.
There is a food scanner to reduce time inputting data, personalized and trackable meals, and nutritional info about scanned food using a built-in SMART NUTRIVIEW.
Instead of having to do external research or inputting tons of data, the AR technology will help ease that effort by showcasing nutritional info in-app.
Flows, Wireframing & Testing
- User Flows
- Sketches
- Wireframes + Changes
- Information Architecture
User Flow #1
Scan and add food to your virtual kitchen flow.
Sketches
First Draft of Wireframes
Second Draft of Wireframes (After Testing)
I removed unnecessary buttons, such as the “add to completed”. I created an option to choose to scan an ingredient or to manually add a whole meal. I gave the user suggestions in the “Smart Nutriview” on what to eat/scan instead if there are similar items that align with their goals. I made the feedback wording/copy more clear, so the user knows what is accomplished at the end of the flow.
First Draft of Mock-Ups
User Flow #2
Add a meal from the meal suggestion to “Your Day” flow.
Sketches
First Draft of Wireframes
Second Draft of Wireframes (After Testing)
I made the bottom navigation bar more minimal from five to three so it sticks to the user goals first. I added a profile button at the top right corner, and I completely removed the navigation bar once the meals flow started so the user can focus on that task.
First Draft of Mockups
Information Architecture
Final Outcome
Once I received my final feedback from my design instructor and got some more feedback from other potential users, I made changes to the UI to help simplify the design. The main changes were:
- Use less dark green and lighten up the design to embrace negative space.
- Try out the golden rule with the use of color so all three colours aren’t overbearing.
- Use shadows instead of dark outlines/strokes to soften up the look.
- Use consistent text input UI.
Learning Outcomes
#1 – As creators, we tend to put our own goals into the product, thinking it is common sense to all. Something I learned is that we should never assume we are all the same. Taking the time to go through my user interviews really helped teach me that.
#2 – Never assume what the user wants and start designing from there. The purpose of creating a user-centered product is to get the user’s perspective first. It saves a lot of time if you create the product completely around the user, rather than trying to adjust to the user’s needs later.
#3 – Embrace simplicity. The content and the users’ goals matter more than the extra aesthetics, and those extra embellishments can actually get in the way of those goals. Making sure that each color choice, box style, and background element has purpose for the user’s goals is important. If not, remove it.
#4 – Your first design will never be your best design. I thought that the first wireframe I made was bulletproof until I started user testing and my product was picked apart. Realizing that my product will never be perfect showed me that there is always room to elevate and become better. The more testing the better.
Want to learn more about my process of creating this product? Ask me through my contact page!