Kunde
Agentur
Job
DETLINES – DAS DESIGN SYSTEM FÜR ALLE PRODUKTE DES ZDF
DetLines ist das zentrale Design System aller Produkte des ZDF, mit dem Nutzer*innen eine einheitliche User Experience über alle Ausspiel-Plattformen erleben. Dabei wird immer die komplette Produktlandschaft betrachtet: Web, Mobile Apps: ios, android, Big Screen: tv-html, android-tv und tvos. Mit DetLines können neue Features und Anwendungen effizient, konsistent und plattformübergreifend umgesetzt und dem Team ein einheitliches Verständnis der Tokens, Components und Patterns vermittelt werden.
zielsetzung
Das Design System ist nach dem Atomic Design-Ansatz gestaltet, sodass neben dem ZDF-Streaming-Portal jederzeit weitere Produkte für das ZDF effizient entwickelt werden können. Ein zugängliches Regelwerk hilft bei dem Einsatz der Components und Patterns für alle Ausspielwege und Plattformen. Dadurch werden Sonderfälle vermieden, Abstimmungen erleichtert, die Zusammenarbeit verbessert und QA-Prozesse beschleunigt. Alle Components und Patterns sind mit dem Fokus auf Barrierefreiheit entwickelt worden, wodurch eine inklusive Nutzung gewährleistet werden kann. Durch die Berücksichtigung von Nutzerstudien, Personae und User Journeys trägt DetLines dazu bei, dass neue Produkte immer aus der Perspektive der Nutzer*innen entwickelt werden.
Herausforderung
Die große Anzahl der verschiedenen Plattformen (Web, Mobile Apps, Ausspielungen für Big Screen) und die Anforderungen und Erwartungen an ein Streaming-Portal erforderten ein ausgeprägtes Verständnis an Systematisierung und ein hohes Wissen der technischen Herausforderungen.
Im Mittelpunkt des neuen ZDF-Streaming-Portals stehen die Nutzer*innen mit ihren individuellen Interessen und Vorlieben. Nutzende werden jetzt dank einer verbesserten Navigationsstruktur intuitiv durch das Angebot geführt. Automatisierte und algorithmisch generierte Seitentypen sorgen für eine klare und übersichtliche Präsentation der Inhalte.
Es sollten gänzlich neue Maßstäbe für ein modernes, intuitives und inklusives Streaming-Portal gesetzt werden und mit seiner öffentlich-rechtlichen Personalisierungsstrategie eine zeitgemäße Antwort auf die gestiegenen Anforderungen der Nutzenden gegeben werden.
Strategisch setzt der Launch auf zentrale Innovationen der vergangenen Jahre auf: Die Strategie „Ein ZDF für alle“ hat das Angebot an neuen Inhalten für die non-lineare Nutzung bereits deutlich erweitert. Durch die Zusammenarbeit im ARD/ZDF-Streaming-Netzwerk können zudem Inhalte der ARD sowie von Partnersendern über das Streaming-Portal des ZDF abgerufen werden.
Mit selbst entwickelten Lösungen wie dem hauseigenen Empfehlungssystem kann sich das ZDF außerdem auf umfangreiche Erfahrungen mit Automatisierung und Personalisierung stützen.
Durch diese Anforderungen an das neue ZDF-Streaming-Portal mussten die alten Components und Patterns komplett überarbeitet und größtenteils neu entwickelt werden.
Gestaltung
Durch die Systematisierung und einer neu geschaffenen Single Source of Truth können alle Produkte des ZDF jetzt konsistent, responsive und mit einer einheitlichen Accessibility (weiter-)entwickelt und implementiert werden.
Alle Components und Patterns liegen jeweils in Figma und auch im Frontend nur noch einmal vor und werden an anderen Stellen referenziert. Durch den ständigen Abgleich mit den gesetzten Designprinzipien kann eine einheitliche Design- und Bildsprache sowie User Experience über alle Plattformen gewährleistet werden. Dieses Vorgehen hilft die Entscheidungsprozesse bei neuen Components und Patterns zu beschleunigen.
Klar, neuartig, bildgewaltig.
Das neue UI-Design besticht durch Klarheit, wirkt unmittelbar neuartig und ist bildgewaltig. Die dynamische Inspiration ist integraler Antriebspunkt für das UI-Design und trägt die Idee von individuell passenden, endlos guten Inhalten auf der visuellen Ebene.
Einfach, verständlich, verfänglich.
Bei allen Entscheidungen zum neuen UI sind die einfache Bedienung, Verständlichkeit des UI und die Verfänglichkeit die treibenden Faktoren unserer Entscheidungsfindung. Unser Ziel ist es, dass Nutzende sich schnell zurechtfinden und immer passende Inhalte finden, die zu ihnen passen, auf die sie Lust verspüren. Dabei wollen wir situativ inspirieren und einen Wow-Effekt erzielen.
Primärer Fokus auf Darkmode
Unter Betrachtung des Lean-Back-Fokus und den häufigsten Nutzungsszenarien sehen wir den primären Fokus auf dem Darkmode.
Einheitliche UX über alle Plattformen und Produkte hinweg
Unsere UI setzt auf Plattform- und Produkt-übergreifende Komponenten. Wir zielen auf eine einheitliche UX über alle unsere Plattformen (soweit technisch möglich) und Produkte hinweg, ohne dabei uniform zu wirken. Den Besonderheiten in der Bedienung auf einzelnen Touchpoints wird dabei selbstverständlich Sorge getragen.
DESIGN
PRINZIPIEN
01
Wir gestalten für Menschen.
02
Wir zeigen selbstbewusst unsere Kompetenzen.
03
Wir schaffen ein Umfeld, das dem Inhalt gerecht wird.
04
Wir reflektieren im Design die Nähe zum Nutzer.
05
Wir lernen aus Nutzerfeedback und arbeiten mit Empathie an der Weiterentwicklung.
Designprozess
zielgruppe
DetLines richtet sich an alle Product Owner, UX- und UI-Designer*innen, Frontend-Entwickler*innen und das QA-Team. Der Fokus auf unsere Zielgruppe hat maßgeblich die Struktur und Architektur von DetLines vorgegeben.
architektur
Parallel zur UI-Entwicklung des neuen ZDF-Streaming-Portals und der dazugehörigen Konzeption wurde das Design System DetLines komplett überarbeitet. Über zwei Jahre entwickelte unser Team die aktuelle Version von DetLines. Dieses Design System besteht aus einer Foundation-Library, einer Icon-Library, einer Core-Library und den jeweiligen Product-Libraries in Figma, den dazugehörigen Dokumentationen in Zeroheight und den Frontend-Libraries und Dokumentationen in Storybook für das Frontend.
Dabei wird Zeroheight zur zentralen Schnittstelle zwischen UI-/UX-Design und Frontend, da es die direkte Verknüpfung zu den Figma-Libraries bietet und Storybook einbinden kann. Die Library spielt das Verhalten, die Ausprägungen und, mittels Live/Mock-Daten, eine genaue Abbildung der jeweiligen Components und Patterns aus. Mit der neuen DetLines Core-Library können neben dem neuen ZDF-Streaming-Portal neue Produkte für das ZDF effizient und zielgerichtet ausgestaltet und weiterentwickelt werden. Mit der Product-Library für das ZDF-Streaming-Portal erhält das Produkt selbst eine Recipe-Library, die alle produktspezifischen Components und Patterns enthält und dabei auf die Core-Components und Core-Patterns des ZDFs referenziert.
Gemeinsame Sprache
Über alle Instanzen und Disziplinen (PO, UI, UX, Dev, QA etc.) konnten wir uns auf eine einheitliche Sprache für die Tokens, Components, Patterns, Types, States und Types einigen. So konnten Abstimmungen und die Kommunikation verbessert werden und Missverständnissen vorgebeugt werden.
Funktionale Pattern
Durch die aktuelle Ausrichtung zu einem ZDF-Streaming-Portal haben sich grundlegende funktionale Patterns geändert. Diese erhielten Einzug in das neue DetLines und bilden den Kern der User Experience.
visuelle Pattern
Mit der neuen Designsprache und den entwickelten Stylings sollten die gesteckten Ziele und Anforderungen für ein modernes Streaming-Portal umgesetzt werden.
Prozesse für die Weiterentwicklung
Parallel haben wir an Prozessen gearbeitet, wie die Arbeit zwischen den Product-Teams und dem Design System-Team gestaltet werden kann. Wie werden neue Components eingeführt? Wer entscheidet über Components? Wie erreichen sie alle Beteiligten und wie können wir sicherstellen, dass alle Produkte mit den Core-Components gestaltet werden? Somit soll sichergestellt werden, dass es keine Components und Patterns doppelt entwickelt werden. Wir als Design System-Team unterstützen die Product Teams aktiv in ihrer Arbeit, setzen Anforderungen schnell und effizient um, geben Onboardings, bieten Hilfestellung und Guidelines bei der Implementierung und Nutzung, damit DetLines auch weiterhin ein fester Bestandteil des ZDFs bleibt.
Barrierefreiheit
Während des gesamten Prozesses wurden alle Patterns stets unter den Gesichtspunkten der Barrierefreiheit hin überprüft. Durch die Ergebnisse aus BITV-Tests konnten zielgerichtete Verbesserungen vorgenommen und eine inklusive Nutzung und Partizipation gewährleistet werden. Neue Components und Patterns müssen stets die BITV 2.0-Vorgaben für die Barrierefreiheit einhalten. Durch DetLines wurden diese Prozesse in sämtlichen Gewerken beschleunigt und es kann effektiver und effizienter auf Bedürfnisveränderungen der Nutzer*innen reagiert werden.
Mithilfe umfangreicher zusätzlicher Programmdaten werden Inhalte leichter zugänglich, besser klassifiziert und übersichtlich gegliedert. Die technische Weiterentwicklung, kombiniert mit einem zeitgemäßen Design und einer anwendergerechten Inhalte-Darstellung, lassen ein intuitives Nutzungserlebnis für alle Zielgruppen entstehen.
Team
Das ZDF-DetLines Design System wurde interdisziplinär aufgebaut:
product owner
Product Owner haben Feedback aus Nutzer:innen-Perspektive eingebracht, das Team gesteuert, Abstimmungen zwischen den Product-Teams geleitet und Neuentwicklungen begleitet.
DESIGN
Ein Team aus UI/UX Designer*innen legte eine Foundation-Library, Icon-Library und eine Core-Library für alle digitalen Produkte des ZDFs und eine Product-Library für das neue ZDF-Streaming-Portal in Figma an. Dabei sind je Component und Pattern alle sechs Ausspielwege samt der Types und States sofort zugänglich und somit für Anwender*innen intuitiv und schnell einsetzbar.
entwicklung
die Frontend-Teams der einzelnen Plattformen legten jeweils für die Core-Components und die produktspezifischen Components und Patterns eigene Libraries an – mit Fokus auf Wiederverwendbarkeit, Testbarkeit und Dokumentation für das Frontend-Team.
architektur
Ein Design System Architect definierte die generelle Struktur und Architektur der Component und Patterns für die Core-Library, Recipe Library und das Zusammenspiel der verschiedenen Libraries in Figma.
dokumentation
Ein Team dokumentierte Tokens, Component und Patterns in Zeroheight, sorgte für die Verknüpfung zu Figma und die Einbindung von Storybook.
governance
Ein dediziertes Design-System-Team übernimmt Pflege, QA und Erweiterung des Systems.