Beim ZDF galt dieses Jahr, ein Second-Screen-Begleitformat für Frankreich und Rio zu entwickeln. Die Berliner Agentur für Digital Experience Moccu konzipierte, gestaltete und entwickelte den hochperformanten Live-Kanal des ZDF
Nun hat das ZDF sie endlich: Eine responsive Website für die Sportberichterstattung von Live-Großevents wie Fußball-Europameisterschaft, Olympia oder derzeit den Paralympics. Wenn Sie sich die EM- und die Olympia-Seite noch anschauen wollen, sollten Sie das schnell tun! Ende Oktober schaltet das ZDF die Seiten ab.
Die Kanäle http://rio.zdf.de und http://em.zdf.de lassen sich problemlos für das nächste Sport-Großevent nutzen, weil sie als ausbaufähige Modulbaukästen konzipiert wurden. Moccu hat schon einige Second-Screen-Anwendungen für das ZDF konzipiert, gestaltet und entwickelt (siehe www.moccu.com/tag/zdf), doch vor einem Folgeauftrag steht bei öffentlich-rechtlichen immer eine Ausschreibung. Dass es geklappt hat, lag sicher auch an der responsiven Anwendung Web-Tribüne, die Moccu anlässlich der UEFA Champions League 2013 für das ZDF entwickelt hatte.
Gleich nach dem siegreichen Pitch im November 2015 machten sich die Moccu-Mitarbeiter Teresa Kuntze, Sofie-Marie Kreis, Alexia Schann und Andreas Hug auf zum Co-Creation-Workshop mit dem ZDF, um inhaltliche und die technischen Anforderungen zu klären: Wichtigster Wunsch aus Mainz: Die Redakteure vor Ort sollten schnell, intuitiv und strukturiert Content einpflegen können. »Wir mussten also nicht nur an die Enduser, sondern auch an die Redakteure denken, die mit dem System arbeiten«, so Projektleiterin Sofie-Marie Kreis.
»Bei der Konzeption mussten wir nicht nur an die Enduser, sondern auch an die Redakteure denken, die mit dem System arbeiten.«
Sofie-Marie Kreis Projektleiterin
Im Februar war Deadline für die Kreation, um dem Development genügend Zeit zu geben. »Feature complete« war Ende April. Dann folgten Usertests, Nacharbeiten und Optimierungen. »Mitte Mai waren wir mit allem durch«, so Stephan Jäkel, Senior Backend Developer, obwohl die EM erst am 10. Juni startete. »Natürlich haben wir die Zeit genutzt, um diverse Belastungstest durchzuführen«, erläutert er. Die Infrastruktur musste unter Beweis stellen, dass sie bei der EM auch einen echten Run aushält, etwa wenn bei einem wichtigen Tor Millionen Menschen gleichzeitig auf Daten zugreifen.
Bei der EM-Site folgt unter der Bühne mit Mannschaftspaarungen, der Newsticker, dann jeweils in einer Viererkette die Highlights, Informationen über die Mannschaft, allgemeine Informationen der Redaktion und zuletzt der Footer.Die Startseite von Olympia folgt der gleichen Struktur, zeigt allerdings statt einer Mannschaftsausstellung das Ranking der Medaillen. Die Entwickler haben mehr Platz geschaffen für Videos zu Life-Events, schließlich hatte man es mit 39 verschiedenen Sportarten zu tun, die der User über Icons erreicht.
Second Screen für beide Events
Doch zurück zum Anfang. Die vielen Inhalte für den User »snackable« aufzubereiten, war die Herausforderung für die Konzeption. Second-Screen-Anwendungen müssen so übersichtlich sein, dass der User auch ohne viel Konzentration während des Fernsehens damit zurechtkommt. Zumal das ZDF bereits einen Prototyp erstellt hatte, der ihre Vorstellungen visualisieren sollte. »Das hat natürlich extrem geholfen, die Bedürfnisse der Redaktion zu verstehen«, sagt Sofie-Marie Kreis. »Wir haben den Prototypen als Basis für unsere Arbeit genommen und machten uns darauf aufbauend Gedanken über die Einstiegspunkte und konzipierten aus der Sicht Mobile First eine reponsive Site.«
Chefkonzepterin Teresa Kuntze (links), Projektleiterin Sofie-Marie Kreis (sitzend), Kreativdirektorin Alexia Schann und Senior Backend Developer Stephan Jäkel besprechen bei einem Meeting auf Basis von Wireframes die Seitentypen am Whiteboard
Verschiedene Einstiegspunkte für verschiedene Personas
Also entwickelte das Team verschiedene Personas mit spezifischen User Journeys – etwa für Sportinteressierte, Live-Gucker oder Nomaden, die unterwegs schnell die Highlights sehen wollen. »Für das Konzept haben wir dann Content-Cluster angelegt«, erklärt Moccu-Chefkonzepterin Teresa Kuntze. Schließlich bilden Video und Text bei Sport-Events die Basis. Dann beschäftigte Kuntze sich mit den Einstiegspunkten. Es gibt User, die einfach nur die Spielstände einsehen wollen, andere wählen den Livestream. »Beim Fußball wollen Zuschauer wissen, wer das Tor geschossen oder die gelbe Karte bekommen hat«, überlegte sie, »während bei Olympia die Finals interessant sind. Also muss man die Informationsarchitektur so aufbauen, dass der Nutzer immer mit maximal zwei Klicks zu diesen Informationen gelangt.« Die Modulentwicklung und der Seitenaufbau mussten diese Anforderung erfüllen.
»Second-Screen-Anwendungen müssen so übersichtlich sein, dass der User auch ohne viel Konzentration während des Fernsehens damit zurechtkommt.«
Alexia Schann, Kreativdirektorin
Aus den Userjourneys ergeben sich die Einstiegsmöglichkeiten: Ein schneller Zugang zu allen Livestreams, wenn man unterwegs kein Spiel verpassen will. Video on Demand, um sich die verpassten Spiele noch einmal anzuschauen. Informationen und Daten rund um die Spiele mit Mannschaftsaufstellungen, Statistika und Higlights. Und nicht zuletzt Informationen uber Mannschaft und Sportler, aufbereitet von der Redaktion
Auch beim Fußball gab es signifikante Bereiche: Sportdaten, Mannschaftsaufstellung, aktuelles Geschehen, verschiedene Torperspektiven, Spielstand und Spielverlauf. Alle diese Informationen sollten schnell zugänglich sein. Also probierten Teresa Kuntze und die Kreativdirektorin Alexia Schann aus, wo sie Buttons anbringen mussten, damit die Wege für die Finger nicht zu weit waren. »Dann haben wir das Spiel »Verliebt oder Liebe« gespielt«, lacht Alexia Schann. Alles, was wirklich Liebe ist, bleibt.« So näherten die beiden Schann und Kuntze sich iterativ, Modul für Modul und Gestaltungselement für Gestaltungselement dem endgültigen Produkt.
Einschränkungen kreativ nutzen
»Es war spannend, die mehr oder weniger gleiche Anwendung für zwei so unterschiedliche Sport-Events zu entwickeln und dennoch die Individualität von beiden zu visualisieren«, findet Alexia Schann, die immer wieder vor die Frage gestellt war: »Was setze ich nur für die EM ein, was nur für Olympia?« Was muss also individualisiert werden und was ist für beide Events allgemein gültig?
Diese Mockups für den EM-Live-Channel des ZDF, links für den Desktop, rechts fürs Smartphone, zeigen schon die finale Systematik der späteren Site, die teilweise auch bei der Olympia-Site wiederzufinden ist.Die Desktop-Variante zeigt oben die Bühne, dann das News-Band, die vier Top-Stories, die Mannschaften, Live-Videos und Highlights und abschließend den Footer. Die Smartphone-Variante zeigt unter der Bühne zuerst die kommenden Spiele und folgt ansonsten der gleichen Systematik.
Ganz unbefangen konnten die Kreativen aber nicht zu Werke gehen. Lizenz- und Rechtegründe gaben für die Header Material des ZDF vor. Zudem gibt es einen für alle Nationen verbindlichen Styleguide von UEFA und IOC. Während sich die UEFA auf das Wording, die Platzierung des UEFA-Symbols und bestimmte Trademarks beschränkte, schrieb das IOC sehr kleinteilige Icons für die verschiedenen Sportarten vor, die gerade beim Design für mobile Geräte Probleme bereiteten.
Brandwichtig: Flexibilität und Performance
Damit die Anwendungen flott laufen, leicht anpassbar und gut zu bedienen sind, haben die Moccu-Developer ihr Content-Management-System auf Basis des Web-Frameworks Django selbst entwickelt. Sowohl im EM- als auch im Olympia-Channel fließen Daten aus unterschiedlichsten Quellen in das CMS.
»Ein Standard-CMS ist nicht darauf ausgelegt, Inhalte aus verschiedensten Quellen und Schnittstellen zusammenzufassen.«
Stephan Jäkel, Senior Backend Developer
Die Videos durchlaufen zunächst das Videoprocessing-System der ZDFMediathek, das die Filme für alle Formate und Ausgabegeräte aufbereitet, damit auch ältere Smartphone-Modelle beim Abspielen nicht in die Knie gehen. Erst nach dieser Transformation gibt die ZDFMediathek die Videos an das CMS weiter. Um Performance zu sparen, stoppt der Player nur, sobald andere Videos abgespielt werden. Hier wird keine Rücksicht auf Viewports genommen. Besonders in diesem Bereich hat Moccu ausführlich getestet, schließlich müssen auch ältere Smartphones mithalten können. Sobald Live-Bewegtbild auf einer mobilen Website die Hauptrolle spielt, müssen alle im Team viel Herzblut für die Performance aufbringen.
Alles gut gelaufen
Bleibt noch das große Lob aus Mainz: Die ZDF-Redakteure kamen mit dem System extrem gut zurecht – wichtig, denn bei Live-Berichterstattung von Großevents stehen sie ohnehin mächtig unter Druck. Moccus modulares System hat sich als Standardlösung bewährt und wird auch für kommende Sport-Events eingesetzt. Die Paralympics laufen gerade – und Dank des gelungenen Basis-Templates geben dem ZDF auch die nächsten großen Sport-Veranstaltung keine Kopfschmerzen mehr auf. Ende Oktober werden die EM- und Olympia-Sites erst einmal abgeschaltet, weil das ZDF einen neuen Player entwickelt, um sich noch besser für die großen Sportereignisse des nächsten Jahres vorzubereiten.
