Case Study · UX/UI-Design, Framer-Entwicklung & CRO
Joseph Abell
Eine conversion-orientierte Framer-Website, eine individuell programmierte Upsell-Seite und ein GoHighLevel-Funnel, um ein High-Protein-Kochbuch-Bundle auf Desktop und Mobile zu verkaufen.
Projektüberblick Joseph Abell
Überblick ↘
Joseph Abell ist ein Creator für High-Protein-Rezepte mit großer Social-Media-Community. Die Website sollte diese Reichweite in ein fokussiertes Produkterlebnis für sein digitales Kochbuch-Bundle verwandeln.
Ich habe die komplette Sales Journey gestaltet und entwickelt: die responsive Website in Framer, eine individuell programmierte Upsell-Seite, den Funnel in GoHighLevel, die Checkout-Integration und das Analytics-Tracking. Außerdem habe ich alle Teile zu einem durchgängigen System verbunden.
Projektergebnisse Joseph Abell
Projektergebnisse ↘
Die Herausforderung ↘
Aufmerksamkeit der Community in einen klaren Weg zum Kauf verwandeln
Das Angebot umfasste mehrere Kochbücher, Boni, Rezeptkategorien und zusätzliche Vorteile. Die Herausforderung war, diesen Wert zu erklären, ohne Besucher zu überfordern oder die Seite wie einen Katalog wirken zu lassen.
Außerdem musste alles als ein verbundenes System funktionieren: das Produkt in Framer vorstellen, Nutzer durch den Checkout führen, auf eine eigene Upsell-Seite weiterleiten und GoHighLevel-Funnel und Tracking synchron halten.
UX/UI- und Entwicklungsprozess
Arbeitsprozess ↘
- 01
Recherche & Analyse
Angebot, Bedürfnisse der Zielgruppe, Produktstruktur und den bisherigen Weg zum Kauf analysiert.
- 02
User Flows erstellen
Die Journey von der Produktentdeckung über vertrauensbildende Inhalte bis zum Checkout skizziert.
- 03
Wireframes erstellen
Sektionshierarchie, wiederkehrende Entscheidungspunkte und responsive Content-Prioritäten festgelegt.
- 04
Stil & Branding
Eine direkte Bildsprache rund um Josephs Identität, Food-Fotografie und sein charakteristisches Gelb entwickelt.
- 05
UX/UI-Design
Desktop- und Mobile-Interfaces für Storefront, Produktgeschichte, Bewertungen, FAQ und Checkout gestaltet.
- 06
Framer-Entwicklung
Das responsive Erlebnis und das Interaktionssystem in Framer umgesetzt.
- 07
Funnel-Entwicklung in GoHighLevel
Den Funnel in GoHighLevel gebaut und den Weg vom Checkout bis zum Post-Purchase-Angebot strukturiert.
- 08
Individuell programmierte Upsell-Seite
Eine zusätzliche Upsell-Seite mit eigenem Code entwickelt, um die Kaufreise über die erste Bestellung hinaus zu verlängern.
- 09
Systemintegration
Framer-Website, GoHighLevel-Funnel, Checkout, Upsell-Logik und Tracking zu einem funktionierenden System verbunden.
- 10
Einrichtung des Tracking-Pixels
Analytics-Instrumentierung vorbereitet, um Verkäufe und Checkout-Conversion zu messen.
- 11
Launch
Responsive QA abgeschlossen und die Produktionsversion veröffentlicht.
E-Commerce-Conversion-Journey
Conversion Journey ↘
Die Seite folgt den Informationen, die Besucher vor dem Kauf brauchen – von Produktklarheit über Beweise und Sicherheit bis zum Checkout.
Desktop-Website ↘
Die komplette Produktgeschichte auf einer Sales Page
Die Desktop-Version verbindet Bundle-Angebot, Kochbuchinhalte, Rezeptvorschauen, Produktvorteile, Social Proof und wiederholte Kaufaktionen zu einem durchgehenden Weg zum Checkout.
Mobile Experience ↘
Ein fokussierter Weg zum Kauf auf jedem mobilen Screen
Die mobile Version ist auf flüssiges UX/UI, schnelles Scannen und E-Commerce-Conversion ausgelegt. Vom Bundle-Angebot und den Rezeptvorschauen bis zu Bewertungen, häufigen Fragen und Footer hält jede Sektion Produktwert und nächste Aktion klar, ohne den Charakter der Desktop-Version zu verlieren.
CRO: Rezeptwert ↘
Gesunde Ernährung erschwinglich, sättigend und machbar wirken lassen
Um die Conversion zu stärken, habe ich einen Rezeptvorschau-Block ergänzt, der für jedes Gericht Kalorien, Protein, Zubereitungszeit und Preis pro Portion zeigt. Statt eines allgemeinen Versprechens macht die Sektion den Wert des Kochbuchs messbar: Besucher sehen, wie es ihnen hilft, leckere High-Protein-Gerichte zu essen, ihre Abnehmziele zu unterstützen und weniger auszugeben – ohne strenge Diät.
Checkout & Funnel ↘
Checkout, Upsell und GoHighLevel verbinden
Der Checkout trennt Kontakt- und Rechnungsdaten von der Bestellübersicht, während die individuell programmierte Upsell-Seite die Kaufreise verlängert. Beide sind mit dem GoHighLevel-Funnel verbunden und als ein System in die Framer-Website integriert.
Nach dem Kauf ↘
Den Funnel über den ersten Checkout hinaus verlängern
Nach dem Checkout präsentiert die individuell programmierte Upsell-Seite ein zusätzliches Abo für die Rezeptbibliothek mit klarem Preis, Wertdarstellung und einer reibungslosen Ablehnungsoption. Die abschließende Danke-Seite bestätigt die Bestellung, erklärt, wo die Zugangshinweise ankommen, und bietet einen direkten Support-Kontakt.
Entscheidungen zur Conversion-Optimierung
CRO-Entscheidungen ↘
- 01
Den Wert des Bundles sofort zeigen
Der erste Screen erklärt das Kochbuch-Bundle, die kostenlosen Boni und den Gesamtwert, bevor er zum Weiterlesen auffordert.
- 02
Produktinhalte zum Beweis machen
Rezeptvorschauen, Vorteile und Details zu den Kochbüchern zeigen Besuchern genau, was sie bekommen.
- 03
Eine konsistente Aktion wiederholen
Dieselbe Kaufaktion kehrt nach wichtigen Informationen und vertrauensbildenden Sektionen wieder.
- 04
Beweise vor Einwänden platzieren
Bewertungen, Nutzungszahlen und die Geschichte des Gründers schaffen Vertrauen vor FAQ und Checkout.
- 05
Den Checkout fokussiert halten
Ein eigener Checkout verzichtet auf die lange Verkaufserzählung und konzentriert sich auf Kontaktdaten, Zahlung und Bestellübersicht.
Favicon ↘
Ein wiedererkennbares Markenzeichen im Browser-Format
Ich habe das JA-Monogramm und die gelbe Markenpalette von Joseph Abell in ein kompaktes Favicon übersetzt, das in Browser-Tabs und Lesezeichen klar und wiedererkennbar bleibt.
Rolle und Verantwortung
Meine Rolle ↘
- Recherche und Analyse
- Informationsarchitektur
- User-Flow-Design
- Wireframing
- UX/UI-Design
- Visuelle Ausrichtung
- Responsive Design
- Framer-Entwicklung
- Individuell programmierte Upsell-Seite
- Funnel-Entwicklung in GoHighLevel
- Integration von Framer und Funnel-System
- Einrichtung des Analytics-Trackings
Farbpalette von Joseph Abell
Farbpalette ↘
Ergebnis ↘
Eine komplette E-Commerce-Journey mit messbarer Conversion
Das fertige Erlebnis verbindet Josephs Framer-Website, Produktgeschichte, Checkout, individuell programmierte Upsell-Seite, GoHighLevel-Funnel und Analytics zu einem responsiven Weg zum Kauf.
Das resultierende System erzielte über 17.000 Verkäufe bei einer Sales-Conversion-Rate von 5 % und einer Checkout-Conversion-Rate von 30 % – ein Beleg dafür, wie Struktur, Messaging und integrierter Funnel den kommerziellen Erfolg tragen.