Zum Hauptinhalt springen

FlavorFusion

Landing Page für eine mobile Rezepte App

UX/UI-DESIGN | LANDING PAGE
MEINE ROLLE
UX/UI-Designer
AUFGABE
End-to-End-Designprozess: vom Problem bis zum High-Fidelity-Prototypen einer Landingpage (UX-Research, UI-Design, Prototyping)
PROJEKTZEITRAUM & -RAHMEN
Juni 2025: Intensiver 20 Stunden Design-Sprint mit aktivem Einsatz von generativer KI wie Gemini und Chat GPT im Rahmen des UX/UI-Bootcamps bei neuefische
TOOLS
Figma, FigJam, Notion, ChatGPT, Gemini

01 Problem

Die Herausforderung bestand darin, in nur 20 Stunden und mit einem unklaren Briefing eine wirksame Landing Page zu konzipieren. Es fehlte ein digitaler Anlaufpunkt, der potenzielle Nutzer nicht nur informiert, sondern vor allem emotional abholt und Vertrauen schafft. Ohne eine überzeugende Brücke zwischen Interesse und Handlung drohte das Download-Potenzial der App ungenutzt zu bleiben. Die Kernfragen waren also, wie man den Mehrwert klar kommuniziert, Begehrlichkeit weckt und Nutzer gezielt zum Download führt.

02 Lösung

Eine nutzerzentrierte Landing Page, die als strategisches Fundament für die Markteinführung der App von FlavorFusion dient. Durch emotionales Storytelling und ein klares Design wird der Mehrwert der App erlebbar gemacht, was eine direkte Verbindung zur Marke schafft. Eine intuitive Nutzerführung und überzeugende Call-to-Actions leiten die User wie selbstverständlich zum App-Download. So entstand eine Seite, die nicht nur die Markenidentität stärkt, sondern auch Vertrauen aufbaut und für zukünftige Erweiterungen skalierbar ist.

FlavorFusion ist mehr als eine Rezepte-App, sie ist eine Einladung zum Genuss. Die Landing Page wurde speziell entwickelt, um ambitionierte Hobbyköche durch eine authentische und inspirierende Erfahrung direkt zur App zu leiten, wo sie ihre Kochleidenschaft vertiefen können. Einfach, emotional und unwiderstehlich.

03 UX-Research

Desktop Research

Ich analysierte 5 Rezepte-Apps und dessen App-Landing-Pages und deckte häufige Schwächen wie unklare Call-to-Actions, eine überladene Informationsarchitektur und fehlendes Storytelling auf. Daraus leitete ich klare Chancen ab, um die Landing Page durch einen prägnanten Fokus auf den Download, eine saubere visuelle Hierarchie und den Einsatz von App-Bewertungen positiv abzuheben. Die zentralen Hypothesen besagen, dass App-Vorschauen, interaktive Elemente und eine emotionale Nutzeransprache das Vertrauen und Engagement signifikant steigern. Das Ziel ist somit die Gestaltung einer klar strukturierten, vertrauenswürdigen Seite, die den Nutzer intuitiv und überzeugend zum Download führt.

Research Insights

Insight 1
Klarer Download-Fokus

→ Landing Page muss Download-Aufforderung
deutlich hervorheben.

Insight 2
Struktur schafft Klarheit

→ Saubere visuelle Hierarchie führt
intuitiv durch Informationen.

Insight 3
Vertrauen durch Emotion & Vorschau

→ Vorschauen, Interaktion und Bewertungen
steigern Engagement.

How might we...?

Wie kann ich die Landing Page so gestalten, dass Nutzer*innen durch eine persönliche und vertrauensvolle Geschichte emotional begeistert werden und der App-Download sich für sie wie der einzig logische und intuitive nächste Schritt anfühlt?

04 Struktur & Fluss

Sitemap

Struktur & Fluss - Sitemap

User Flow

User Flow

