Im Rahmen des Projekts stand die Frage im Mittelpunkt, wie Kochen im Alltag wieder präsenter werden kann. Besonders junge Menschen, die frisch von zuhause ausgezogen sind, haben oft wenig Routine beim Kochen oder schlicht keine große Motivation, sich damit auseinanderzusetzen.

Unser Fokus lag darauf, eine Rezepte App zu entwickeln, bei der der soziale Aspekt eine zentrale Rolle spielt. Kochen soll nicht nur nur Mittel zum Zweck sein, sondern Spaß machen und zum Mitmachen anregen. Durch spielerische Funktionen, interaktive Elemente und den Austausch mit anderen möchten wir Kochen zugänglicher und attraktiver gestalten. Gleichzeitig greift das Konzept das Thema Food Rescue auf, indem vorhandene Lebensmittel stärker genutzt und bewusster eingesetzt werden.

Wir haben zu Beginn mehrere Umfragen durchgeführt, um ein Gefühl dafür zu bekommen, wo überhaupt Bedarf besteht. Die ersten Umfragen waren noch recht offen gehalten. Uns ging es darum, das Kochverhalten besser zu verstehen und herauszufinden, wie Menschen aktuell mit Lebensmitteln umgehen. Außerdem haben wir nach Erfahrungen mit Koch Apps gefragt, aber auch nach anderen Angeboten wie Too Good To Go oder ähnlichen Konzepten.

• • Junge Menschen haben moderat viel Erfahrung mit Rezepte-Apps
• • Kochen kann etwas soziales sein
• • In Rezepte-Apps werden Community-Funktionen als gut empfunden
• • Es fehlt häufig die Zeit für "aufwendigere" Rezepte
• • Durch das Studium oder Arbeit bleibt häufig wenig Zeit für das Kochen

Primary Persona
Jana

Secondary Persona
Tobias

Jana, die kreative Studentin


Zitat: „Ich will gesunde Rezepte finden, die schnell gehen – und mich mit anderen austauschen, die genauso kochen wie ich.“

Alter: 24


Beruf: Masterstudentin im Bereich Medien und Kommunikation


Lieblings-Apps: Pinterest, Instagram, Too Good To Go, Kitchen Stories

Bio
Jana ist 24 Jahre alt und studiert im Master. Sie lebt in einer kleinen WG und kocht regelmäßig selbst, um Geld zu sparen und sich gesund zu ernähren. Zwischen Vorlesungen, Lernen und Nebenjob bleibt aber oft wenig Zeit, um sich inspirieren zu lassen oder aufwendig zu kochen.
Sie probiert gern neue Rezepte aus, vor allem einfache Gerichte mit wenigen Zutaten. Über soziale Medien lässt sie sich inspirieren, speichert Rezepte oder schickt sie Freundinnen weiter – postet aber selten selbst.

Ziele:
• Einfache, günstige und gesunde Rezepte für den Studienalltag finden
• Sich von Freunden und Bekannten für Essen inspirieren lassen
• Routinen im Kochen aufbauen und Essen abwechslungsreicher gestalten

Frustrationen:
• Zu wenig Zeit für aufwendige Rezepte
• Gelangweilt von den selben eigenen Gerichten
• Viele Rezepte-Apps sind unübersichtlich oder unpersönlich
• Fehlende Motivation, regelmäßig frisch zu kochen
• Schwierigkeit, passende Rezepte für ihren Alltag (Budget, Zeit, Zutaten) zu finden

Tobias, der Fitness-Enthusiast


Zitat: “Sport und eine Gesunde Proteinreiche Ernährung ist mir sehr Wichtig!”


Alter: 34


Beruf: Personal Trainer


Lieblings-Apps: MyFitnessPal, Strava, FitChef

Bio
Tobias ist 34 Jahre alt und arbeitet als Personal Trainer. Ernährung ist für ihn ein zentraler Bestandteil seines Lebensstils. Er nutzt digitale Tools, um seine Mahlzeiten zu tracken, und interessiert sich für neue proteinreiche oder ausgewogene Rezepte. Er postet gern seine eigenen Gerichte und motiviert andere, gesünder zu essen.
Er liebt den Community-Gedanken: Likes, Follower und Challenges motivieren ihn zusätzlich, beim Sport sein bestes zu geben. Ihn interessiert besonders, was andere Fitnessbegeisterte kochen und wie sie ihre Ernährung gestalten. Solche Personen folgt er aktiv auf Instagram / TikTok

