Nutribot

Meet "Nutribot", your health guide. Scan items anywhere for personalized nutrition tips, like having an expert in your pocket.

Role

End-to-end UX/UI designer

Tools

Figma, FigJam, Maze

Duration

5 Weeks

What I did

  • Conducted research to understand the difficulties people face when purchasing food at store.
  • Ideated solutions and key features whole assessing existing competitive landscape.
  • Determined site navigation based on feedback from user.
  • Designed low- and high-fidelity mockups of application.
  • Conducted usability testing and iterated to final design.
Hero image
See prototype

Background

Increasing awareness of the importance of a healthy diet in preventing chronic diseases and maintaining overall health. Despite this trend, many consumers still struggle with making healthy food choices when shopping in store.

This struggle can be attributed to several factors. First, the sheer volume food products available in stores can be overwhelming, making it difficult for consumers to identify healthy options. Second, nutrition labels, while informative, can be complex and hard to understand for the average consumer. Third, making tactics such as misleading health claims can further confuse consumers and lead them to make less healthy choices.

Problem

In today's fast-paced word, consumers are increasingly conscious of their dietary choices and are seeking to incorporate healthier foods into their diets. However, the process of identifying and selecting healthy food options in a store can be challenging and time-consuming. This is due to a lack of clear information, overwhelming choices, and difficulty in understanding nutritional labels.

Solution

Create a mobile app that enables users to scan product barcodes for instant access to detailed nutritional information in any environment. Additionally, partner with food brands to promote healthier product options.

The average percentage for each type of diet

The average American diet is made up of 12% fruits and veggies, 25% meat and dairy, and a large 63% of processed foods.

It’s really important to know what you’re eating for staying healthy. Some stuff in processed foods can cause serious health problems, like cancer. So, eating healthily and knowing what’s in your food is very important.

What do you look for in Nutrition information when buying any food?

The labels always don't speak right to you about harmful ingredients.

Always look at the Nutrition Information because sometimes companies use different names for the same ingredients. For example, sugar can also be listed as fructose, dextrose, golden syrup, or caster sugar. Similarly, ingredients that are high in saturated fat like palm oil, vegetable oil, or animal fat/oil can also be listed under different names.

Empathize

Research Questions

  • What are the current challenges users face when trying to buy healthy food in a store?
  • How do users currently navigate the process of selecting healthy food?
  • How can we make the experience better and solve these problems?

Demographic Information

  • Both male and female participants were included in the study.
  • The participants are health enthusiast people who always try to find healthy foods
    at the store.
  • A few of these individuals have specific allergies and dietary preferences.

Approach

  • The research was conducted through five remote interviews, allowing for in-depth discussions and a better understanding of the participants’ experiences and challenges. This approach provided valuable insights into their dietary choices and shopping habits.
"Products often market themselves as healthy, but upon inspecting the ingredients, I sometimes discover a few unhealthy components. Therefore, finding genuinely healthy food at the store can be challenging.." -Nisarg

Competitive Analysis

I researched the top (3) competitors in the marketplace allows me to leverage the strengths of the competitors, address their weaknesses, seize opportunities, and navigate potential threats, ultimately increasing your chances of success in the market.

Yuka
  • Time-Consuming to Scan and Analyze Each Product.
  • The app not provide a complete picture of a product’s healthfulness as it does not take into account individual dietary needs and restrictions.
BobbyApproved
  • The app not fully address individual preferences or dietary needs
  • Lack of Detailed Information.
  • Time-Consuming to Scan and Analyze Each Product
OneLabel
  • The app not provide a complete picture of a product’s healthfulness as it does not take into account individual dietary needs and restrictions.

Uncovering user insights and pain points

Through my user interviews, I uncovered several key insights.

  1. A busy professional found it difficult to access healthy, convenient food options.
  2. A vegan/vegetarian expressed frustration with the limited selection of tasty plant-based products.
  3. Meanwhile, a parent highlighted the challenge of finding safe, allergy-friendly foods for her child. Despite their varying needs—whether for healthier, vegan, or allergen-free options—the common struggle was finding suitable food choices.

Define

The challenge isn't just making decision- it's about feeling reassured they're
the right ones.

"How might we help users find genuinely healthy food options at the store?"

Putting the piece together and synthesizing the data

After conducting user interviews, I identified crucial design goals and key features that will serve as focal points during the page design process.

Pain points
  • Time-consuming to check ingredients and compare products
  • Many "healthy" products contain hidden unhealthy ingredients.
  • As a vegan with allergies, need a quick way to identify allergens, animal and dairy ingredients.
Key Features
  • A app with scanner that works anywhere for easy ingredient checks.
  • Onboarding with vegan, vegetarian, and allergy preferences.
  • The app should highlight ingredients that align with or go against preferences.
Motivations
  • Implement a design that fosters inclusivity and accommodates a diverse user base.
  • Easy to find and understand harmful ingredients
  • Integration with AI Chatbot to help users find my details about ingredients.

Charting the site

I started with a site map to define key screens, their content, and connections, creating a guiding reference. This map helped me craft intuitive user flows, ensuring a smooth journey through the app.

Added flows like

1: Onboarding using barcode scanner
2: Product details and AI Chat boat

3: Allergies/Dietary preferences

Tracing the steps

By putting myself in the user's shoes, I crafted comprehensive user flows, detailing each step they undertake to achieve their objective. To mitigate user pain points and offer seamless guidance within the app, I integrated crucial features into this user flow.

User Flow #1: Onboarding to the barcode scanner
User Flow #2: Ingredient details to AI chatbot

Ideate

In the low-fidelity stage, I concentrated on refining the layouts

I delved into various ways to organize content across the app’s key screens, experimenting with different layouts and structures.

After exploring several options,

I selected a few that felt the most intuitive and effective.

Designing for consistency

Colors

Shade of green were chosen to represent Health, Freshness, Nature.
Orange color to show vibrant and energetic.

Typography

A clean Open Sans font was chosen for the app. This was chosen for readability. It has a large x-height which allows it to be legible on both large and small screens. The font for the logo is Source Sans Pro, it was chosen to represent a more supportive feeling.

Prototype & Test

Personalized experience

designed an onboarding process to tailor the app experience to each user's preferences right from the start.

Learn about the harmful ingredients in this product

Scan any product to view highlighted harmful ingredients and personalized allergens, as well as whether it's vegetarian or vegan.

AI chatbot designed to explain unfamiliar and complex ingredients

The AI chatbot lists harmful ingredients. Users can find detailed information using tags, typing, or
using a mic.

Usability Testing & Refinements

To ensure the prototype worked and identify any confusion, I conducted usability tests, which provided key insights for improvement.

Before:

Some users were confused by the color coding of allergens, making it unclear if the ingredients were harmful.

After:

Updated the color to match the harmful ingredients.

Before:

Users found the wording of the questions confusing, making it unclear what they needed to select.

After:

Revised the question wording.

Final Design Iteration

Following usability testing, I refined the final design based on user feedback, enhancing its intuitiveness and user-friendliness

See prototype

Reflections

If I had more time...

To bring "Nutribot" to life, I'd love to:

I want to create a feature that helps identify truly vegetarian or vegan products. This is because I’ve discovered that many items we assume are vegetarian actually contain animal ingredients. This is a major concern for many people following a vegan or vegetarian lifestyle.

Thank you!