tippspiel/docs/superpowers/specs/2026-04-11-phase1-engagement-ux-design.md

Phase 1: Engagement & UX-Polish — Design Spec

Datum: 2026-04-11 Projekt: WM 2026 Tippspiel Ziel: Die App von "funktional" zu "macht Spaß" transformieren. Mitarbeiter sollen beim Öffnen lächeln und täglich zurückkommen. Zielplattform: Mobile-First (Staffbase-App auf Smartphone), Desktop als Bonus Launch: Anfang Juni 2026 (Intranet-Post), WM-Start 11. Juni 2026

---

1. Neue Startseite: Dashboard

Die aktuelle Startseite zeigt 104 Spiele als endlose Liste. Die neue Startseite wird ein persönliches WM-Cockpit.

Layout: "Hero + Stats + Nudges"

Hero-Bereich (oberes Drittel):

• Nächstes tippbares Spiel prominent angezeigt mit Team-Flaggen und Countdown-Timer

• Wenn bereits getippt: Tipp anzeigen mit Häkchen ("Dein Tipp: 2:1 ✓")

• Wenn noch nicht getippt: "Jetzt tippen"-Button

• Wenn kein Spiel ansteht: Nächstes Spiel mit Datum ("Nächstes Spiel: Morgen 21:00")

Stats-Kacheln (mittleres Drittel):

• Drei kompakte Kacheln nebeneinander:
  • Dein Rang (Platzierung mit Pfeil hoch/runter seit letzter Änderung)
  • Punkte (Gesamtpunktzahl)
  • Streak (🔥-Counter, aktuelle Serie an abgegebenen Tipps)

Nudge-Bereich (unteres Drittel):

• Kontextabhängige Handlungsaufforderungen:

  • "📅 Heute noch 2 Spiele ohne Tipp" → Link zum Spielplan
  • "🏆 Max führt mit 15 Punkten" → Link zur Rangliste
  • "🎯 Letzte Auswertung: 3 Punkte für Brazil vs Serbia!" → Link zum Ergebnis

• Maximal 2-3 Nudges, priorisiert nach Relevanz

Navigationsänderung: Der volle Spielplan wird zur eigenen Seite "Spiele" in der Navigation. Dashboard ist die neue Startseite.

---

2. Bottom Navigation Bar

Die Header-Navigation wird durch eine feste Bottom Navigation ersetzt (Mobile-First-Standard).

4 Haupttabs:

• 🏠 Home — Dashboard (neue Startseite)

• ⚽ Spiele — Spielplan mit Smart Sections

• 🏆 Rangliste — Leaderboard

• 👤 Profil — Persönliche Statistiken

Header: Wird schlank — nur Logo ("WM 2026 Tippspiel"), optional Notification-Badge, Theme-Toggle.

Admin: Nicht mehr in der Hauptnavigation. Nur für Editoren sichtbar als Zahnrad-Icon im Header. Viewer sehen es nicht.

Desktop: Bottom Nav wird zur Standard-Sidebar oder bleibt als Header-Nav — sekundäre Priorität, Mobile-Erlebnis bestimmt das Design.

---

3. Smart Sections im Spielplan

Die 104-Spiele-Liste wird intelligent in Zeitabschnitte gruppiert.

Abschnitte (automatisch basierend auf aktuellem Datum):

Abschnitt	Default-Zustand	Inhalt
Heute	Expandiert, farbig hervorgehoben	Alle Spiele des Tages
Morgen	Expandiert	Alle Spiele des Folgetags
Diese Woche	Kollapsiert, Anzahl angezeigt	Restliche Spiele der Woche
Nächste Woche+	Kollapsiert	Spätere Spiele
Vergangene Spiele	Kollapsiert	Letzte Ergebnisse + eigene Punkte

Verhalten:

• Abschnitte sind auf-/zuklappbar (Accordion)

• "Heute" scrollt automatisch in den Viewport beim Öffnen

• Leerer Abschnitt wird ausgeblendet (z.B. "Heute" wenn kein Spiel)

• Stage-Filter (Gruppenphase, Achtelfinale...) wird zum optionalen Dropdown statt Button-Leiste

---

4. Zustandsbasierte Match-Cards

Jede Match-Card sieht visuell anders aus je nach Spielstatus. Die aktuellen Cards sind identisch unabhängig vom Zustand.

5 visuelle Zustände:

⏳ Offen (tippbar)

• Standard-Design mit Team-Flaggen und Kick-off-Zeit

• "Tipp abgeben"-Button prominent

