Meins-Bereich der ARD Mediathek

Mit dem Launch des Meins-Bereichs in der ARD Mediathek bekamen Nutzer:innen einen einfachen Zugang zu personalisierten Inhalten.

Briefing

Als Teil der Personalisierungsstrategie sollte auf allen Ausspielwegen der ARD Mediathek [1] ein Bereich gelauncht werden, in dem Nutzer:innen ihre gemerkten und angefangenen Videos wiederfinden.

Die Personalisierung ist neben der Kuratierung essentieller Bestandteil der Produktstrategie der ARD Mediathek. Das personalisierte Angebot war allerdings im April 2021 noch sehr überschaubar. Es gab eine "Merken"-Funktion bei Videos, Video-Empfehlungen und Video-Verlauf: alle 3 waren aber nur weit unten auf der Startseite in Form von Teaserleisten platziert.

Primär sollten mit dem Launch des Features erst einmal die Auffindbarkeit der Merkliste und angefangener Videos verbessert werden.

Mit dem Meins-Bereichs als Grundstein würden in Folge auch Personalisierungs-Features wie Abonnements und Nutzer:innen-Einstellungen realisierbar werden.

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

Nutzer:innen & Nutzungsverhalten

In einer Online-Befragung hatten 40% der Nutzer:innen auf die Frage, was ihnen wichtig sei, die persönliche Merkliste genannt. Davor platzierten nur noch "lange Verfügbarkeit", "HD-Videos abspielen" und "Videos offline schauen". Damit war die Merkliste das wichtigste Feature im Rahmen der Personalisierung.

Umfrage-Ergebnisse 'Was ist Nutzer:innen wichtig?'. 85% antworteten 'Lange Verfügbarkeit', 52% 'HD-Videos abspielen', 49% 'Videos offline schauen', 40% 'Merkliste'. — Umfrage-Ergebnisse "Was ist Nutzer:innen wichtig?"

Team & Rollenverteilung

Nach einem Briefing durch das Produktmanagement war es meine Aufgabe als UX/UI Designerin, zuerst ein realisierbares Konzept für den Meins-Bereich in Wireframes zu erarbeiten und diese nach erfolgreicher interner Abstimmung in High-Fidelity Screen Designs umzusetzen.

Umfang & Technische Grenzen

In der ersten Version des neuen Meins-Bereichs sollten Nutzer:innen die Merkliste und ihren Videoverlauf finden. Nutzer:innen sollten zudem die Möglichkeit haben, einzene Videos zu löschen.

Ebenso sollte ein eleganter Weg gefunden werden, Leerzustände abzubilden, um neuen Nutzer*innen den Einstieg zu erleichtern und "Sackgassen" in der Navigation vorzubeugen.

Eine zentrale technische Erfordernis war, dass der Bereich auf allen Ausspielwegen möglichst gleich aussehen und funktionieren sollte – um Nutzer*innen ein verlässliches mentales Modell anzubieten und um Tech- und Design-Debt zu verhindern.

Designprozess & Ergebnis

Konzept & Wireframes

In der Konzeptphase wurden das Wording und der Feature-Umfang exploriert. Ich habe z.B. Flows für "Videos zu eigenen Playlisten hinzufügen" und "Mehrere Videos auswählen und löschen" designt, die im weiteren Projektverlauf depriorisiert wurden.

Depriorisiertes Feature: Mehrere Videos auswählen und löschen

Depriorisiertes Feature: Videos zu eigenen Playlisten hinzufügen

Daneben wurde über die Bezeichnung und Platzierung der verschiedenen Navigationspunkte entschieden:

Der neue Bereich wurde im Menü mit "Meins" betitelt, anstatt "Merkliste" und "Weiterschauen" einzeln aufzuführen – zugunsten der Etablierung des Begriffs für Nutzer:innen.
Die Bezeichnung "Konto bearbeiten" gewann gegen "Kontoeinstellungen" sowie "Mein ARD-Konto", da sie die Aktion erwartbar macht.
Die Bezeichnung "Weiterschauen" wurde der Bezeichnung "Verlauf" vorgezogen. Die Liste wird von Nutzer:innen, die die Mediathek auf mehreren Geräten nutzen, zum "Weiterschauen" genutzt und würde auch in Zukunft dahingehen optimiert werden.

High-Fidelity Screen Designs und Festlegung neuer UI-Komponenten

High-Fidelity Screen Design für den Meins-Bereich (Aktiver Tab: Merkliste — Meins-Bereich (HbbTV)

Dialog 'Merkliste Leeren?' im Meins-Bereich (Web, Desktop) — Dialog "Merkliste Leeren?" (Web, Desktop)

Dialog 'Merkliste Leeren?' im Meins-Bereich (Web, Mobil) — Dialog "Merkliste Leeren?" (Web, Mobil)

Empty State der Merkliste im Meins-Bereich (Web, Desktop) — Empty State der Merkliste (Web, Desktop)

Empty State der Merkliste im Meins-Bereich (Web, Mobil) — Empty State der Merkliste (Web, Mobil)

Im Zuge des UI-Designs bildeten sich mehrere Ausspielweg-übergreifende UI-Komponenten heraus:

Zum einen die Tabs (oder "Reiter"), mit denen zwischen Merkliste und Weiterschauen gewechselt wird. Diese wurden bis zu diesem Zeitpunkt nur auf den Seiten von Sendungen mit Staffeln eingesetzt und wurden durch diesen Einsatz nun zur Komponente "befördert" und in diesem Zuge noch optimiert (Margins, Schriftgrößen).

Eine weitere neue Komponente war die User-Bubble inkl. Name, die auf allen Ausspielwegen konsistent präsentiert werden sollte. Auf TV finden Nutzer:innen hier noch die Aktion "Abmelden" (Sichtbarkeit auf TV hat Priorität), die im Web aus Gewohnheitsgründen in der oberen rechten Ecke im Dropdown blieb.

Erkenntnisse

Positiv zu nennen ist, dass das UI-Design sich ausschließlich aus schon vorhandenen Design-Elementen erstellt wurde und somit wenig bis keine Tech- oder Design Debt verursacht.

Der Meins-Bereich bietet auf allen Ausspielwegen der ARD Mediathek dieselben, wenn auch minimalen, Funktionalitäten. Die depriorisierten Personalisierungs-Features sind bis jetzt leider nicht hinzugekommen (Juni 2021).

Die größere Vision für den Meins-Bereich wurde weder im Briefing thematisiert, noch während des Projekts herausgearbeitet, wodurch der Meins-Bereich visuell und textlich kaum Identität stiftet. Man könnte das verbessern, indem man Nutzer:innen persönlich anspricht oder ihnen Tools anbietet, mit denen sie die Mediathek ihren Bedürfnissen anpassen können (Themes, Abspiel-Verhalten, Playlisten erstellen). Ebenso könnte man durch visuelle Elemente (Hintergründe, individuell gestaltete Teaserraster, Banner) den Charakter der ARD Mediathek noch mehr zur Geltung bringen.