Produktvision und Designsystem für die neue Streamingplatform
Ausgangslage
Worum es ging
Das ZDF hat seine Streamingplatform neu gebaut: für Web, Mobile Apps, Smart TV und HbbTV. Vier Geräte, vier Arten der Bedienung, von der Maus bis zur Fernbedienung.
Dazu kam eine zweite Anforderung. Die Oberflächen sollten nicht mehr von Hand zusammengestellt werden, sondern automatisch aus Daten entstehen. Teaser, Kacheln und Collections werden dynamisch gefüllt und später personalisiert.
Das geht nur mit einem System. Wird jede Kachel einzeln gestaltet, kann sie nicht automatisch befüllt werden. Fehlen die Regeln für die Gestaltung, sieht das Ergebnis zufällig aus.
Der Prozess
Eine Kachel, die jeden Inhalt trägt, auf jedem Gerät
Ein Design-Framework für alle Geräte: Web, Mobile, Tablet, TV und HbbTV. Es enthält ein responsives Grid, eine gemeinsame visuelle Sprache, Regeln für Bewegung und die Vorgaben für Barrierefreiheit nach WCAG 2.2. Jede Komponente, von der Navigation bis zum Teaser, verhält sich gleich, egal ob sie per Touch, Fernbedienung oder Tastatur bedient wird.
Die Farben liegen als semantische Tokens im System. Komponenten greifen auf Rollen zu, nicht auf feste Farbwerte. Bei automatisch zusammengestellten Collections liest das System die Farben aus dem Bildmaterial und überträgt sie auf die ganze Gruppe. So passen die Flächen zusammen, ohne dass jemand sie einzeln einstellt.
Die wichtigste Komponente ist die Teaser Tile. Sie nimmt sehr unterschiedliche Inhalte auf und bleibt dabei im Rahmen der Marke. Größe, Anordnung und Metadaten passen sich automatisch an. Die Kachel funktioniert für redaktionell ausgewählte Inhalte genauso wie für automatisch erzeugte.
Die Design Tokens sind gemeinsam mit Engineering in Storybook dokumentiert. Design und Entwicklung arbeiten seitdem mit denselben Werten.
Ergebnis
Was es gebracht hat
Die Platform läuft auf einem gemeinsamen Framework statt auf vier getrennten Gerätefassungen. Ein neues Inhaltsformat braucht keine neue Kachel, sondern nur eine andere Konfiguration der vorhandenen. Redaktionell ausgewählte und automatisch erzeugte Inhalte stehen nebeneinander, ohne dass der Unterschied auffällt. Farbentscheidungen werden einmal im System getroffen und gelten überall.