Ziele:
• Seine Ernährung bewusster gestalten und kontrollieren, um sportliche Ziele besser zu erreichen
• Sich selbst stetig verbessern – körperlich wie mental – durch Routine und Disziplin
• Andere mit seiner Leidenschaft für gesunde Ernährung inspirieren und motivieren
• Neues über Ernährung und Fitness lernen und sein Wissen weitergeben
• Ein Gleichgewicht zwischen Genuss und Leistung finden

Frustrationen:
• Zu wenige spezialisierte Rezepte für Fitnessziele
• Fehlende Möglichkeit, Nährwerte direkt zu sehen oder zu vergleichen
• Andere Apps sind zu unpersönlich oder rein funktional
• Geringer Austausch mit ähnlich denkenden Nutzern

Im nächsten Schritt haben wir uns verschiedene bestehende Koch und Rezepte Apps angeschaut. Dabei haben wir uns vor allem auf die aussagekräftigsten Beispiele konzentriert und diese anschließend bewertet. Die Übersicht ist in der Abbildung dargestellt.

Unsere zentrale Erkenntnis war, dass viele Apps visuell und strukturell veraltet wirken. Häufig basieren sie auf sehr alten Layouts und Rastern. Zusätzlich sind viele Angebote stark mit Werbung überladen, was die Bedienung unübersichtlich und teilweise anstrengend macht.

Positiv hervorgestochen ist Kptn Cook. Die App überzeugt durch ein sehr aufgeräumtes und modernes Design. Das Rezeptangebot ist bewusst limitiert, was die Auswahl erleichtert und insgesamt hochwertig wirkt. Gleichzeitig liegt ein Großteil der Inhalte hinter einer Paywall, wodurch die App nur eingeschränkt nutzbar ist. Vor allem das reduzierte tägliche Angebot von Rezepten ist hier hervorzuheben, da dadurch dem User die Auswahl leichter fällt.

In der Ideation Phase haben wir mit verschiedenen Methoden gearbeitet, um möglichst viele unterschiedliche Ansätze zu sammeln. Gestartet sind wir mit Rapid Ideation. Dabei haben wir viele Ideen frei gebrainstormt und anschließend thematisch geclustert. Die Ideen wurden unter anderem den Bereichen Lebensmittelrettung/Trading, Gamification, Rezepte finden, Orientierung und Filter, Community, Engagement, Monetarisierung und gemeinsames Kochen zugeordnet. Diese Cluster haben wir anschließend auch bewertet.

Danach folgte eine weitere klassische Brainstorming Phase. Anschließend haben wir Brainwriting genutzt. Dabei beginnt eine Person mit einer Idee und die anderen Gruppenmitglieder ergänzen und erweitern diese Schritt für Schritt.

Im nächsten Schritt haben wir Visual Ideation eingesetzt. Hier ging es darum, Designideen schnell sichtbar zu machen. Mit schnellen Skizzen und Methoden wie Crazy 8, also acht Skizzen in acht Minuten, konnten wir erste visuelle Richtungen ausprobieren.

Darauf aufbauend haben wir Relation Ideation durchgeführt, was auch in der Abbildung zu sehen ist. Hier wurden die Ideen in Ober und Unterkategorien eingeordnet und in Beziehung zueinander gesetzt.

Zum Abschluss haben wir die gesammelten Ideen mit der MoSCoW Methode und der CARS Methode bewertet, um Prioritäten zu setzen und die relevantesten Ansätze für die weitere Ausarbeitung auszuwählen.

Im nächsten Schritt haben wir Low, Mid und High Fidelity Wireframes erstellt. Dabei ging es vor allem darum, zentrale Funktionen der App durchzuspielen und die wichtigsten Abläufe klar abzubilden. Grundlage dafür waren verschiedene Task Flows, die typische Nutzungsszenarien abdecken.

Der erste Task Flow ist der Onboarding Flow. Er beginnt mit einem Willkommen Screen, gefolgt von der Möglichkeit, ein Konto zu erstellen oder als Gast fortzufahren. Danach werden Nutzername, E Mail und Passwort angelegt. Anschließend werden Essenspräferenzen und Allergien abgefragt, bevor der Flow mit einem freundlichen Let’s cook Screen endet.

