Foodai
AI-powered nutrition app · UX/UI redesign focused on generative meal planning, clear onboarding, and a scalable component system.
CLIENT
InfinityAppCraft (IAC)
ROLE
Freelance UX/UI Designer
DURATION
Sep 2024 – Jul 2025
TOOLS & METHODS
User Research
UX/UI Design
Product Development
Product Strategy
Prototyping
Design System
Figma
Lottie
Adobe Photoshop
Hotjar
PROBLEM
A PRODUCT WITH POTENTIAL — BUT WITHOUT A CLEAR DIRECTION
Foodai already existed as a functional MVP. The app generated recipes based on AI, but that was all users saw at first glance.
There was no clear onboarding, no recognisable structure and no visual language that would have given the product credibility or identity.
THE CORE PROBLEM
‘What should I cook today?’ A question that preoccupies many people every day and often takes more energy than the cooking itself. This is where Foodai comes in: AI-generated recipes, tailored to personal preferences and dietary requirements. The idea was strong, but the MVP was not yet able to deliver on it. Customisation options were limited, poorly structured and barely recognisable in the interface.
No inviting introduction, no intuitive navigation. No interface that inspires, motivates and makes the benefits of the product clear at first glance. The function was there, but the connection to the user was not yet established.
THE OBJECTIVE
Rethink the app holistically in terms of UX and UI.
Build user guidance, create structure, develop a visual language and find out what users actually need, not just what the product can do technically or what the founding team assumed.
RESEARCH
FIRST UNDERSTAND, THEN DESIGN
Before a single screen was redesigned, the question arose: Are the assumptions about the target group even correct? And where are the real problems in everyday life?
An online questionnaire combined quantitative questions about cooking and planning behaviour with open-ended answers about frustrations, habits and perceptions of AI tools. In addition, a selection of participants tested the existing MVP.
DEFINE
FROM INSIGHT TO DECISION
A prioritised feature list was derived from pain points, needs and use cases, evaluated according to user value and technical feasibility.
STRUCTURE BEFORE SCREEN DESIGN
Before wireframing began, a complete user flow of the new structural logic was created.
Existing functions such as main navigation and filter options were reorganised, the generate function was placed at the centre and new features such as weekly schedule and shopping list were added.
This ensured that the UI followed a well-thought-out architecture at the level of individual action sequences.
DESIGN
FROM STRUCTURE TO INTERFACE
Based on the new user flow, the existing MVP was systematically reviewed: Where does the navigation fall short? Where do users lose their bearings? Where does the structure contradict actual user behaviour?
The slide deck documents this UX review using three central flows as examples and compares the old MVP screen with the optimised wireframe in each case:
Navigation structure & discovery
Settings & filters
Recipe generation
The generation experience was further personalised and a clearer separation was created between global profile filters (e.g. diet, intolerances, body data) and optional recipe-related filters (e.g. cooking time, servings, taste).
VISUAL LANGUAGE
The visual design combines two worlds. The familiarity of chat interfaces (the AI interaction feels like a conversation rather than something technical) with a fresh, nutrition-related colour scheme of green, orange, white and black.
Emojis, clear filter modules and a chat-like input field make interaction with the AI accessible, even for users who have no experience with AI tools.
Visually, there is a clear distinction between the two core functions of the app: green stands for recipe generation, orange for weekly and daily planning. Shopping lists can be generated from both flows.
Each filter setting generates an individual coloured tag that is assigned to the generated recipe cards, so that the individual characteristics of a recipe can be recognised at a glance.
These tags can be used for specific filtering in the saved recipes.
DESIGN SYSTEM
Parallel to the interface, a component-based design system was created with clearly defined semantic roles for each token. This makes future expansions faster, handover to developers more efficient, and ensures that Foodai remains consistent even as the product grows.
RESULT
WHAT HAS CHANGED
Clear information architecture with intuitive navigation, focusing on core functions rather than redundant, nested menu items
New features (weekly planning, optimised shopping list)
Optimised filter logic: global profile filters work automatically in the background, recipe-related filters can be selected optionally for each generation; both generate coloured tags for a quick overview and targeted search
Uniform visual language that makes AI accessible and makes the cooking and planning experience inviting
Transferable/scalable design system for efficient further development
This case study shows an excerpt of the overall process. In parallel, the project included handover to the development team, step-by-step revision of the MVP to the new design, version updates in TestFlight, as well as internal testing and moderated user testing for iterative improvement prior to launch.
