ARD Mediathek

Improving information hierarchy and joy of use – interaction concept for the livestreaming mode of ARD Mediathek

Cover image: A laptop screen displaying the Live page of ARD Mediathek in front of a colorful background

Briefing

In der ARD Mediathek können Nutzer:innen 18 Sender-Livestreams (Das Erste, BR, hr, ...) sowie regionale Livestreams einiger Sender (z.B. rbb Berlin, rbb Brandenburg) anschauen.

Vor allem im Web-Client war das Navigieren zwischen den Livestreams erschwert. Außerdem führten fehlende Livestream-Infos und unterschiedliche Livestream-Assets zu einem inkonsistenten Gesamteindruck zwischen den einzelnen Ausspielwegen [1]. Inkonsistenzen im UI-Design zwischen den einzelnen Ausspielwegen fallen den meisten Nutzer:innen zwar selten auf, verlangsamen aber als Tech- und Design-Debt Entwicklungsprozesse.

Ziel des Projektes war, die Live-Seite für alle Clients so umzugestalten, dass mehr Joy of Use und eine einheitlichere Informationshierarchie erreicht werden. Das Client-übergreifende Designsystem der ARD Mediathek sollte dabei immer mitgedacht und weiterentwickelt werden.

[1] Ausspielwege/Clients der ARD Mediathek: Responsive Webseite, TV-Apps (HbbTV, Android TV, tvOS), mobile Apps (Android, iOS)

Live-Seite vor dem Projektstart
Live-Seite vor dem Projektstart
Die Sender-Auswahl auf der Live-Seite in der iOS-App Die Sender-Navigation in der Hauptnavigation der iOS-App
Die Sender-Navigation auf der Live-Seite (links) und in der Hauptnavigation (rechts) der iOS-App

Nutzer:innen & Nutzungsverhalten

Ich habe mir vom Audience-Development-Team ein Dossier mit Nutzer:innen-Feedback zum Livestreaming zusammenstellen lassen. In puncto Usability und Funktionalität nannten Nutzer:innen unter Anderem:

Team & Rollenverteilung

Meine Designarbeit habe ich wöchentlich mit anderen Designer:innen aus dem Team reviewed, die aus meinen Web- und TV-Entwürfen die nativen Entwürfe für iOS und Android ableiten würden.

Mit dem Produktmanagement-Team und dem Lead des Design-Teams habe ich anhand von Wireframes das Gesamtkonzept und Feature-Umfang abgestimmt.

Die Übergabe der Designs an das Entwickler-Team fand über Zeplin statt, und alles weitere wurde in einem Meeting und dann in Chats besprochen.

Umfang & Technische Grenzen

Nicht Teil des Projekts waren die Live-Funktionalitäten des Players; allerdings war ich informiert über das zeitgleich laufende Redesign. Neben einem visuellem Update wurden u.a. Funktionalitäten wie Sprungmarken und Skip-Buttons entwickelt.

Designprozess & Ergebnis

Marktrecherche

Auf Mitbewerber-Plattformen habe ich nach UI-Patterns Ausschau gehalten, die im Livestreaming eingesetzt werden.

Screenshot der Programm-Info auf der Live-Seite von arte Screenshot der Programm-Info auf der Live-Seite von ZDF Screenshot der Programm-Info auf der Live-Seite von BBC4
Verschiedene Wege, Nutzer:innen über das Programm der verfügbaren Livestreams zu informieren (Screenshots der Webseiten von arte, ZDF, BBC4)

Bei der Bedienung des arte-Player fiel mir positiv auf, dass die wichtigste Funktionalität (Programm) so nah beim Player zu finden war und die visuelle Hierarchie (große Uhrzeiten) daran angepasst war.

Bei BBC4 stach positiv heraus, wie das laufende & darauffolgende Programm angekündigt wurden: "Now & Next" mit einem sehr intuitiven Layout (60:40 Verhältnis).

Ein eher negatives Beispiel war für mich das Programm auf der ZDF-Seite. Zwei Tab-Leisten untereinander (Datum, Tageszeit) und direkt darunter sehr eng untereinander die einzelnen Sender überfordern das Auge schnell.