Ein weiterer Flow ist der Food Tinder Flow. Hier sieht man ein Tinder ähnliches Interface mit vorgeschlagenen Rezepten. Filter können angepasst werden, das erste Rezept wird per Swipe nach links abgelehnt, das zweite per Swipe nach rechts angenommen und beim dritten Rezept erscheint ein Success Overlay.

Der dritte Task Flow zeigt die Zubereitung eines Rezepts auf Basis der Pantry. Der Ablauf führt vom Pantry Tab über den Liked Tab zum Recipe Screen und weiter zum Zubereitungs Screen.

Außerdem haben wir einen Flow zum Hinzufügen von Freunden ausgearbeitet. Dieser startet im Friends Tab mit einer Freundesliste, führt zu einem Username Such Overlay mit Empfehlungen und endet mit einer Success Nachricht sowie einer aktualisierten Freundesliste.

Zuletzt haben wir einen Flow zur Gruppenerstellung definiert. Auch hier startet der Prozess im Friends Tab mit der Gruppenliste. Über ein Create Overlay können Name und Mitglieder hinzugefügt werden. Anschließend gelangt man auf den Gruppenscreen, kann weitere Freunde hinzufügen und sieht am Ende eine Gruppe mit mehreren Mitgliedern.

Der Prototyp ist insgesamt deutlich umfangreicher aufgebaut. Unten in der Abbildung sind exemplarisch die wichtigsten Haupt Screens dargestellt, um einen Überblick über die Funktionen der App zu darzustellen.

Im Prototyp sind die zentralen Taskflows der App umgesetzt. Der erste Screen zeigt die Rezepte Tinder Funktion, bei der Nutzer Rezepte per Swipe entdecken können. Der zweite Screen stellt den Liked-Tab dar. Hier werden alle Rezepte gesammelt, die zuvor im Rezepte Tinder gespeichert wurden.

Der dritte Screen zeigt den Feed. Dort sieht man, was Freunde oder Influencer gekocht haben und kann sich davon inspirieren lassen. Der vierte Screen ist ein Beispiel für einen Recipe-Screen. Er zeigt die benötigten Zutaten und bietet beim Scrollen eine Schritt-für-Schritt Anleitung zum Kochen.

Der fünfte Screen bildet die Pantry ab. Hier können Nutzer auswählen, welche Lebensmittel sie gerade zuhause haben. Auf Basis dieser Auswahl werden passende Rezepte vorgeschlagen. Der sechste Screen zeigt den Friends-Tab mit Gruppenübersichten und Community bezogenen Inhalten.

“Den filter bei der Tinderfunktion ist nicht intuitiv, also dass es überhaupt die möglichkeit gibt.”

“Die Tinder-Flow war sehr übersichtlich und leicht verständlich.”

“Man könnte noch bei den gespeicherten Recipes Icons adden, damit man leichter erkennt, wie viele Lebensmittel man noch braucht, z.B. ein Prozent-Fortschritt-Icon.”

Colors:

Akzentfarbe:

Hintergrundfarbe:

Oberflächenfarbe:

Textfarbe:

Sekundäre Textfarbe:

Rahmenfarbe:

Hoverfarbe:

Die finale Umsetzung in Visual Studio Code wurde auch zu einem großen Teil von KI übernommen. Github Copilot in VSC ist hierbei die ideale Wahl, da für Aufgaben unterschiedlicher Komplexität die entsprechenden passenden KI-Modelle ausgewählt werden können. Dabei war es wichtig das erlernte Wissen in HTML/CSS/JS anzuwenden, um zu wissen welche Funktionen wie umzusetzen sind und, um der künstlichen Intelligenz eine Struktur vorzugeben, in der das Coding nach festen Regeln stattfindet. Dafür haben wir ein markdown Dokument erstellt, welches der KI genaue Gestaltungsvorgaben mit CSS-Variablen und die Datenstruktur vorgibt.

Der durchlaufene Prozess des User Experience Designs war für dieses Semester aus didaktischen Gründen linear aufgebaut, im Vergleich zur praktischen Realität wo dieser meist iterativ verläuft, mit vielen Neuentwürfen. Aber gerade dadurch konnten wir als Gruppe viele Methoden lernen die auch im Praxiskontext relevant sind. Auch war dieses Projekt wertvoll für unseren Lernprozess im Bezug auf die Möglichkeiten künstlicher Intelligenz im Designfeld. Ein Thema mit dem wir uns alle unabdingbar auseinander setzen müssen.