FoodTrail Nutrition App

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 go over my required nutritional/caloric intakes.

My Role

  • UX designer/researcher
  • Visual designer

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 foods 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 showcase 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 adding 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 in 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

So I received my final feedback from my design instructor and got some more feedback from other potential users, and I made changes to the UI to help simplify the design. The main changes were:

  1. Use less dark green and lighten up the design to embrace negative space.
  2. Try out the golden rule with the use of color so all three colours aren’t overbearing.
  3. Use shadows instead of dark outlines/strokes to soften up the look.
  4. 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.

#2Never 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 users needs later.

#3Embrace simplicity. The content and the users goals matter more than the extra aesthetics, and those extra embellishments can actually get into the way of those goals. Making sure that each color choice, box style, background element has purpose to 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 bullet proof 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 creating this product? Ask me through my contact page!