APG: Gewinnspiel-Formular von drei Schritten auf einen Klick
Monatliche Sport-Ticket-Kampagne für den deutschen Markt.
Meine Rolle
Ich habe die Gewinnspiel-Seite als alleinige Designerin end-to-end verantwortet: von Research über die Design-Entscheidungen bis zur eigenständigen Prüfung der AGB- und DSGVO-Anforderungen.
Die gesamte Handoff-Dokumentation in Notion habe ich selbst aufgebaut: Dev-Mode-Workflow, CMS-Feld-Spezifikation und die Design-Token-Referenz.
Worum es ging
American Pistachio Growers ist mit einem monatlichen Sport-Ticket-Gewinnspiel in den deutschen Markt eingestiegen, als zentraler Engagement-Treiber. Zielgruppe: Sportfans ab 18, die über Facebook-Ads kommen. Fünf Sportarten (Fußball, Eishockey, Handball, Basketball, Volleyball) mit monatlich rotierenden Vereinen, jede Kampagne mit festem Stichtag.
Constraints, die das Design geprägt haben
- DSGVO: Einwilligung, Datensparsamkeit, Datenminimierung
- EU Health Claims Regulation: keine unbelegten Nährwert-Aussagen in Text oder Bild
- AGB: bestehende Teilnahmebedingungen
- Operativ: monatliche Rotation durch PMs via CMS, keine neuen Design-Files pro Monat
- Kanal: mobile-first, Traffic aus Facebook-Ads, ab 18
Von 3 Klicks auf 1
Die ersten beiden Konzepte kamen als Vorgabe vom Kunden bzw. dem Projektmanagement. Die Regeln haben sich erst im Lauf der Iterationen herausgeschält: bis zu 7 Verlosungen pro Monat, nicht jede Sportart jeden Monat, monatlich wechselnde Vereine, und die Maskottchen tragen die Marke. Jede Variante scheiterte an einem realen Constraint, bis auf die letzte.
Hier als Low-Fi-Wireframes: jede Variante zeigt nur das Layout-Prinzip. Zum Vergrößern die echte Umsetzung anklicken.
User Flow: von 3 Klicks auf 1
Iterationen als Low-Fi-Wireframe
Fidelity: vom Wireframe zur finalen Karte
Nur Layout und Hierarchie: Bildfläche, Badge, Titel, ein Button.
FSV Zwickau
VIP-Tickets · Sitzplatz-TicketsEchte Struktur und Texte in Graustufen: Inhalt und Abstände sitzen.
Marke, Farbe und Maskottchen: die finale Karte wie im Prototyp.
Statt Monats-Tabs, Sport-Tabs oder Auswahl im Formular: alle Karten direkt auf der Startseite, die Maskottchen groß im Bild. Teilnahme in einem Klick statt in dreien.
Datensparsam & rechtlich entkoppelt
Das ursprüngliche Formular bündelte die DSGVO-Einwilligung mit der Teilnahmeberechtigung in einer Checkbox. Nach DSGVO Art. 7 Abs. 4 (Koppelungsverbot) muss die Einwilligung freiwillig sein. Ich habe die gebündelte Checkbox in zwei getrennt: Teilnahmeberechtigung und Datenverarbeitung.
Datenminimierung
- Alter (Freitext) wird zu Altersgruppen-Pills: 18-24, 25-34, 35-44, 45-54, 55+
- Wohnort (Freitext) wird zu PLZ (5-stellig)
- AGB-Akzeptanz per Checkbox wird zur Fußnote mit Link, laut §4 implizit beim Absenden
Formularlänge um rund 30 % reduziert. Zwei getrennte Consent-Checkboxen. Rechtssicher, ohne Conversion zu opfern.
Zustände, Mobile & Komponenten
Das Formular ist als vollständiges Set spezifiziert: Default, ausgefüllt, Ladezustand und eine Variante ohne Stepper, dazu die Mobile-Ansicht, die Duplikat-Prüfung, das Erfolgs-Overlay und die Form-Komponenten (Checkboxen, Radios, Stepper).
Der Flow zum Ausprobieren
Der komplette Ablauf als klickbarer Prototyp: Verein wählen, in einem Klick ins Formular, absenden und die Bestätigung sehen. Pro Verein ist nur eine Teilnahme möglich, wer sich erneut anmeldet, bekommt den „Schon dabei"-Hinweis.
Auf einen Blick
Aus verstreuten Werten (4 Schriften, rund 27 Rohfarben, Off-Grid-Abstände) wurde ein schlankes, semantisches Token-System.
Farbpalette
Maskottchen
Die zentrale Marken-Asset: die Pistachio-Maskottchen tragen jede Sportart.
Typografie & Spacing
- Display: Cochselica
- Titel: Open Sans SemiBold
- Body: Open Sans Regular
- 4er-Raster: 4, 8, 16, 24, 40 px
CMS-Komponente statt Pixel-Schubsen
Production-Denken: die Vereinskarte ist eine wiederverwendbare CMS-Komponente. Neue Versionen pro Monat brauchen kein Design, nur neue Inhalte.
Der Entwickler bekommt nur Inhalte, das System generiert die Karten automatisch.
- Vereinsname, Sportart, Badge
- Saison
- Tickettext (Multi Select)
- Maskottchen, verknüpfbar
- Fußnote
Pro Monat: Deadline plus Hero-PM ergeben 5 bis 7 Vereine. Nur die CMS-Tabelle wird befüllt.
Übergabe ausschließlich per Figma-Links im Dev Mode. Exakte Höhen, Abstände, CSS, Schriften und Assets liest die Entwicklung direkt aus.
Test mit Kolleg:innen
Methode: klickbarer Figma-Prototyp, getestet mit 3 Kolleg:innen (aus Zeit- und Budgetgründen intern), Fokus auf User Flow und Verständlichkeit.
Was wir gelernt haben
- Der Flow funktioniert: alle gingen ohne Zögern durch, von der Karte zum Formular.
- Die Gewinn-Menge wurde missverstanden: Zahlen auf der Karte wirkten wie der eigene Gewinn statt der Gesamt-Verlosung.
Was wir geändert haben
Die Mengen „4 VIP-Tickets · 12 Sitzplatz-Tickets" standen vorher mitten in der Karte und wirkten wie der eigene Gewinn. Jetzt nennt die Karte nur die Ticketarten, die Mengen stehen als Fußnote unten („Verfügbarkeit: 4 VIP- & 12 Sitzplatz-Tickets").
Live, und was das Design gebracht hat
Live in Production seit 2026, mit monatlich rotierenden Verlosungen.
Verifizierbare Design- und Prozess-Outcomes
- Formularlänge um rund 30 % reduziert, Weg zur Teilnahme von 3 Klicks auf 1
- DSGVO-Consent entkoppelt (Art. 7 Abs. 4), Abmahn-Risiko entschärft
- Monatliche Updates ohne neue Figma-Files (CMS), Zeitersparnis im Team
- Qualitativer Test, ein konkretes Verständnis-Problem behoben