05 Zielgruppe & Persona

Ambitionierte Hobbyköch:innen, Genießer:innen,Wissenshungrig im Alter von 30 bis 45 Jahren, die Freude daran haben, Neues auszuprobieren und ihre Kochfähigkeiten stetig weiterzuentwickeln. Sie legen Wert auf frische Zutaten, saisonale Vielfalt und Rezepte, die sowohl alltagstauglich als auch inspirierend sind. Gleichzeitig schätzen sie digitale Unterstützung, die ihnen Orientierung bietet, ohne das kreative Kocherlebnis einzuschränken. Für sie ist Kochen nicht nur Nahrungszubereitung, sondern ein genussvolles Ritual und Ausdruck von Lebensqualität.

Persona

Persona Hanna - Zielgruppe & Persona

06 UI-Design

Designprinzipien

1

Natürlichkeit

Die Landing Page soll sich wie ein guter Küchentipp von einer Freundin anfühlen: warm, authentisch und lebensnah. Dieses persönliche Gefühl wird durch natürliche Farben, nahbare Bilder und eine zugängliche Sprache erzeugt. Gepaart mit einer intuitiven Nutzerführung entsteht so ein vertrautes Erlebnis, das die sinnliche Freude am Kochen widerspiegelt.

2

Klarheit

Die Landing Page ist wie ein gutes Rezept: ein klarer Fahrplan, der Nutzern mühelose Orientierung bietet. Ein sauberes Raster, gute Lesbarkeit und eindeutige Bedienelemente wie Buttons und Icons garantieren eine intuitive Führung. So bleibt der Weg zum Ziel immer verständlich und klar ersichtlich.

3

Leidenschaft

Essen ist ein emotionales Erlebnis voller Kreativität und Freude. Die Landing Page fängt diese Leidenschaft durch inspirierende Inhalte, persönliche Community-Elemente und liebevolle Mikrointeraktionen ein. So wird nicht nur informiert, sondern die pure Freude am Kochen geweckt und geteilt.

UI-Foundation

UI-Foundation - FlavorFusion

Farbwelt

Die Farbwelt schafft eine natürliche und warme Atmosphäre, indem sie einen beruhigenden Grünton als Primärfarbe verwendet. Diese wird durch erdige Beige- und Brauntöne ergänzt, während ein appetitanregendes Rot als Akzentfarbe dient, um wichtige Aktionen hervorzuheben und die Leidenschaft für das Kochen zu unterstreichen.

Schriftarten

Für die Überschriften und die Buttons wird die moderne und freundliche "Poppins" und für den Fließtext die sehr gut lesbaren "Nunito Sans" verwendet, um für eine klare visuelle Hierarchie, gute Lesbarkeit und eine zugängliche, moderne Ästhetik zu ermöglichen.

Ikonographie

Klare, minimalistische Linien-Icons unterstützen eine intuitive Nutzerführung und sorgen für eine aufgeräumte Benutzeroberfläche.

Ton of Voice

Der Ton ist warm, nahbar und inspirierend wie ein Tipp von einem Freund und vermittelt mit einfacher Sprache die Leidenschaft am Kochen.

Komponenten

Definierte Komponenten wie kontrastreiche Buttons, Testimonial-Karten und aufklappbare FAQs strukturieren die Inhalte und leiten den Nutzer.

Visuelle Sprache

Die Bildsprache ist warm und authentisch; sie fokussiert sich auf das sinnliche Kocherlebnis statt auf sterile Perfektion.

Konsistenz

Die durchgängige Anwendung von Farben, Schriften und Icons sowie ein klares Layout sorgen für ein stimmiges und vorhersehbares Nutzererlebnis.

Logo

