Foodai — UX/UI redesign of an AI-powered nutrition app
What should I cook today? — A question that often takes more energy than the cooking itself.
Company | Product
My Role
Product Designer
Team
Product Manager
Developer
Developer
Timeline
10/2024 – 09/2025
Scope
UX Research
Product Strategy
UX/UI Design
Prototyping
Testing
Design System
Overview
End-to-end redesign of the Foodai consumer app. From research—including a heuristic UX audit of the MVP and an online survey on behavioral patterns related to cooking and grocery shopping—through the optimization of the information architecture and all user flows (of which this case study primarily highlights three) to the gradual development of the new UI, including the design system.
Structural Impact Overview
Recipe management from 2 tabs to 1 flow
Core action moved from a submenu into the main navigation
Scattered, limited filters to a new
2-level filter and tag system
New visual design and design system
No real-world usage data is available. Further test rounds were planned but were dropped due to a project pause and pending release on the client side.
Why was I tasked with redesigning the MVP?
Background
The foodai app generates AI-powered personalized recipes. The MVP’s basic architecture was already in place, though it had the native iOS look, and the goal was to create a branded UI with its own visual identity.
It became clear early on in our discussions that, in addition to the look and feel, structural work on the information architecture and user flows was also necessary.
The Key Usability Issues
Unclear Navigation:
The “Chat” menu tab was misleadingly named and did not lead directly to recipe generation, but rather to an intermediate screen with a “New Chat” button.Recipes scattered across 2 tabs:
Generated recipes appeared as unstructured chat histories under “Chat,” while the clearly organized recipe cards were under “Recipes”—the latter only after being actively saved.
Nested filters:
Spread across multiple menus, making them confusing, and at the same time too limited in content to provide a truly personalized experience.
Before / after of the core problems
Creating a Distinct Identity and a Clearer Structure
The MVP was designed in the iOS Native Look without its own visual identity. The navigation was unclear, the entry point for recipe generation was hidden, recipe storage was scattered, and the filter options were too limited.
The goal was a smoother, more intuitive experience that simplifies day-to-day planning and delivers results quickly. This was achieved through a more direct entry point to recipe generation, centralized recipe management, more personalized filters, and generated shopping lists as a new feature. In addition, a new visual identity and a design system were implemented to ensure consistency and enable seamless further development.
How I approached the problems
Step 1: Competitive analysis
Step 2: Non-representative online survey on planning & cooking habits
Competitive analysis and a survey revealed, among other things, that time constraints, a lack of inspiration, ingredient availability, and varying dietary needs shape daily meal planning. For more than half of the respondents, this process is difficult or spontaneous.
That’s why the focus shifted to specific areas of activity: shopping, cooking, and individual needs. More clearly structured features, more personalized filter options, and the new feature for generating shopping lists take as much manual planning and mental effort off users’ hands as possible after the initial setup.
Ideally, this allows users to quickly come up with a recipe idea, including a shopping list, in just a few steps, regardless of location, without lengthy planning or searching.
Step 3: Heuristic UX Audit, Analysis Based on Jacob Nielsen’s Heuristics
I conducted a heuristic UX analysis of the existing MVP, systematically examining all noticeable friction points, ambiguities, and potential UX issues.
(Selected screenshots—see below)
The complete before/after presentation of the UX audit can be opened in Figma.
How the research findings were prioritized and integrated into the new structure.
The research showed that the MVP was designed with a technical focus rather than a user-centered one. I extracted the key insights from the collected data, presented them to the team, and we agreed on the next steps together.
The UX audit had revealed that the entry point for recipe generation was poorly labeled and hidden, that recipe management was spread across multiple screens, and that the filtering system was underdeveloped. Because these structural issues underlay all subsequent decisions, this became the starting point.
Top Research Findings
Competitive analysis
The same recipes every time are a major point of criticism
Curated recipe catalogs become repetitive after a few weeks; users keep seeing the same dishes over and over.
Competitive analysis
Ads, upselling, scores perceived as annoying
Advertising is a recurring source of criticism, as is the pressure to upsell before any real value is even created.
UX audit
Unclear navigation & scattered filters
Menu tabs have unclear labels, and the entry point for generating recipes is hidden.
Filters are spread across multiple screens, so users have to remember what settings are where. (Allergies and diets are mixed together.)
UX audit
Recipes unstructured, tokens intransparent
Generated recipes appear as disorganized chats and must be saved manually to become overview cards. The token display isn’t consistently visible, so usage remains unclear.
Survey
Spontaneous instead of planned
No one plans consistently in advance. Approximately 64% of respondents cook based on available ingredients, and 40 out of 47 cite availability as a criterion when choosing recipes.
Survey
Specific dietary needs
Restructuring the Information Architecture
To provide a better overview of flows, dependencies, and navigation logic, I visualized the MVP’s information architecture as a sitemap and a simplified user flowchart.
The diagram shows the core action flows from the tab bar and header, as well as token management and profile filter management. Individual secondary flows such as ratings, help, or the detailed payment flow were left out.
This made the restructuring process much easier, as flow tiles and connections could be moved around without much design effort until a coherent picture emerged.
The goal was to provide a more direct entry point into prescription generation, thereby placing it at the center of the user experience. Prescription management, which was previously spread across two tabs, is now consolidated into a single, coherent flow. Token management can be accessed not only via the settings but also directly through the token display, whose settings have been moved to the header. In addition, there is an optimized filter structure and the new shopping list generation feature.
The navigation logic is organized so that each core flow has its own space in the bottom navigation bar (tab bar). Profile settings have been renamed “Settings” and are now located closer to the token display; they can be accessed along with other interactions via the header.
There is thus a clear separation between “Discover” for inspiration and suggestions, “Generate” as the central action, “Recipes” as a storage location, and “Shop” as a new shopping list feature that takes the former place of “Settings” in the tab bar.
I’ve also redesigned the filtering system and divided it into two levels.
Global filters that apply permanently are part of the personal profile and are located in the settings menu.
Situational filters can be optionally applied to each recipe in addition to or instead of the prompt.
The filters are attached to each recipe as “tag” markers, creating consistent recognizability.
From setting profile or recipe filter tags, to visible filter attribute tags on the recipe card, to searching saved recipes by tags.
In the “Discover” section, the app generates random quick-start recipe suggestions from the categories based on these tag themes. Filters thus play a significantly more important structural role than before.
Wireframing: The new foodai structure sparked new ideas for interactions.
Things were now taking shape. To bring together the new information architecture, the insights from our research, and our ideas in a tangible way, I developed rudimentary, building-block-based wireframes. This allowed us to move on to positioning and visualizing the ideas.
The complete before/after presentation of the wireframing can be opened in Figma.
Top Design Decisions
01 One place per task
02 Direct entry into generation
03 Filters as a consistent system
Global profile filters and situational recipe filters are managed separately but function as a combined filter during searches. The profile filters apply to all generation processes, while the recipe filters are reset for each generation. Some of the profile filters also appear preselected in the recipe filters and can be adjusted on a case-by-case basis without changing the global selection.
04 Generated shopping lists
Visual Design: How the Wireframes Were Brought to Life.
Once the screen structures and interaction design were established as wireframes, the visual style followed. It was intended to combine artificial intelligence (AI), a chat interface (mode of interaction), and healthy eating.
Fresh, nutrition-inspired colors form a clean, modern UI. (Leaf) green is the primary color for interactions; (carrot) orange highlights tokens and special notes; deep orange indicates error messages and delete states; (ceramic) white creates white space; and (cabbage) black serves as the text background.
Each filter tag features its assigned emoji; tags for food intolerances have an orange background to stand out more clearly as critical markers, while those for diets are green. On the generated recipe cards, they highlight a recipe’s characteristics at a glance.
Typography, iconography, design language, and layout follow familiar chat and messenger patterns, supplemented by emojis. This keeps interaction with AI accessible and intuitive even for users who have little experience with AI tools.
Filter Tag System (Screens: Settings, Profile Filters, Discover Tab, Random Recipe, Generate Message History, Generated Recipe, Generated Shopping List)
To that end, I developed a new brand logo for foodai that incorporates the color scheme and also functions as a loading animation.
Design System as a Single Point of Truth
A component-based design system was developed in parallel with the UI and visual design. The goal was to create a consistent, non-destructive design foundation. Changes to a variable or component take effect globally, without requiring manual maintenance and without breaking existing screens.
To achieve this, I tokenized all necessary color and size values. Semantic and component-related tokens were created in collaboration with the developers and are stored in Figma’s variable library. I also created documentation to serve as a guide and reference for structuring and correctly using the elements. This ensures a consistent look and feel over the long term.
This noticeably increased efficiency even during the design process, as screen designs could be more easily adapted using components and variables/tokens during coordination, testing, and iterations. The handoff to the development team also went more smoothly, since the component names could be adopted almost exactly as they were.
Did the new product vision stand up to the test?
Now that all the groundwork had been laid, it was time to develop a new test prototype.
The new UI went straight into development. This resulted in a TestFlight functional prototype designed to bring the user experience to life and verify that all workflows functioned as planned.
(Handoff of the UX/UI design to developers; see below)
Guerrilla Testing (Formative)
For the redesign version, I developed a moderated, formative usability test with 8 task scenarios aligned with the app’s core interaction flows. I defined the target paths in advance to clearly compare deviations against the expected outcomes.
Each run was rated on a four-point scale:
Complete success
Success with a minor error (goal achieved, but detour / hesitation / incorrect tap)
Success with a major error (goal achieved, but deviation from the target path / backtracking)
No success (wrong goal achieved / abandonment)
In addition, I recorded actions and spontaneous remarks to capture not only whether but also how participants reached the goal.
I ran through the test plan in advance myself and with another team member to check for clarity.
Since the MVP was not systematically tested, a before-and-after comparison was not possible. The test therefore evaluated—formatively rather than comparatively—whether the newly structured flows worked in practice and where they did not.
Implementation
I conducted the test in downtown Munich with six passersby I approached spontaneously on their way home—exactly the situation in which one would use foodai to search for recipes. I determined whether they belonged to the target group (ages 20–40, cooks on a daily basis) by asking them directly.
Limitations of the Test
Cooking experience and prior experience with AI tools were not assessed and should be taken into account in the next round of testing. Setting a time limit for the tasks would also help ensure the comparability of the tests.
Because the tasks were assigned in a fixed order, participants had prior knowledge of later tasks; for example, the filter-tag system from Task 2 was already familiar to them in Task 3. The tasks are therefore not independent measurements of one another.
With 6 participants, common problems can be identified. However, further testing is necessary to verify whether the core usability issues identified at the outset have been resolved, to identify less common problems, and to compare iterations.
Iterations: What emerged from the test and had to be optimized.
Iterations Directly Derived from Test Results
Task 2 - Open the “Generate” tab & enter a prompt
P2 first started the generation process in the “Discover” tab using a prompt suggestion, commented on the missing selection option, and then switched to “Generate.”
P3 and P5 overlooked the prompt entry field because the filter dropdowns were expanded. P3 found it by scrolling; P5 initially tapped the “Generate” tab, which caused a reset, and then saw the prompt field.
(6 out of 6 reached the goal, 3 out of 6 without errors, 1 with a minor error, 2 with major errors.)
Iteration
Task 5 - Topping Up the Token Balance
Almost no one recognized the token display in the header as an interactive element. Five out of six people took the detour through the settings.
(6 out of 6 reached the goal, 1 out of 6 without errors, 5 out of 6 with major errors)
Iteration
A button with a plus icon in the token display now clearly indicates that new tokens can be added here.
(See before/after visualization)
Task 7 – Generate a Shopping List from a Recipe
The button for generating the shopping list was too inconspicuous and was often overlooked.
P3 looked in the “Shopping” tab, P5 searched the “Ingredients” and “Steps” tabs on the recipe card and finally found it in the header. P6 clicked through all the tabs on the tab bar until they found it.
(6 out of 6 reached the goal, 3 out of 6 without errors, 1 with a minor error, 2 with major errors)
Iteration
Additional Optimizations (Not Derived from the Test)
Token Usage Before Generation
Actions that consume tokens are now clearly marked with a usage indicator on the respective action button.
(See before/after visualization)
Higher text contrasts
Text contrast ratios have been increased overall.
In addition, the focus on the recipe card is now specifically on the numerical values for nutritional information and ingredients, and on the shopping list, on the ingredient names. When cooking and reviewing the recipe, the quantities are most important; when shopping, the ingredient names are most important.
Servings Removed as a Filter
Servings have been removed as a standalone recipe filter.
As was originally the case in the MVP, this setting is configured exclusively via the stepper on the recipe card.
This saves resources during recipe generation, since the quantity can be calculated after the recipe is generated.
Deferred Optimizations
The following findings were intentionally set aside as having medium to low priority and will be optimized based on further test runs.
Global vs. Situational Filters
This distinction should be explained during onboarding and, if necessary, given a different name.
“Bundle” Shopping Lists Promotion
The placement and explanation may need improvement; the solution should be determined after further testing.
Mixed Diets
Further testing should determine whether detailed combinations are necessary or whether the categories Omnivore / Vegetarian / Vegan / Pescatarian / Flexitarian / Keto cover most cases.
For first-time users, a note may be needed explaining which foods are included in each category and which are not.
Kitchen Appliances and Cooking Methods
In addition, the idea arose to include appliances as a separate filter category in order to find recipes for specific appliances, such as air fryers, or to exclude appliances like the oven.
The priority for now is a fully functional release.
Only real-world usage data will reveal which of these points should be given higher priority.
Conclusion
The test confirms that navigation, as well as recipe and shopping list management, function as intended in their basic structure and can be easily located.
The issues were almost exclusively related to individual elements—such as those that were misplaced or not clearly identifiable as interactive—rather than the information architecture itself.
The structural redesign is therefore effective; the focus should now be on refining the visual aspects.
Most Relevant Optimizations
New Filter System and Shopping Lists
The filter system has been restructured. A feature for generating and managing shopping lists has also been added.
Restructured Information Architecture
A clear flow brings together navigation, access to the generation feature, and recipe management, which was previously spread across two tabs.
Filter Tags as a Unifying Theme
The colored tags serve as a recognizable element throughout selection menus, recipe cards, and search filters, that is, throughout the entire app.
Distinct Visual Identity
The iOS native prototype evolved into a distinct visual identity, complete with a design system serving as a single point of truth.
Reflections, learnings, open questions
The redesign was fully implemented and released as a TestFlight build (v2.0). Although further rounds of testing were planned, they could not take place before the project was put on hold by the client. Unfortunately, the full impact of the changes has therefore not been fully documented.
Originally, I was only commissioned for the visual design; the less-than-perfect UX was mentioned in passing, apparently with the hope of a quick fix.
However, it was worth thinking beyond that. The UX audit revealed structural problems and showed that the MVP had never been tested with external users. Taking the initiative to get to the bottom of these issues was challenging, but that’s exactly how you grow and learn—and it ultimately strengthened our mutual trust. (Unfortunately, you always have to earn that trust first.)
If you think you’re starting the usability test too early, it’s usually not early enough. Looking back, I wish I had tested the MVP right at the start of the usability test so I could have had real data points instead of assumptions.
I had argued this early on, but wasn’t able to convince others until later, when I had results from the UX audit and survey. That created the opportunity to conduct the usability test on the new TestFlight build.
With fixed-price quotes, an initial test can be firmly scheduled; with hourly billing, the client ultimately decides how their hours are used. You just have to accept that.
Some assumptions and questions remain open and will only become clear through real-world use. Doesn’t a permanently transparent token status create subjective pressure, thereby pitting profit motives against user goals? How reliably does AI estimate nutritional values and suggest substitute ingredients in cases of food intolerances? And does the AI, in combination with the filters, truly solve the recipe fatigue found in database-driven apps, or does a certain pattern of repetition set in after a while?