• Countdown wenn <24h bis Anpfiff

• Pulsierender roter Countdown wenn <1h

✅ Getippt

• Grüner linker Rand / Akzent

• Tipp prominent angezeigt ("Dein Tipp: 2:1")

• "Ändern"-Link statt "Tipp abgeben"

• Häkchen-Icon

🔴 Live (in Spielgang)

• Pulsierender roter Punkt neben "LIVE"

• Aktueller Spielstand (wenn über Sync verfügbar)

• Tipp daneben zum Vergleich

• Tippfenster geschlossen — Schloss-Icon

🏁 Beendet (ausgewertet)

• Endergebnis prominent

• Dein Tipp + Punkte-Badge:

  • 🥇 Gold-Badge (3 Pkt): Exakter Treffer, goldener Schimmer-Effekt
  • ✅ Grüner Badge (1 Pkt): Richtige Tendenz
  • ❌ Grauer Badge (0 Pkt): Falsch getippt

🔒 Verpasst (nicht getippt, Spiel vorbei)

• Ausgegraut / reduzierte Opacity

• "Nicht getippt" Label

• Leichter visueller "Shame-Effekt" als Motivation fürs nächste Mal

---

5. Emotionale Momente & Animationen

5 Schlüsselmomente, die die App lebendig machen.

5.1 Tipp-Bestätigung

• Trigger: User klickt "Tipp bestätigen"

• Animation: Card pulsiert kurz grün, animiertes Häkchen fliegt rein

• Text: "Dein Tipp ist drin! 🎯" als kurze Success-Message

• Mobile: Subtiles Haptic-Feedback (Vibration via navigator.vibrate)

• Dauer: ~1 Sekunde, dann Modal schließt

5.2 Live-Countdown vor Anpfiff

• Trigger: Spiel startet in <1 Stunde

• Anzeige: Pulsierender roter Countdown-Timer auf der Match-Card ("Noch 12 Min!")

• Urgency-Stufen:

  • <24h: Countdown in Stunden ("in 5h")
  • <1h: Pulsierender roter Countdown in Minuten
  • <5min: Schnelleres Pulsieren

• Nach Anpfiff: "Tippfenster geschlossen" mit Schloss-Icon, sanfte Transition

5.3 Punkte-Reveal nach Spielende

• Trigger: User öffnet App / navigiert zu einem ausgewerteten Spiel, das noch nicht "gesehen" wurde

• Sequenz (gestaffelt, ~2-3 Sekunden):

  1. Endergebnis einblenden (z.B. "Brazil 3:1 Serbia")
  2. "Dein Tipp war: 3:1" einblenden
  3. Punkte-Counter animiert hochzählen

• Varianten nach Ergebnis:

  • Exakt (3 Pkt): 🎉 Konfetti-Explosion, goldener "EXAKT!"-Badge, Celebratory-Puls
  • Tendenz (1 Pkt): 👏 Grüner Puls-Effekt, "Richtige Tendenz!"
  • Falsch (0 Pkt): 😅 Kurzes Kopfschütteln-Emoji, "Knapp daneben..."

• "Gesehen"-Flag: Jeder Reveal wird nur einmal gezeigt (localStorage-basiert)

5.4 Ranglistenveränderung

• Trigger: Rang hat sich seit letztem Besuch geändert

• Anzeige: Toast-Notification beim App-Öffnen:

  • Aufstieg: "⬆️ Du bist auf Platz 3 aufgestiegen!"
  • Abstieg: "⬇️ Du bist auf Platz 7 gerutscht — hol dir die Punkte zurück!"
  • Knapper Verfolger: "⚠️ Anna ist nur noch 1 Punkt hinter dir!"

• Speicherung: Letzter bekannter Rang in localStorage, Vergleich bei jedem Laden

5.5 Streak-Tracker

• Definition: Anzahl aufeinanderfolgender Spiele, für die ein Tipp abgegeben wurde (nicht Korrektheit, nur Teilnahme)

• Anzeige: 🔥-Counter auf dem Dashboard und im Profil

• Meilensteine:

  • 3er-Streak: 🔥 Feuer-Icon erscheint
  • 10er-Streak: 🔥🔥 Doppel-Feuer
  • 20er-Streak: ⚡ Blitz-Icon

• Streak-Bruch: "Deine 7er-Serie ist gerissen! Starte eine neue." als Nudge auf dem Dashboard

• Backend: Streak wird bei Tipp-Abgabe berechnet (aufeinanderfolgende Spiele nach Kick-off-Datum)