Am Anfang stand ein kreativer Prozess mit generativer KI, um die Essenz von FlavorFusion visuell zu erfassen. Ziel war es, die Kernwerte der Marke – Natürlichkeit, Handwerk und Genuss – in einem einzigen Symbol zu vereinen, das sowohl die Leidenschaft fürs Kochen als auch die Wertschätzung für frische Zutaten widerspiegelt. Die dabei entstandenen Entwürfe dienten als entscheidende Inspiration für die finale Ausarbeitung des Logos.

Logo Entwicklungsprozess
Logo von FlavorFusion

Das Logo von FlavorFusion ist Ausdruck für die Freude am Kochen eine Kombination aus...

  • einem roten Kochlöffel, für das leidenschaftliche Handwerk,
  • zwei grünen Blätter, für die Natürlichkeit frischer Zutaten,
  • einem Stern, für den kreativen Funke,
  • ergänzt durch ein Herz, die Liebe zum Detail.

07 Preview

08 Herausforderungen & Learnings

Radikale Priorisierung auf das "Minimum Viable Product" (MVP): Der 20-stündige-Designsprint diente als Katalysator für eine radikale Fokussierung auf die Kernbotschaft und die zentrale Aktion des MVP.

KI als Sparingspartner verstehen: Der gezielte Einsatz von generativer KI ermöglichte die Bewerkstellung der Aufgabe.

Meine persönlichen Learnings

1. Forschung als Fundament: Der Einsatz von KI kann einen grundlegenden und fundierten User Research vereinfachen und beschleunigen, aber nicht komplett ersetzen.

2. Iteration als Methode, nicht als Zeitfrage: Ich habe gelernt, dass Iteration keine Frage der verfügbaren Zeit, sondern der Methodik ist. Selbst in kürzesten Sprints sind schnelle Mikro-Iterationen entscheidend, um die Produktqualität kontinuierlich zu verbessern.

3. Klarheit durch Reduktion: Informationen und Aktionen gezielt und minimal einzusetzen, führt zum besten Nutzerfluss.

4. Mut zur Entscheidung: Der enge Zeitrahmen hat gezeigt, wie entscheidend der Mut zur schnellen Entscheidung ist. Anstatt auf eine perfekte Datenlage zu warten, ist es effektiver, auf Basis fundierter Hypothesen zügig zu handeln und im Prozess zu lernen.

09 Fazit & Ausblick

Das Ergebnis des Sprints ist ein strategisches „Minimum Viable Product" (MVP), das die Kernhypothese validiert: Eine klare, emotional ansprechende Erzählung, kombiniert mit radikaler Reduktion, führt gezielt zur Conversion. Dieser in nur 20 Stunden entwickelte Prototyp einer Landing Page dient somit als testbare und fundierte Grundlage für die weitere Produktentwicklung.

Mein Fazit als Designer

Dieser Designsprint war für mich eine intensive Lektion in Pragmatismus und Effizienz. Mein größtes Learning ist die strategische Integration von KI als Werkzeug zur Beschleunigung, ohne die menschliche, empathische Perspektive zu verlieren. Zudem hat es meine Überzeugung gefestigt, dass die größte Nutzerfreundlichkeit durch mutige, auf Reduktion fokussierte Entscheidungen entsteht.

Nächste Schritte

1. Testen: Prototyp mit echten Nutzern validieren.

2. Iterieren: Feedback zur gezielten Verbesserung nutzen.

3. Umsetzen & Optimieren: Finale Seite bauen und mittels A/B-Tests die Conversion steigern.

LETZTES PROJEKT
OmNomZen Bio-Ashwagandha-Gummibärchen - natürliche Nahrungsergänzung für Stressabbau
OmNomZen
Stressabbau mit Bio-Ashwagandha-Gummibärchen
NÄCHSTES PROJEKT
NaturKompass mobile App - digitaler Begleiter zur Identifikation von Pflanzen und Tieren
NaturKompass
Ihr digitaler Begleiter zur Identifikation von Flora & Fauna und für ein tieferes Naturverständnis.

GET
IN
TOUCH