A website about food transparancy
Decoding what we eat
COMPANY
Student Project
ROLE
UX Designer
EXPERTISE
UX/UI Design
YEAR
2024
Meet FoodDecode — a web experience that raises awareness about processed foods and promotes healthier eating choices.
Developed by a four-person team as part of a university project, we followed a Design Thinking approach to identify user needs, explore solutions, and create an engaging, educational platform.
The problem
Eating seems easier than ever, with supermarkets offering everything from fresh produce to ready-made meals and processed foods. While convenient, these products often contain fewer nutrients, and marketing claims like “natural” or “no added sugar” can be misleading, hiding the true nutritional value.
We sought to truly understand both our topic and our target audience. Rather than focusing solely on ready-made meals, we looked at processed foods as a whole. We discovered that many consumers lack clear information about ingredients and health risks, often relying on marketing claims that can be misleading.
To structure our insights and define the project focus, we then explored the problem through six key questions:
What is the problem?
Ready-made and processed foods are often low in nutrients and unhealthy.
When does it occur?
In everyday life — during grocery shopping and daily food consumption.
Who is affected?
Students, working professionals, and the food industry itself.
Where does it occur?
In supermarkets, at home, and on a global scale.
Why does it exist?
Due to lack of time and marketing strategies that promote convenience over health.
How do we adress it?
By developing a website that informs users about ingredients and health aspects of processed foods while suggesting healthier, practical alternatives.
User Types & Target Group
Defining our target group helped us identify the people we are designing for.
Primary
Health-conscious consumers who want to make more informed dietary choices. They actively seek information about ingredients to support their purchase decisions.
Secondary
Students, pupils, and individuals researching the topic for educational or project purposes.
Age
18-27
Gender
All genders
Learning Behaviour
Open-minded and receptive to new information
Purchase Habits
regular, often spontaneous or situational (e.g., quick snack between classes or during lunch breaks)
Price Sensitivity
cost-conscious but willing to invest in quality
Values
health, sustainability, quality
Survey
We conducted the survey to reach our target audience and gain real insights into the topic.
Age
93% 18-26 Years
7% other
Occupation
75% students
25% other
gender
57% female
41% male
2% other
What matters most to you when cooking?
How often do ready-made meals replace a main meal for you?
The survey confirms that convenience and cost efficiency play a major role in cooking habits among the target group. Ready-made and processed foods are used regularly, showing that the topic of convenience nutrition is highly relevant and aligned with the lifestyle of this demographic.
User Diaries
To understand the real impact, we also asked participants to track their meals for seven days. The diaries revealed that even “healthy” eaters unknowingly consumed ultra-processed foods, from sauces to cereals. The real issue wasn’t only what they ate, but how little they knew about what was inside.
Here's an example Week of one participant:
whole foods
processed foods
convenience foods
MON
Tue
Wed
Thu
Fri
Sat
Sun
noon
Problem
Young adults frequently rely on ultra-processed foods due to convenience, price, and limited knowledge of risks and alternatives.
Vision
Equip people to spot processing levels fast, compare products, and switch to simple, healthier alternatives, with clear ingredient info and quick inspiration.
Vision Cone
How did eating habits evolved in Germany over the past 100 years?
Post-war self sufficiency
Diet centered around affordable basics: bread, potatoes, soups.
“Abendbrot” (evening bread meal) with sausage, cheese, and tea was a daily ritual.
Food culture focused on simplicity and survival.
1920
The rise of convenience
Introduction of refrigerators and freezers transformed storage and shopping.
Canned goods became symbols of progress and modern living.
Homemaking grew more efficient, but also more industrialized.
1950s-1970s
Processed abundance
Explosion of sweets, soft drinks, packaged snacks, and ready-to-eat meals.
Shifts in family structure → less time to cook.
Tradition replaced by convenience; processed food became the norm.
1980s-2000s
Growing awareness
Rising health and nutrition awareness, yet processed food consumption remained high.
Marketing emphasized “light” and “fit” products, often still ultra-processed.
2000s-2010s
Conscious snacking
Stronger awareness of the negative effects of ultra-processed foods.
Increased interest in food knowledge and ingredient transparency.
Emergence of “snack culture”
Even “sugar-free” options are often highly processed.
2010s-Today
towards mindful nutrition
Growing awareness of body and health through reflection on what we consume.
Food choices increasingly guided by knowledge, balance, and transparency rather than trends.
The future of eating is conscious, informed, and connected — bridging health, sustainability, and enjoyment.
Future
Anything Personas
We also defined user personas, developed scenarios, and created use cases and user stories to translate research findings into real-life contexts.
These helped visualize how different users would interact with the platform and what problems it should solve in their daily lives.
Here’s one example:
"As a vegan with a flexible work schedule, I want inspiration for varied and nutrient-rich vegan meals, so that I can eat healthily and maintain a balanced diet without spending too much time on planning or cooking.."
Olivia Primary Persona
"As a student who just moved out, I want simple and easy-to-understand information about healthier alternatives to ready meals, so that I can make better food choices and support my health despite limited time and cooking experience."
Olivia Primary Persona
How might we…
…
make information about processed foods spark curiosity instead of overwhelm?
…
present healthier alternatives so they feel simple and doable?
…
motivate users to cook more often with fresh ingredients instead of processed ones?
Information architecture
Building on the defined user needs, we explored various ways to make food literacy both intuitive and engaging.
Through methods like card sorting and information architecture mapping, we shaped a structure that allows users to easily switch between recipes, product facts, and ingredient comparisons.
Wireframing
Early wireframe tests showed that less is more: a clear hierarchy, minimal text, and simple interactions make the experience more engaging.
Through Thinking Aloud and A/B testing, we refined structure and design consistency across pages.
The following examples show how these insights shaped our layouts.
Profile page
The first version of our profile page focused on simplicity: users could view saved recipes and articles and edit only basic information.
In the optimized version, we added options for personal preferences such as dietary style and settings, making the profile more useful while keeping it clean and intuitive
before
after
Recipe pages
The first version bundled all information in one place.
We introduced tile-based sections to visually cluster related information and separate content areas for better readability and orientation.
before
after
Styleguide
we created a style guide to establish a cohesive visual language.
The website was designed to feel colorful, engaging, and approachable, using friendly illustrations to make complex topics more relatable.
Colour
Typography
Mascot
Our friendly orange mascot “Cody” strengthens user engagement and improves usability.
With helpful tips and small hints, it intuitively guides users through the website and makes complex information easy to understand.
Hi-Fi Design
Recipes
The recipe section goes beyond classic cooking inspiration.
Each recipe is designed as a healthier alternative to common convenience products.
For example, a fresh Pesto alla Genovese instead of store-bought pesto.
After checking a product in the Product Analysis, users are guided directly to a matching recipe.
This seamless link between information and action helps users turn awareness into real behavior change: learning, comparing, and cooking smarter.
Profile
Creating a profile is optional, but it adds value: users can save recipes and articles and organize them into folders for quick access.
During the onboarding process, users answer a few short questions about their goals and dietary preferences.
Based on this information, the website suggests personalized articles, products, and recipes.
Quiz
The homepage links directly to the quiz: it's a playful way to explore the topic and spark curiosity.
It shares interesting and unexpected food facts, allowing users to test their knowledge in a light, engaging format.
At the end, participants receive personalized article suggestions that lead them deeper into the subject, smoothly guiding them from quick insights to more complex content.
Learnings
This was my first UX project following the Design Thinking process, and it taught me how essential structured iteration and genuine user insights are for creating design solutions.
Working in a team made the experience even more rewarding. Although it was sometimes challenging to manage different schedules and opinions, I truly enjoyed the collaboration, open discussions, and our shared goal of building something together.
What helped me most was learning to step into the user’s perspective.
Throughout the process, I kept asking myself, “What would our personas think about this?” .
That question that guided many of the design decisions and helped me stay empathetic and focused on real needs.
