Foodai
KI-gestützte Ernährungs-App · UX/UI-Redesign mit Fokus auf generative Mahlzeitenplanung, klares Onboarding und ein skalierbares Komponentensystem.
AUFTRAGGEBER
InfinityAppCraft (IAC)
ROLLE
Freelance UX/UI-Designer
ZEITRAUM
Sep 2024 – Jul 2025
TOOLS & METHODEN
User Research
UX/UI Design
Produktentwicklung
Product Strategie
Prototyping
Design System
Figma
Lottie
Adobe Photoshop
Hotjar
PROBLEM
EIN PRODUKT MIT POTENZIAL — ABER OHNE KLARE RICHTUNG
Foodai existierte bereits als funktionaler MVP. Die App generierte Rezepte auf Basis von KI, aber das war schon alles, was Nutzer:innen auf den ersten Blick erlebten.
Kein klares Onboarding, keine erkennbare Struktur und keine visuelle Sprache, die dem Produkt Vertrauen oder Identität gegeben hätte.
DAS KERNPROBLEM
„Was soll ich heute kochen?" Eine Frage, die viele täglich beschäftigt und oft mehr Energie kostet als das Kochen selbst. Foodai setzt genau hier an: KI-generierte Rezepte, angepasst an persönliche Vorlieben und Ernährungsweise. Die Idee war stark, aber der MVP konnte sie noch nicht einlösen. Individualisierungsoptionen waren eingeschränkt, schlecht strukturiert und im Interface kaum erkennbar.
Kein Einstieg, der einlädt, keine Navigation, die intuitiv führt. Kein Interface, das Inspiration weckt, Motivation mitgibt und den Nutzen des Produkts auf den ersten Blick klar macht. Die Funktion war da, aber die Verbindung zum Nutzer noch nicht.
DAS ZIEL
Die App ganzheitlich in UX und UI neu denken.
Nutzerführung aufbauen, Struktur schaffen, eine visuelle Sprache entwickeln und dabei herausfinden, was Nutzer:innen tatsächlich brauchen, nicht nur was das Produkt technisch kann oder was das Gründerteam annahm.
RESEARCH
ERST VERSTEHEN, DANN GESTALTEN
Bevor ein einziger Screen neu gestaltet wurde, stand die Frage: Stimmen die Annahmen über die Zielgruppe überhaupt? Und wo liegen die echten Problempunkte im Alltag?
Ein Online-Fragebogen kombinierte quantitative Fragen zum Koch- und Planungsverhalten mit offenen Antworten zu Frustrationen, Gewohnheiten und der Wahrnehmung von KI-Tools. Zusätzlich testeten eine Auswahl der Teilnehmenden den bestehenden MVP.
DEFINE
VOM INSIGHT ZUR ENTSCHEIDUNG
Aus Pain Points, Bedürfnissen und Use Cases wurde eine priorisierte Feature-Liste abgeleitet, bewertet nach Nutzerwert und technischer Realisierbarkeit.
STRUKTUR VOR SCREEN DESIGN
Bevor es ans Wireframing ging, entstand ein vollständiger User Flow der neuen Strukturlogik.
Bestehende Funktionen wie Hauptnavigation und Filteroptionen wurden neu geordnet, die Generieren-Funktion ins Zentrum gesetzt und um neue Features wie Wochenplan und Einkaufsliste erweitert.
So wurde sichergestellt, dass das UI auf Ebene einzelner Handlungsabfolgen einer durchdachten Architektur folgt.
DESIGN
VON DER STRUKTUR ZUM INTERFACE
Auf Basis des neuen User Flows wurde der bestehende MVP systematisch durchgearbeitet: Wo hakt die Navigation? Wo verlieren Nutzer:innen die Orientierung? Wo widerspricht die Struktur dem tatsächlichen Nutzungsverhalten?
Das Slide Deck dokumentiert diese UX-Review exemplarisch anhand von drei zentralen Flows und stellt jeweils den alten MVP-Screen dem optimierten Wireframe gegenüber:
Navigationsstruktur & Entdecken
Einstellungen & Filter
Rezeptgenerierung
Das Generierungserlebnis wurde weiter personalisiert und eine klarere Trennung zwischen globalen Profil-Filtern (z. B. Ernährungsform, Intoleranzen, Körperdaten) und optionalen rezeptbezogenen Filtern (z. B. Kochzeit, Portionen, Geschmack) geschaffen.
UX/UI REDESIGN – Slide Deck
VISUELLE SPRACHE
Das Visual Design verbindet zwei Welten. Die Vertrautheit von Chat-Interfaces (die KI-Interaktion fühlt sich nicht technisch an, sondern wie ein Gespräch) mit einer frischen, ernährungsbezogenen Farbsprache aus Grün, Orange, Weiß und Schwarz.
Emojis, klare Filterbausteine und ein Chat-ähnliches Eingabefeld machen die Interaktion mit der KI zugänglich, auch für Nutzer:innen, die keine Erfahrung mit KI-Tools haben.
Visuell wird zwischen den zwei Kernfunktionen der App klar unterschieden: Grün steht für die Rezeptgenerierung, Orange für die Wochen- und Tagesplanung. Einkaufslisten lassen sich aus beiden Flows heraus generieren.
Jede Filtereinstellung erzeugt dabei ein individuelles farbiges Tag, das dem generierten Rezept-Karten zugeordnet wird, so sind die individuellen Eigenschaften eines Rezepts auf einen Blick erkennbar.
In den gespeicherten Rezepten können diese Tags gezielt zur Filterung genutzt werden.
DESIGN SYSTEM
Parallel zum Interface entstand ein komponentenbasiertes Design System mit klar definierten semantischen Rollen für jedes Token. Das macht künftige Erweiterungen schneller, die Übergabe an Entwickler effizienter und sorgt dafür, dass Foodai auch dann konsistent wirkt, wenn das Produkt wächst.
ERGEBNIS
WAS SICH VERÄNDERT HAT
Klare Informationsarchitektur mit intuitiver Navigation mit der Kernfunktion im Zentrum statt redundanter verschachtelter Menüpunkte
Neue Features (Wochenplanung, optimierte Einkaufsliste)
Optimierte Filter-Logik: globale Profil-Filter wirken automatisch im Hintergrund, rezeptbezogene Filter sind optional pro Generierung wählbar; beide erzeugen farbige Tags für schnelle Übersicht und gezielte Suche
Einheitliche visuelle Sprache, die KI zugänglich macht und das Koch- und Planungserlebnis einladend gestaltet
Übergabefähiges/ Skalierbares Design System für effiziente Weiterentwicklung
Diese Case Study zeigt einen Ausschnitt des Gesamtprozesses. Parallel dazu umfasste das Projekt die Übergabe ans Entwickler-Team, die schrittweise Überarbeitung des MVP auf das neue Design, Versionsaktualisierungen in TestFlight sowie interne Tests und moderierte Nutzertests zur iterativen Verbesserung vor dem Launch.
