meldestelle/docs/04_Agents/Roadmaps/UIUX_Roadmap.md
Stefan Mogeritsch 7e16b3f318
Some checks failed
Build and Publish Docker Images / build-and-push (., backend/infrastructure/gateway/Dockerfile, api-gateway, api-gateway) (push) Has been cancelled
Build and Publish Docker Images / build-and-push (., backend/services/ping/Dockerfile, ping-service, ping-service) (push) Has been cancelled
Build and Publish Docker Images / build-and-push (., config/docker/caddy/web-app/Dockerfile, web-app, web-app) (push) Has been cancelled
Build and Publish Docker Images / build-and-push (., config/docker/keycloak/Dockerfile, keycloak, keycloak) (push) Has been cancelled
docs(roadmaps): add sprint execution order and detailed role-specific roadmaps
- Added `SPRINT_EXECUTION_ORDER.md` to define the cross-role sprint step sequence.
- Created individual roadmaps for Architect, Backend, Frontend, DevOps, Rulebook, QA, UI/UX, and Curator.
- Captured developer responsibilities, dependencies, and timelines for Sprints A–C.
- Aligned sprint planning documentation with session log agreements.
- Provided structured documentation in `docs/04_Agents/Roadmaps/`.

Signed-off-by: Stefan Mogeritsch <stefan.mo.co@gmail.com>
2026-04-02 14:35:54 +02:00

4.0 KiB

🖌️ [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