Blau
#171B2D
23,27,45
BLAU
UX/UI
Dev-Ready UX/UI für eine Streaming-App
Die Gestaltung der WELT TV Mobile App war weniger die Aufgabe, einzelne Screens zu entwerfen, als ein komplexes Streaming-Produkt in ein belastbares System zu übersetzen. Dokumentationen, Serien, Nachrichtenclips und Live-Übertragungen mussten auf einer gemeinsamen Plattform zusammengeführt werden, unter Berücksichtigung redaktioneller Prioritäten, markenspezifischer Anforderungen und Monetarisierungslogiken wie Plus-Zugang und Paywall-Komponenten.
Im Zentrum des Projekts stand ein dokumentiertes Design-System, das visuelle Sprache, Interaktionsmuster und produktweite Regeln definierte. Anstelle isolierter Layouts entstand ein wiederverwendbares UI-System aus Komponenten, Zuständen und Hierarchien, das über unterschiedliche Inhalte, Endgeräte und Nutzungssituationen hinweg konsistent funktioniert.
Orange
#F18825
241,136,37
ORANGE
Schwarz
#0E101B
14,16,27
SCHWARZ
Markenkonformes Farb-, Typografie- und Abstandssystem
Navigationsmuster angepasst an iOS- und Android-Konventionen
Definierte Komponentenzustände wie Laden, Leer und Fehler
Responsive Regeln für Telefon- und Tablet-Layouts, Hoch- und Querformat
Konsistente Medien-Teaser- und Thumbnail-Hierarchien für redaktionelle Inhalte
Vom Layout zur Interaktion
Über das Interface hinaus umfasste das Projekt eine detaillierte Screen- und Verhaltensspezifikation. Sie beschrieb, wie sich das Produkt in realen Szenarien verhält. Von Startseite, Suche und Detailseiten bis zum Live-Bereich, EPG, Authentifizierung, Profilen und Einstellungen. So wurde nicht nur Gestaltung, sondern auch Produktlogik präzise dokumentiert.
Startseite mit redaktionellen Highlights und Programmnavigation
Video-Detailseiten für Shows, Serien und Nachrichtenbeiträge
Streaming-Player für Live- und On-Demand-Video
Live-Sendebereich einschließlich EPG-Integration
Authentifizierung, Konto- und Profilabläufe
Einstellungen, Benachrichtigungen und plattformspezifische Varianten
Mit einer Komponentenbibliothek von über hundert Zuständen und einer vollständigen Gerätematrix für Smartphones und Tablets beider Plattformen entstand kein loses Set einzelner Ansichten, sondern ein kohärentes Produktsystem. Stakeholder aus Redaktion, Marke, Marketing und Management waren dabei fortlaufend eingebunden, um Struktur, Navigation und Umsetzbarkeit iterativ zu schärfen.
Ein entwicklungsreifes Design-Handoff.
Das Ergebnis war ein entwicklungsreifes Handoff: ein klar strukturiertes Paket aus Komponenten, Regeln und Screen-Spezifikationen, das dem externen Entwicklungsteam einen schnellen Einstieg in die Umsetzung mit minimalem Interpretationsspielraum ermöglichte. Übergeben wurde nicht nur Design, sondern ein System, das verlässlich gebaut werden konnte.
