# 🖌️ [UI/UX Designer] — Schritt-für-Schritt Roadmap

> **Stand:** 2. April 2026
> **Rolle:** High-Density Design, Wireframes, Usability, Compose Desktop UX

---

## 🔴 Sprint A — Sofort (diese Woche)

- [ ] **A-1** | Design-Inventur: Bestehende V2-Screens analysieren
  - [ ] Alle vorhandenen V2-Screens katalogisieren (Screenshots in `docs/ScreenShots/`)
  - [ ] Inkonsistenzen in Spacing, Typografie und Farbgebung identifizieren
  - [ ] Offene UX-Probleme und fehlende Empty States dokumentieren
  - [ ] Ergebnis als kurze Issue-Liste für Sprint B vorbereiten

---

## 🟠 Sprint B — Kurzfristig (nächste Woche)

- [ ] **B-1** | Wireframes: Editier-Formulare (AlertDialog vs. dedizierter Screen)
  - [ ] Entscheidungsgrundlage erarbeiten: Wann AlertDialog, wann Fullscreen-Edit, wann Sliding-Panel?
  - [ ] Kriterien definieren: Anzahl der Felder, Komplexität, Kontext-Erhalt
  - [ ] Wireframes für beide Varianten erstellen (am Beispiel Reiter-Edit und Pferd-Edit)
  - [ ] Entscheidung treffen und als Design-Richtlinie dokumentieren
  - [ ] Ergebnis in `docs/06_Frontend/` ablegen

- [ ] **B-2** | Wireframes: Bewerb anlegen mit Abteilungs-Logik
  - [ ] Dialog-Flow: Bewerb-Grunddaten → Abteilungs-Vorschlag → Bestätigung
  - [ ] CSN-C-NEU Pflicht-Teilung: Visuelle Darstellung der automatischen Vorschläge
  - [ ] Abteilungs-Typ-Auswahl: `SEPARATE_SIEGEREHRUNG` vs. `ORGANISATORISCH` verständlich gestalten

- [ ] **B-3** | Wireframes: Veranstaltungs-Kassa
  - [ ] Gesamt-Saldo-Ansicht: Teilnehmer mit offenen Beträgen aus mehreren Turnieren
  - [ ] Zahlvorgang-Dialog: Eine Zahlung, Aufteilung auf Turniere sichtbar
  - [ ] Rechnungsvorschau: Zwei separate Rechnungen je Turnier nebeneinander oder als Tab

- [ ] **B-4** | Empty States für alle Listenansichten
  - [ ] Liste aller Screens mit möglichen leeren Zuständen erstellen
  - [ ] Illustrations-Konzept oder Icon + Text für Empty States definieren
  - [ ] Konsistente Vorlage für alle Empty States umsetzen

---

## 🟡 Sprint C — Mittelfristig (in 2 Wochen)

- [ ] **C-1** | Wireframes aus Sprint B implementieren
  - [ ] Editier-Dialog / Fullscreen-Edit gemäß Entscheidung aus B-1 in Compose umsetzen
  - [ ] Bewerb-Anlegen-Dialog mit Abteilungs-Logik gemäß B-2 umsetzen
  - [ ] Kassa-Screen gemäß B-3 umsetzen

- [ ] **C-2** | Design-System konsolidieren
  - [ ] Farb-Palette in `MaterialTheme` / `Theme.kt` vereinheitlichen
  - [ ] Typografie-Skala definieren (Überschriften, Body, Labels, Captions)
  - [ ] Wiederverwendbare Komponenten identifizieren und als Composables extrahieren
    (z.B. `MeldestelleCard`, `SectionHeader`, `StatusBadge`)

- [ ] **C-3** | Abteilungs-Ansicht: Startliste und Ergebnisliste
  - [ ] Wireframe: Startliste einer Abteilung (Startnummer, Reiter, Pferd, Verein)
  - [ ] Wireframe: Ergebnisliste einer Abteilung (Platz, Reiter, Pferd, Ergebnis)
  - [ ] Wireframe: Gesamtrangliste Bewerb (organisatorische Abteilungen zusammengeführt)
  - [ ] Wireframe: Separate Siegerehrungsliste (CSN-C-NEU, getrennt nach Lizenzklasse)

---

## ⏸️ Zurückgestellt

> ⏸️ **Web-App Präsentation (Veranstaltungs-Seite, Turnier-Seite)** — Separate Besprechung zu einem späteren Zeitpunkt
> ⏸️ **Nenn-Formular (Web)** — Separate Besprechung zu einem späteren Zeitpunkt
> ⏸️ **Live-Ergebnis-Seite (Web)** — Separate Besprechung zu einem späteren Zeitpunkt

---

## 📌 Abhängigkeiten

| Warte auf                                   | Von wem       |
|---------------------------------------------|---------------|
| Domänen-Modell final (Abteilung, Kassa)     | 🏗️ Architect |
| ViewModel-Struktur (welche States gibt es?) | 🎨 Frontend   |

| Meine Aufgabe                      | Ermöglicht wem                                |
|------------------------------------|-----------------------------------------------|
| Wireframes Editier-Formulare (B-1) | 🎨 Frontend: Implementierung der Edit-Dialoge |
| Wireframes Kassa (B-3)             | 🎨 Frontend: Kassa-Screen-Implementierung     |
| Design-System (C-2)                | Alle: konsistentes UI ohne Nacharbeit         |