Case Study: Interaktives TV-Event für Galileo zum 50. Jubiläum der Mondlandung
Vor 50 Jahren hat der erste Mensch den Mond betreten — und du kannst heute selbst dabei sein!
Zum 50. Jubiläum der Mondlandung will Galileo ein neuartiges, interaktives TV-Event senden. Der User trifft insgesamt acht Entscheidungen (ähnlich dem Netflix-Hit Bandersnatch), welche den Fortgang der Geschichte beeinflussen. Die Steuerung erfolgt dabei über die Fernbedienung mittels HbbTV oder über die Galileo App.
Es war eine anspruchsvolle Aufgabe, diese unterschiedlichen Channel so in einem einzelnen Produkt zu integrieren, dass den Usern ein rundum stimmiges Erlebnis geboten wird.
Wir von ui/deation haben die HbbTV Redaktion von ProSiebenSat.1 Digital GmbH dabei unterstützt, eine einzigartige User-Experience und ein passendes User-Interface zu erschaffen, welche über die Plattformen hinweg harmonisch sind. Das Endergebnis lief am 15.07.2019 um 19.05 Uhr auf Pro7 und kann jetzt in der Mediathek von Pro7 abgerufen werden. Can you survive moon?
Context & Challenge
Am Anfang jedes Projektes steht die Konzeption. Das Ziel dabei war es, eine einheitliche User-Experience zu kreieren. Die größte Herausforderung hierbei stellten die zwei unterschiedlichen Quellen der Grafiken dar — die On-Air-Grafik des Live-TV durch Galileo und das HbbTV-Overlay.
Deshalb hat das Team aus allen Beteiligten, vier verschiedene Varianten zur Überprüfung konzipiert.
In Variante 1 überlagert die HbbTV-Grafik komplett die On-Air-Grafik. Ein Vorteil dieser Variante wäre, dass aufgrund der Überlagerung keine Abstimmung zwischen Galileo und HbbTV nötig gewesen wäre. Wäre es zu Komplikationen bei der Umsetzung oder Abstimmung in der endgültigen Lösung gekommen, so hätten wir hiermit eine einfache Fallback-Variante gehabt.
Variante 2 ist der ersten Variante sehr ähnlich. Hierbei überlagert die HbbTV-Grafik eine visuell zurückgenommene On-Air-Grafik. In dieser Variante wäre ebenfalls wenig Abstimmung nötig gewesen und sie hätte ebenfalls als einfache Fallback-Variante genutzt werden können.
In Variante 3 findet eine Integration beider Grafik-Quellen statt. Das HbbTV-Overlay liefert in dieser Variante nur den Focus-State der Buttons. So erreichen wir eine einheitliche User-Experience. Wichtig ist in dieser Variante die Abstimmung zwischen Galileo und HbbTV.
In Variante 4 findet ebenfalls die Integration beider Grafik-Quellen statt. Hier liefert jedoch erst das HbbTV-Overlay die Buttons. Mit dieser Variante wäre, nach Abstimmung zwischen Galileo und HbbTV, ebenfalls eine einheitliche User-Experience erreicht worden.
Process & Solution
Das Ziel einer einheitlichen User-Experience hätte durch die Varianten 3 & 4 erreicht werden können. Unsere Entscheidung fiel schlussendlich auf Variante 3, da so alle User die gleiche Visualisierung durchlaufen. So unterscheidet sich der User-Flow zwischen Live-TV und HbbTV nur während des tatsächlichen Votings.
Im Anschluss hat das Team die Konzepte in einem ansprechenden User-Interface umgesetzt. Dabei mussten wir vor allem die teilweise große Abweichung der Position der Elemente der On-Air-Grafik beachten.
Um zu verdeutlichen, wie umfangreich diese Aufgabe war — hier die Umsetzung des UI-Design in Zahlen:
- 104 Artboards
- 168 Symbole
- 75 E-Mail-Threads
- 10 verschiedene Ansprechpartner
- ca. 120 Tassen Kaffee
Und hier seht ihr eine Vorschau des Ergebnisses in einem kleinen Anschauungsvideo:
Stellt sich nur die Frage: Can you survive moon?
Am Ende blicken wir auf ein spannendes und anspruchsvolles Projekt zurück, durch dessen Umsetzung wir viel lernen konnten: Eine einheitliche und stimmige User-Experience ist entscheidend.
Über den Autor
Simon Helle ist multilateraler Designer, Bergenthusiast und Vater einer Tochter.
Hat Design in München studiert und im Anschluss Erfahrungen in Werbung, Editorial Design, sowie UI- und UX-Design gesammelt. Für ihn ist Design wie kochen — die Richtige Mischung und Würzung der Zutaten ist entscheidend.
Kommt jeden Tag mit dem Fahrrad zur Arbeit geradelt und hält sich auch sonst gerne in der Natur auf.
Unsere Website: https://www.uideation.com