Konzept & Wireframes

Die Ideen aus der Recherche habe ich im ersten Schritt in ein Layout überführt, das auch den Player mit einbezog: mit 'Now & Next' Infos unter dem Player und Sender-Auswahl im Player.

Erstes Layout für die Live-Seite
Erstes Layout für die Live-Seite

Diesen Entwurf habe ich mit Team-Kolleg:innen besprochen. Die Informationshierarchie an sich wurde für gut befunden – also haben wir einfach die Sender-Auswahl aus dem Player herausgenommen und daneben angeordnet:

Zweiter Entwurf für die Live-Seite – mit Sender-Liste neben dem Player
Zweiter Entwurf für die Live-Seite – mit Sender-Liste neben dem Player

Die 60:40 Aufteilung für die "Now & Next" Informationen fiel dadurch zunächst weg, allerdings nur auf Desktop. In den TV-Entwürfen (s.u.) habe ich diese Darstellung weiterhin genutzt.

High-Fidelity Screen Designs

Ausgehend von den Wireframes habe ich High-Fidelity Screens designt. Hier die Designs für die Standardansicht – Das Erste im Livestream:

High-Fidelity Screen Design für die Live-Seite (Web, Desktop)
Live-Seite (Web, Desktop)
High-Fidelity Screen Design für die Live-Seite (Web, Mobil)
Live-Seite (Web, Mobil)
Senderauswahl (HbbTV)
Senderauswahl (HbbTV)
Player im Live-Modus (HbbTV)
Player im Live-Modus (HbbTV)
Programm-Info im Player (HbbTV)
Programm-Info im Player (HbbTV)

Designs für Sender mit regionalen Livestreams

Für Sender mit regionalen Livestreams habe ich eine zusätzliche Tab-Navigation eingesetzt:

High-Fidelity Screen Design für die Live-Seite für Sender mit regionalen Livestreams (Web, Desktop)
Live-Seite für Sender mit regionalen Livestreams (Web, Desktop)
High-Fidelity Screen Design für die Live-Seite für Sender mit regionalen Livestreams (Web, Mobil)
Live-Seite für Sender mit regionalen Livestreams (Web, Mobil)
Live-Seite für Sender mit regionalen Livestreams (HbbTV)
Live-Seite für Sender mit regionalen Livestreams (HbbTV)

Designs für tvOS

Auf tvOS findet die Senderauswahl durch ein spezielles Card-Pattern statt. Hierfür habe ich die Card-Ansicht designt:

Senderauswahl über Cards (tvOS)
Senderauswahl über Cards (tvOS)
Senderauswahl über Cards, gescrollt (tvOS)
Senderauswahl über Cards, gescrollt (tvOS)

Festlegung neuer UI-Komponenten

Ich konnte mit den Designs zeigen, dass sich die quadratischen Kacheln mit Senderlogos gut als neue UI-Komponenten eignen würden. Mit der Senderkachel als verlässliche Komponente konnte die Sender-Liste über verschiedene Bildschirmgrößen hinweg Ruhe ins Erscheinungsbild bringen:

Design der Sender-Liste auf Desktop Design der Sender-Liste auf Mobil Design der Sender-Liste auf Tablet
Design der Sender-Liste auf Desktop, Mobil, Tablet

Die Senderkacheln wurden nach dem Launch der Live-Seite schnell auch in anderen Kontexten eingesetzt, z.B. in der Videobeschreibung, im Programm, und für die Senderauswahl auf AndroidTV.

Erkenntnisse

Die Ergebnisse des Redesigns sind vor Allem die Verbesserung der Navigation und der visuellen Hierarchie. Es hat mir Freude bereitet, einen so zentralen Teil der ARD Mediathek gestalten zu dürfen und die Ergebnisse auch Monate später noch zu genießen, etwa wenn ich Nachrichten oder Sport-Events live verfolge.

Zudem konnte ich während meiner Zeit bei ARD Online auch bei der Gestaltung der Livestream-Teaser mitwirken, die auf der Startseite und in Collections eingesetzt werden, wodurch ich auf die gesamte User Journey des Livestreamings gestalterischen Einfluss nehmen konnte.