Zum Inhalt

UI-Audit & Restyling

Systematische Analyse aller Admin-Seiten mit anschliessendem Migrationsplan auf V6 Bright Organic.

Status: in-arbeit | Phase: vor-go-live | Aktualisiert: 2026-03-23

Kurzfassung

Im Maerz 2026 wurden 53 Screenshots aller Haupt- und Unterseiten ausgewertet. Die Analyse deckte 15 Inkonsistenzen auf -- darunter fuenf verschiedene KPI-Card-Varianten, fuenf Tab-Styles, wechselnde Button-Farben und sechs uneinheitliche Badge-Systeme. Aus den Ergebnissen wurden fuenf Layout-Templates abgeleitet, die rund 90 Prozent der App abdecken: Bereichs-Uebersicht (60 % aller Seiten), Detail-Seite, Dashboard/Cockpit, Daten-Tabelle und KI/System-Seite.

Aktueller Stand

Element-Inventar (10 Gruppen)

Die Audit-Session katalogisierte zehn Element-Gruppen: Top-Bar, Seiten-Header, KPI-Cards, Tab-Navigation, KI-Insight-Banner, Listen/Tabellen, Action-Elemente, Status-Badges, Formulare und Spezial-Elemente (Kalender-Grid, Agent-Cards, Maps, Charts).

Kritische Inkonsistenzen (4)

Die vier schwerwiegendsten Probleme betreffen KPI-Cards (fuenf Varianten ohne System), Tab-Navigation (fuenf Styles ohne klare Zuordnung), Button-Farben (Primary wechselt zwischen Gruen und Blau) und das Badge-System (sechs verschiedene Styles). Diese muessen vor Go-Live behoben sein.

8-Phasen-Stufenplan

  1. Design Tokens und CSS-Variablen
  2. Kern-Komponenten (KPI, Buttons, Badges)
  3. Layout-System (PageGrid, Sidebar)
  4. Dashboard Redesign
  5. Properties Redesign
  6. Personen und Tickets
  7. Finanzen, Betriebskosten, WEG
  8. Rest (Gewerbe, Kalender, KI, Settings)

Phase 1 bis 3 sind umgesetzt. Phase 4 und 5 sind teilweise abgeschlossen -- sechs von 66 Seiten tragen das V6-Design. Phase 6 bis 8 stehen noch aus.

Naechste Schritte

  • Phase 5 abschliessen: verbleibende Properties-Seiten auf V6 migrieren
  • Phase 6 starten: Personen- und Ticket-Module restylen
  • Empty States, Pagination und Loading States fuer alle Listen nachruesten
  • Konsistente Hover- und Active-States pruefen (aus Screenshots nicht ableitbar)

Historie

Datum Ereignis
2026-03-18 UI-Audit mit 53 Screenshots durchgefuehrt
2026-03-19 5 Layout-Templates und 8-Phasen-Stufenplan abgeleitet
2026-03-23 Phase 1-3 done, 6/66 Seiten im V6-Design

Quelldateien

  • docs/input/xolib-ui-audit.md.pdf -- Screenshot-Analyse mit Element-Inventar
  • docs/input/xolib-restyling-stufenplan.docx -- 8-Phasen-Migrationsplan

Abhaengigkeiten

  • Haengt ab von: PROD-001 (V6 Design System)