INFOOD SCANNER
PROJECT TYPE:
UX/UI
LOCATION:
Beirut, Lebanon
DATE:
2015
ROLE:
Lead UX/UI Designer
LINK:
Infood Scanner is an award winning mobile application designed to help users scan barcodes of food products and receive real-time insights into their nutritional value and potential allergens.
Welcome to Infood Scanner
Your Smart Companion for Healthier Choices:
We created Infood Scanner with a clear mission: to empower individuals to make informed food decisions effortlessly. In a world where food labels can be confusing and time-consuming to decode, we saw the need for a simple, fast, and reliable way to understand what’s really inside the products we consume.
Whether you're managing allergies, following a specific diet, or just aiming for a healthier lifestyle, Infood Scanner helps take the guesswork out of grocery shopping. By simply scanning a product’s barcode, you get instant insights into its nutritional value, potential allergens, and ingredients — all tailored to your needs.
Our goal is to make everyday food choices clearer, safer, and smarter for everyone.
Problem Statement:
How might we help consumers understand food labels, leading to better understanding about nutritional and allergen information?
Goal:
-
Encourages brands to improve product quality through consumer demand.
-
Empowers informed decisions at the point of purchase.
Design Process
User Research & Insights
Conducted surveys and interviews with 10+ individuals to understand their struggles with food labeling.
Identified pain points: small text, confusing terminology, lack of allergen warnings.
Found that 84% of users preferred a scanning solution over manually checking labels.
Performed affinity mapping and empathy mapping to synthesise user insights.
Created a user persona.
Wireframing & Prototyping
Did a competitive analysis for other applications to see where they fall short.
Developed an Information Architecture and User Flow with the focus on "Evlyn"- The Busy Single Mama.
Developed low-fidelity wireframes to outline the core experience.
Iterated designs based on user feedback to improve scan accuracy and readability.
Created an interactive high-fidelity prototype using Figma.
User Testing & Refinement
Conducted usability tests with 10 diverse participants to evaluate the app’s interface, navigation, and overall user experience.
To simplify complex nutritional data, we implemented a clear, intuitive colour-coded rating system:
Yellow (moderate/consume with caution)
Red
(high in saturated fats)
Green (healthy/nutritionally balanced).
Adjusted the UI for better contrast and readability.
Implementation & Execution
Simple Scan, Instant Feedback
With a quick barcode scan, users instantly receive a product’s nutritional rating visually displayed through a colour-coded system and clear allergen alerts, enabling confident, informed choices on the go.
User Persona
Evlyn - The Busy Single Mama
Age: 24
Occupation: Administration Assistant
Location: Aley, Mount Lebanon
Household: Has a 4-year-old child who has a nut allergy.
Pain Point:
Sarah wants to ensure her son eats healthily and safely, but she often finds grocery shopping stressful and time-consuming.
"I don’t have time to decode every ingredient list, I just need to know if it’s safe and healthy for my son."
What She Needs:
-
Instant, clear allergen alerts
-
Simple explanations of ingredients and nutrition
-
A fast, reliable scan feature that works in real time
-
Customisable profiles to reflect her son's dietary restrictions
Colour & Typography Style Guide
Blue Colour
Primary – #87C440
A fresh, natural green often associated with health, wellness, and sustainability. It's an ideal primary colour for a nutrition-focused app, reinforcing positive, healthy choices.
Green
Colour
Primary – #3150D5
A strong, calming blue that adds contrast and trustworthiness. Useful for buttons, links, or other UI elements that require clarity and reliability.
Yellow
Colour
Secondary – #FFCC02
A bright, attention-grabbing yellow used to indicate caution or moderate nutritional value. It fits perfectly within a colour-coded rating system
(green = good,
yellow = moderate,
red = unhealthy).
Red Colour
Secondary – #D53131
A vivid, clear red that signals high caution or poor nutritional value without being overly harsh or alarming.
Typography
Style Guide
Aa
Avenir
-
Large Text
-
Font Size: 20 px
-
Line Height: 28 px
-
Weights: Bold, Regular
-
-
Medium Text
-
Font Size: 18 px
-
Line Height: 25.2 px
-
Weights: Bold, Regular
-
-
Normal Text
-
Font Size: 16 px
-
Line Height: 22.4 px
-
Weights: Bold, Regular
-
-
Small Text
-
Font Size: 14 px
-
Line Height: 19.6 px
-
Industry Recognition & Market Interest
Infood Scanner received overwhelmingly positive feedback from judges and industry experts, praised for its intuitive design and practical value. The app has attracted investor interest, opening doors for future development and broader market reach.
Award Winning Innovation
Proud recipient of the People’s Choice Award, Infood Scanner was recognised for its user-centred design, accessibility, and commitment to improving everyday health decisions.