FoodieAi
UX/UI Redesign & Strategic Development on an AI-Powered Nutrition App
CLIENT
InfinityAppCraft (IAC)
ROLE
UX/UI Designer, Strategic Product Development
DURATION
June 2024 - Present
DISCIPLINES
UX Research
UI Design
Prototyping
Feature-Expansion & Product Strategy
PROJECT CONTEXT
FoodieAi is an AI-based app for recipe generation and meal planning.
At the beginning of the project, the application was in an advanced prototype stage with basic functionality but lacked consistent user guidance, a clear visual language, and structural depth.
The goal was a comprehensive analysis and further development on both UX and UI levels.
FoodieAi is an AI-based app for recipe generation and meal planning.
At the beginning of the project, the application was in an advanced prototype stage with basic functionality but lacked consistent user guidance, a clear visual language, and structural depth.
The goal was a comprehensive analysis and further development on both UX and UI levels.
FoodieAi is an AI-based app for recipe generation and meal planning.
At the beginning of the project, the application was in an advanced prototype stage with basic functionality but lacked consistent user guidance, a clear visual language, and structural depth.
The goal was a comprehensive analysis and further development on both UX and UI levels.
TARGET GROUP & VISION
FoodieAi targets young adults aged approximately 18 to 35 – singles, couples, students, professionals, or young families.
The focus is on individuals who want to live healthier lives but have limited time for planning, research, or comparing nutritional values.
Three meals a day, seven days a week – we all know the seemingly simple question that keeps coming up: „What should I cook?“
And almost every time, the search starts from scratch.
The app helps users establish new routines: It makes everyday cooking easier, more plannable, and more personalized – supported by AI-generated recipes, automatic weekly planning, smart filters, and co-profiles.
FoodieAi targets young adults aged approximately 18 to 35 – singles, couples, students, professionals, or young families.
The focus is on individuals who want to live healthier lives but have limited time for planning, research, or comparing nutritional values.
Three meals a day, seven days a week – we all know the seemingly simple question that keeps coming up: „What should I cook?“
And almost every time, the search starts from scratch.
The app helps users establish new routines: It makes everyday cooking easier, more plannable, and more personalized – supported by AI-generated recipes, automatic weekly planning, smart filters, and co-profiles.
FoodieAi targets young adults aged approximately 18 to 35 – singles, couples, students, professionals, or young families.
The focus is on individuals who want to live healthier lives but have limited time for planning, research, or comparing nutritional values.
Three meals a day, seven days a week – we all know the seemingly simple question that keeps coming up: „What should I cook?“
And almost every time, the search starts from scratch.
The app helps users establish new routines: It makes everyday cooking easier, more plannable, and more personalized – supported by AI-generated recipes, automatic weekly planning, smart filters, and co-profiles.
UX RESEARCH & PERSONAS
To analyze the target audience, a qualitative survey was conducted among the extended circle of friends and acquaintances of the client.
A total of 23 individuals aged from mid-20s to mid-30s were interviewed – primarily working singles, couples, and young families, supplemented by advanced university students.
The aim was to gain broad insights into eating habits, planning routines, and everyday nutritional challenges.
Additionally, six participants (including myself) tested the early app prototype independently and provided feedback on structure, layout, and usability. These insights helped identify initial UX weaknesses and revealed key areas for improvement.
Based on this, an iterative development process was established:
Needs & Pain Points → Personas → Opportunity Maps → User Flows → UI Design & Prototyping → Developer Handoff
Four key user types emerged from the analysis. Two of them; Clarissa and Alex, are presented in this case study as examples, each accompanied by an opportunity map. These personas are fictional but are based on recurring patterns and statements from the survey and were developed to illustrate typical usage scenarios.
To analyze the target audience, a qualitative survey was conducted among the extended circle of friends and acquaintances of the client.
A total of 23 individuals aged from mid-20s to mid-30s were interviewed – primarily working singles, couples, and young families, supplemented by advanced university students.
The aim was to gain broad insights into eating habits, planning routines, and everyday nutritional challenges.
Additionally, six participants (including myself) tested the early app prototype independently and provided feedback on structure, layout, and usability. These insights helped identify initial UX weaknesses and revealed key areas for improvement.
Based on this, an iterative development process was established:
Needs & Pain Points → Personas → Opportunity Maps → User Flows → UI Design & Prototyping → Developer Handoff
Four key user types emerged from the analysis. Two of them; Clarissa and Alex, are presented in this case study as examples, each accompanied by an opportunity map. These personas are fictional but are based on recurring patterns and statements from the survey and were developed to illustrate typical usage scenarios.
To analyze the target audience, a qualitative survey was conducted among the extended circle of friends and acquaintances of the client.
A total of 23 individuals aged from mid-20s to mid-30s were interviewed – primarily working singles, couples, and young families, supplemented by advanced university students.
The aim was to gain broad insights into eating habits, planning routines, and everyday nutritional challenges.
Additionally, six participants (including myself) tested the early app prototype independently and provided feedback on structure, layout, and usability. These insights helped identify initial UX weaknesses and revealed key areas for improvement.
Based on this, an iterative development process was established:
Needs & Pain Points → Personas → Opportunity Maps → User Flows → UI Design & Prototyping → Developer Handoff
Four key user types emerged from the analysis. Two of them; Clarissa and Alex, are presented in this case study as examples, each accompanied by an opportunity map. These personas are fictional but are based on recurring patterns and statements from the survey and were developed to illustrate typical usage scenarios.
USER FLOW & FEATURE TRANSLATION
At project start, no structured user flow existed. A completely new process was designed that reorganized existing features and integrated expanded functionality.
Navigation, entry points for recipe generation, settings, and the filter system were reworked.
Key additions included Meal Plan, Shopping List, and Co-Profiles, seamlessly integrated into the existing logic.
A clear distinction was created between global profile filters (e.g., body data, diet type, intolerances) and recipe-specific preferences – both adaptable.
The new navigation concept is guided by clear use cases and simplifies access to key features.
Process flows are now more intuitive, logically structured, and follow a clear visual hierarchy.
Bottom navigation bar includes (within the App):
Discover — personaliyed recipe suggestions
Recipes — storage for all generated recipes
Planner — create daily or weekly meal plans
Shopping — generate and manage shopping lists
Generate — a centrally placed button for direct recipe generation
Top right corner (within the App): a compact token status display and gear icon for accessing settings, including profile filters and co-profile management.
At project start, no structured user flow existed. A completely new process was designed that reorganized existing features and integrated expanded functionality.
Navigation, entry points for recipe generation, settings, and the filter system were reworked.
Key additions included Meal Plan, Shopping List, and Co-Profiles, seamlessly integrated into the existing logic.
A clear distinction was created between global profile filters (e.g., body data, diet type, intolerances) and recipe-specific preferences – both adaptable.
The new navigation concept is guided by clear use cases and simplifies access to key features.
Process flows are now more intuitive, logically structured, and follow a clear visual hierarchy.
Bottom navigation bar includes (within the App):
Discover — personaliyed recipe suggestions
Recipes — storage for all generated recipes
Planner — create daily or weekly meal plans
Shopping — generate and manage shopping lists
Generate — a centrally placed button for direct recipe generation
Top right corner (within the App): a compact token status display and gear icon for accessing settings, including profile filters and co-profile management.
At project start, no structured user flow existed. A completely new process was designed that reorganized existing features and integrated expanded functionality.
Navigation, entry points for recipe generation, settings, and the filter system were reworked.
Key additions included Meal Plan, Shopping List, and Co-Profiles, seamlessly integrated into the existing logic.
A clear distinction was created between global profile filters (e.g., body data, diet type, intolerances) and recipe-specific preferences – both adaptable.
The new navigation concept is guided by clear use cases and simplifies access to key features.
Process flows are now more intuitive, logically structured, and follow a clear visual hierarchy.
Bottom navigation bar includes (within the App):
Discover — personaliyed recipe suggestions
Recipes — storage for all generated recipes
Planner — create daily or weekly meal plans
Shopping — generate and manage shopping lists
Generate — a centrally placed button for direct recipe generation
Top right corner (within the App): a compact token status display and gear icon for accessing settings, including profile filters and co-profile management.
DESIGN SYSTEM
The design system was crafted to reflect the intersection of technological intelligence (AI) and nutrition.
The design system was crafted to reflect the intersection of technological intelligence (AI) and nutrition.
The design system was crafted to reflect the intersection of technological intelligence (AI) and nutrition.
TYPOGRAPHY
TYPOGRAPHY
Lexend Exa for a tech-savvy digital look and excellent readability, in four sizes and four weights.
Lexend Exa for a tech-savvy digital look and excellent readability, in four sizes and four weights.
Lexend Exa for a tech-savvy digital look and excellent readability, in four sizes and four weights.
COLOR SCHEME
COLOR SCHEME
Primary colors and shades:
Green (a recurring accent, representing fresh, healthy, plant-based food)
Carrot Orange (used for CTAs)
Porcelain White (adds clarity and visual lightness to UI tiles)
White-Grey Gradient (background with subtle gradient for depth)
Charcoal Black (for high readability and text contrast)
Primary colors and shades:
Green (a recurring accent, representing fresh, healthy, plant-based food)
Carrot Orange (used for CTAs)
Porcelain White (adds clarity and visual lightness to UI tiles)
White-Grey Gradient (background with subtle gradient for depth)
Charcoal Black (for high readability and text contrast)
Primary colors and shades:
Green (a recurring accent, representing fresh, healthy, plant-based food)
Carrot Orange (used for CTAs)
Porcelain White (adds clarity and visual lightness to UI tiles)
White-Grey Gradient (background with subtle gradient for depth)
Charcoal Black (for high readability and text contrast)
ICONOGRAFY
ICONOGRAFY
The icon language is minimal and functional, enhanced by selective use of emojis – familiar visual cues for a digitally socialized target group, supporting quick content understanding and integrating seamlessly into the app’s conversational, AI-driven experience.
The icon language is minimal and functional, enhanced by selective use of emojis – familiar visual cues for a digitally socialized target group, supporting quick content understanding and integrating seamlessly into the app’s conversational, AI-driven experience.
The icon language is minimal and functional, enhanced by selective use of emojis – familiar visual cues for a digitally socialized target group, supporting quick content understanding and integrating seamlessly into the app’s conversational, AI-driven experience.
GRID
GRID
FEATURE SHOWCASE — Navigation & Discover Screen
BEFORE
BEFORE
The previous navigation structure was unclear. Key features such as recipe generation were hard to find, and the Discover screen lacked orientation and personalization.
Unclear menu structure
Recipe generator hidden under the "chat" tab
Inconsistent filtering system with no clear logic
Visually cluttered Discover screen with low relevance
The previous navigation structure was unclear. Key features such as recipe generation were hard to find, and the Discover screen lacked orientation and personalization.
Unclear menu structure
Recipe generator hidden under the "chat" tab
Inconsistent filtering system with no clear logic
Visually cluttered Discover screen with low relevance
The previous navigation structure was unclear. Key features such as recipe generation were hard to find, and the Discover screen lacked orientation and personalization.
Unclear menu structure
Recipe generator hidden under the "chat" tab
Inconsistent filtering system with no clear logic
Visually cluttered Discover screen with low relevance
AFTER
AFTER
The navigation was fully reimagined and now follows clear use cases. The Discover screen was visually and conceptually streamlined to align with the active profile.
Menu with 5 clearly labeled tabs: Discover, Recipes, Generate, Planner, Shopping
Centrally placed “Generate Recipe” button
Token status and settings compactly integrated top right
Personalized entry questions in the Discover screen
“Top Community Picks” instead of generic tags
Thematic categories directly linked to filter logic
One-click recipe suggestions reflecting active profile filters
The navigation was fully reimagined and now follows clear use cases. The Discover screen was visually and conceptually streamlined to align with the active profile.
Menu with 5 clearly labeled tabs: Discover, Recipes, Generate, Planner, Shopping
Centrally placed “Generate Recipe” button
Token status and settings compactly integrated top right
Personalized entry questions in the Discover screen
“Top Community Picks” instead of generic tags
Thematic categories directly linked to filter logic
One-click recipe suggestions reflecting active profile filters
The navigation was fully reimagined and now follows clear use cases. The Discover screen was visually and conceptually streamlined to align with the active profile.
Menu with 5 clearly labeled tabs: Discover, Recipes, Generate, Planner, Shopping
Centrally placed “Generate Recipe” button
Token status and settings compactly integrated top right
Personalized entry questions in the Discover screen
“Top Community Picks” instead of generic tags
Thematic categories directly linked to filter logic
One-click recipe suggestions reflecting active profile filters
FEATURE SHOWCASE — Settings & Profiles
BEFORE
BEFORE
BEFORE
The original settings area was poorly structured. Diet preferences, intolerances, and filters were mixed and difficult to find, and the token system was placed elsewhere.
No separation between global profile settings and recipe-specific filters
No support for multiple user profiles
Token status and purchase options located outside of settings
The original settings area was poorly structured. Diet preferences, intolerances, and filters were mixed and difficult to find, and the token system was placed elsewhere.
No separation between global profile settings and recipe-specific filters
No support for multiple user profiles
Token status and purchase options located outside of settings
The original settings area was poorly structured. Diet preferences, intolerances, and filters were mixed and difficult to find, and the token system was placed elsewhere.
No separation between global profile settings and recipe-specific filters
No support for multiple user profiles
Token status and purchase options located outside of settings
AFTER
AFTER
The settings menu was visually organized and systematically built. All functions are now bundled and easily accessible.
Scrollable settings area with collapsible tiles
Clear separation between global profile filters and optional recipe filters
Co-profiles manageable and switchable within a single account (family-friendly)
Token status and settings now accessed from a unified location
The settings menu was visually organized and systematically built. All functions are now bundled and easily accessible.
Scrollable settings area with collapsible tiles
Clear separation between global profile filters and optional recipe filters
Co-profiles manageable and switchable within a single account (family-friendly)
Token status and settings now accessed from a unified location
The settings menu was visually organized and systematically built. All functions are now bundled and easily accessible.
Scrollable settings area with collapsible tiles
Clear separation between global profile filters and optional recipe filters
Co-profiles manageable and switchable within a single account (family-friendly)
Token status and settings now accessed from a unified location
FEATURE SHOWCASE — Recipe Generation & Recipe View
BEFORE
BEFORE
Recipes were generated in a chat format, lacking structure and overview. Filtering was very limited, and additional features like shopping lists or nutrition info were entirely missing.
Recipe generator only accessible via "Chat"
Limited filter options (e.g., only time, diet, difficulty)
No structured recipe preview
No option to edit or reuse recipes
Recipes were generated in a chat format, lacking structure and overview. Filtering was very limited, and additional features like shopping lists or nutrition info were entirely missing.
Recipe generator only accessible via "Chat"
Limited filter options (e.g., only time, diet, difficulty)
No structured recipe preview
No option to edit or reuse recipes
Recipes were generated in a chat format, lacking structure and overview. Filtering was very limited, and additional features like shopping lists or nutrition info were entirely missing.
Recipe generator only accessible via "Chat"
Limited filter options (e.g., only time, diet, difficulty)
No structured recipe preview
No option to edit or reuse recipes
AFTER
AFTER
The recipe generation feature was rebuilt as an interactive interface. Users can now create and customize recipes and manage them via preview cards. All generated recipes are automatically saved under “Recipes” (chat logs are no longer saved separately).
Combined filter options (diet, intolerances, co-profiles, ingredients, etc.)
Preview cards with image, filter tags, and nutritional values
“View Recipe” opens a full view with ingredients, preparation steps, and shopping list generation
“Adjust Recipe” allows for quick tweaks and recipe regeneration
All generated recipes are auto-saved in the “Recipes” tab
The recipe generation feature was rebuilt as an interactive interface. Users can now create and customize recipes and manage them via preview cards. All generated recipes are automatically saved under “Recipes” (chat logs are no longer saved separately).
Combined filter options (diet, intolerances, co-profiles, ingredients, etc.)
Preview cards with image, filter tags, and nutritional values
“View Recipe” opens a full view with ingredients, preparation steps, and shopping list generation
“Adjust Recipe” allows for quick tweaks and recipe regeneration
All generated recipes are auto-saved in the “Recipes” tab
The recipe generation feature was rebuilt as an interactive interface. Users can now create and customize recipes and manage them via preview cards. All generated recipes are automatically saved under “Recipes” (chat logs are no longer saved separately).
Combined filter options (diet, intolerances, co-profiles, ingredients, etc.)
Preview cards with image, filter tags, and nutritional values
“View Recipe” opens a full view with ingredients, preparation steps, and shopping list generation
“Adjust Recipe” allows for quick tweaks and recipe regeneration
All generated recipes are auto-saved in the “Recipes” tab
PROJECT STATUS & OUTLOOK
The project is currently in its final development phase. Handoff to development is scheduled for the end of May 2025.
The collaboration is structured as a freelance project. My active role in the product development will conclude upon handoff, and I will be open to new professional opportunities starting in June 2025.
The project is currently in its final development phase. Handoff to development is scheduled for the end of May 2025.
The collaboration is structured as a freelance project. My active role in the product development will conclude upon handoff, and I will be open to new professional opportunities starting in June 2025.
The project is currently in its final development phase. Handoff to development is scheduled for the end of May 2025.
The collaboration is structured as a freelance project. My active role in the product development will conclude upon handoff, and I will be open to new professional opportunities starting in June 2025.