---

6. Profil-Seite: Reiches Profil

Die aktuelle Profil-Seite zeigt Name, Rang und 4 Stat-Boxen. Das Redesign macht sie persönlich und interessant.

Layout (von oben nach unten):

Header-Card:

• Initialen-Avatar (bestehendes Design)

• Name + Rang-Badge ("🏆 Platz 5")

• Lieblingsteam mit Flagge (bestehende "Team hinzufügen"-Funktion, prominenter platziert)

Stats-Ring:

• Kreisdiagramm (Donut-Chart) mit Verteilung: Exakt / Tendenz / Falsch

• Gesamtpunktzahl in der Mitte des Rings

• Legende darunter

Tipp-Historie:

• Scrollbare Liste: "Deine letzten 10 Tipps"

• Jeder Eintrag: Teams, dein Tipp, Ergebnis, Punkte-Badge

• Expandierbar auf alle Tipps

Fun-Stats:

• "Dein Lieblings-Tipp: 1:0 (5x getippt)"

• "Du tippst 70% Heimsiege"

• "Längste Streak: 🔥12"

• Rotiert oder zeigt 2-3 gleichzeitig

Achievement-Platzhalter (Vorgriff Phase 2):

• Badge-Leiste am unteren Rand

• Grau/locked wenn noch nicht erreicht, farbig wenn freigeschaltet

• Phase 1: Platzhalter-UI, Logik kommt in Phase 2

---

7. Entfernte / Vereinfachte Features

KI-Agent / Expertenblick — ENTFERNT

• Chat-Widget (Fußball-Icon unten rechts) wird entfernt

• "Expertenblick"-Accordion im Tipp-Modal wird entfernt

• Dateien: AgentChat.tsx, Agent-Route im Backend (/api/agent) können entfernt oder deaktiviert werden

• Begründung: Nice-to-have, lenkt vom Kernflow ab, spart Platz auf Mobile

Tipp-Modal — VERSCHLANKT

• Entfernt: Gruppeninfo-Header, Kick-off-Datum (steht schon auf der Card), Expertenblick-Accordion

• Bleibt: Team-Flaggen + Namen, Score-Picker (+/-), Tendenz-Anzeige, "Tipp bestätigen"-Button

• Neu: Erfolgsanimation nach Bestätigung (siehe 5.1)

Stage-Filter — VEREINFACHT

• Aktuell: 8 horizontale Filter-Buttons

• Neu: Dropdown/Select im Spielplan-Header

• Smart Sections übernehmen die Hauptnavigation im Spielplan

Admin-Navigation — VERSTECKT

• Nicht mehr als Haupttab sichtbar

• Nur für User mit Editor-Rolle: Zahnrad-Icon im Header

• Viewer sehen keine Admin-UI

---

8. Technische Hinweise

Frontend

• Framework: React + Vite + TypeScript (bestehend)

• Animationen: CSS-Animationen + framer-motion für komplexere Sequenzen (Konfetti, Punkte-Reveal)

• Konfetti: Lightweight-Library wie canvas-confetti (~3KB)

• Charts: Donut-Chart für Profil — entweder SVG-basiert selbst gebaut oder leichtgewichtige Library

• Haptic: navigator.vibrate(50) für Mobile (Progressive Enhancement, kein Fallback nötig)

• State: localStorage für Streak, gesehene Reveals, letzter Rang

Backend

• Streak-Berechnung: Neue Query oder Service-Funktion, die aufeinanderfolgende Tipps zählt

• Dashboard-Daten: Neuer Endpoint /api/dashboard der Hero-Spiel, Stats und Nudges gebündelt liefert

• Cleanup: Agent-Route kann deaktiviert werden (Feature-Flag oder entfernen)

Kein Breaking Change

• Bestehende API-Endpoints bleiben kompatibel

• Datenbank-Schema braucht keine Migration (Streak wird berechnet, nicht gespeichert)

• Bestehende Tipps und Punkte bleiben erhalten

---

9. Phasen-Übersicht

Phase	Inhalt	Zeitrahmen
Phase 1 (dieses Dokument)	Dashboard, Bottom Nav, Smart Sections, Emotionale Momente, Match-Cards, Profil, Cleanup	Vor Launch (bis Ende Mai)
Phase 2	Badges & Achievements, Wochenwertung, Streak-Meilenstein-Rewards	Zum Launch / erste WM-Woche
Phase 3	Tipps anderer sehen, Reaktionen/Emojis, Abteilungs-Challenge	Während der WM, iterativ