Ronny
053afcdc26
Umfassendes Design-Dokument für das App-Redesign: - Dashboard als neue Startseite (Hero + Stats + Nudges) - Bottom Navigation Bar (Mobile-First) - Smart Sections im Spielplan - 5 emotionale Momente (Konfetti, Countdown, Streak etc.) - Zustandsbasierte Match-Cards - Reiches Profil mit Stats-Ring und Tipp-Historie - Cleanup: KI-Agent entfernen, Modal verschlanken Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
10 KiB
10 KiB
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):
- Endergebnis einblenden (z.B. "Brazil 3:1 Serbia")
- "Dein Tipp war: 3:1" einblenden
- 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-motionfü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/dashboardder 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 |