Zukunft des Journalismus: Relaunch von SPIEGEL Online

NextGen heißt der große Relaunch des SPIEGEL intern. Dabei wurde die Print- und Online-Redaktion zusammengelegt und jetzt auch visuell zusammengeführt: Als gemeinsame Marke und mit einem Online-Auftritt, der Journalismus neu denkt, mit einer veränderten Struktur arbeitet, mit Themenbündelungen und Farbclustern – und einem innovativen Designsystem.

Michael Ahlf, Managing Partner und Creative Director UI/UX vom Hamburger Make Studio, erläutert den umfassenden Relaunch.

Schaut man sich die Relaunches von Spiegel.de, das vor 25 Jahren Jahren online ging, sind die Veränderungen sichtbar, aber eigentlich marginal. Jetzt ist das anders. Es heißt, die Marke wurde grundlegend neu gedacht. Was sind die größten Veränderungen? Und was waren die größten Herausforderungen?

Zuerst wird allen Besuchern sofort auffallen, dass sich die visuelle Erscheinung und die Struktur der Seite stark verändert hat. Daran werden sich die täglichen Nutzer erst einmal gewöhnen müssen, doch dann bietet ihnen das modernisierte Interface eine deutlich verbesserte thematische Erschließung der Nachrichtenlage. Die redaktionelle Erwartung an den SPIEGEL ist hoch, wenn man an die 14 Millionen wöchentlichen Leser und ihre breit gestreuten Bedürfnisse denkt. Eine große Herausforderung bestand in der richtigen Balance aus Tempo und Tiefe auf der Homepage, bei einer für den SPIEGEL gleichbleibend charakteristischen Art. Damit sind wir bereits mitten im Produkterlebnis, und genau daraus formt sich in den Köpfen der Menschen heute auch das Bild einer Marke.

Klassisch betrachtet ist der Namenswechsel von SPIEGEL ONLINE zu DER SPIEGEL natürlich eine riesige Veränderung. Aus Nutzerbefragungen wissen wir allerdings, dass zwischen den Markennamen selbst keine große Unterscheidung gemacht wird. SPIEGEL ONLINE wird unmissverständlich dem SPIEGEL zugeordnet, weswegen die Namensänderung eine eher geringe gedankliche Hürde für die Menschen darstellen dürfte.

Was musste sich grundlegend ändern damit »alles bleiben kann wie es ist«?

Es ist keine große Überraschung, dass nach 25 Jahren einmal alle Karten auf den Tisch gelegt werden müssen. Die Seite stand sowohl visuell als auch technisch auf wackeligen, altersschwachen Beinen. Das Produkt wurde daher von Grund auf neu entwickelt und dabei auch an vielen Stellen neu gedacht. Wir waren als externer Design-Partner für die neue visuelle Erscheinung und für den Aufbau eines Designsystems zuständig. Über ein Jahr lang befanden wir uns kontinuierlich vor Ort und arbeiteten eng mit den internen Teams von Produktmanagement, Development und Redaktion an den neuen Strukturen. Auf spiegel.de findet man wie gewohnt die aktuelle Nachrichten, Hintergründe, Meinungen und vieles mehr vom SPIEGEL-typischen Journalismus – doch das ganze Gerüst dahinter wurde einmal runderneuert.

Abgesehen davon transformiert der SPIEGEL gerade auf mehreren Ebenen. Im September 2019 wurden die Print- und Online-Redaktionen zusammengeführt und die vielen Produkte und Angebote der Gruppe wurden in eine einheitliche Markenarchitektur überführt, in deren Zentrum nun als Absender DER SPIEGEL für das Heft und Online gleichermaßen steht.

Wie gehen Online und Print NextGen zusammen?

Wir strebten von Anfang an danach, den digitalen Auftritt mit dem Heft näher zusammen zu bringen – weg vom Dunkelrot, hin zu einer einheitlichen Primärfarbe und hin zu einem gemeinsamen Schriftbild. Wenn man heute zwischen Website, Heft und App hin und her springt, gibt es keinen optischen Bruch mehr.

Ziel ist: »mehr Tiefe und thematischen Kontext, schlicht mehr Übersicht auf der Seite bei zugleich hoher Aktualität«. Wie wurde das visuell umgesetzt?

Die Startseite von spiegel.de kam bisher als linearer Feed daher. Im neuen Produkt gibt es diesen Feed zwar auch, er besteht nunmehr aus Blöcken, in denen mehrere Artikel zu einem Thema gebündelt präsentiert werden können. Für die Chefs vom Dienst bedeutet das mehr Freiheit und Feinheit in der Bestückung und der sogenannten »Orchestrierung» der Startseite. Für die Nutzer bedeutet das eine bessere Führung und eine klare Einordnung der Inhalte.

Wie entsteht die klare Trennung zwischen Nachricht und Meinung?

Publizistisch gesehen ist die Unterscheidung zwischen Nachrichten und Meinungen (Kolumnen, Kommentare) wesentlich. Bisher waren diese Gattungen optisch nicht unterscheidbar. Mit einfachen Mitteln haben wir im neuen SPIEGEL eine klare Differenzierung geschaffen: Die Headlines von Nachrichten haben ein klares, kantiges Schriftbild, wohingegen Meinungsstücke mit einer geschwungenen, persönlich anmutenden Headline ausgestattet sind. Es waren einige Iterationsschleifen nötig, doch letztendlich funktionieren die beiden Headline-Stile überraschend gut nebeneinander. Zusätzlich wird eine Meinung stets von einem runden Autorenbild begleitet, was für weitere Differenzierung sorgt.

Es gibt übrigens noch eine dritte, gänzlich neue Gattung von Artikeln, für die ein eigener Bereich auf der Seite und ein eigenes Ressort geschaffen wurde. Unter dem Namen »Leben« finden sich alle magazinigen Beiträge aus Gesundheit, Reise, Stil, Familie und Psychologie, die sich auch optisch noch mal deutlich abgrenzen.

Es heißt: »Die digitalen Produkte sollen dieselbe Grundlage sowohl technisch als auch designerisch nutzen.« Was bedeutet das genau?

Wenn man digitale Produkte heute zeitgemäß und fit für die Zukunft aufstellen möchte, darf man nicht mehr auf unterschiedliche Standards und Arbeitsweisen setzen. Die Bausteine im Designsystem des neuen SPIEGEL existieren im Design wie auch im Code gleichermaßen. Wir haben die gleichen Komponenten und nutzen dieselben Begriffe. Kommt es zu einer Änderung im Code, wird diese Änderung auch im Design-Tool durchgeführt – die beiden Entwicklungsumgebungen sind miteinander synchronisiert. Das vereinfacht die Kommunikation zwischen den Teams erheblich und räumt Ungereimtheiten aus dem Weg. Auf diese Weise lassen sich digitale Produkte konsistent und effizient zugleich skalieren.

Die Bespielung von Spiegel.de wird in Zukunft auf der Design-Bibliothek basieren. Was sind die wichtigsten Templates?

Früher war es durchaus üblich, gleich ganze Templates für einzelne Seiten anzufertigen. Diese Templates sind starre und nur bedingt wiederverwendbare Gebilde. Je größer ein Produkt anwächst und je länger daran gearbeitet wird, desto schwerer fällt es den Überblick zu wahren und umso höher ist auch das Risiko, dass viele kleine Inkonsistenzen entstehen. Plötzlich befindet man sich dann an dem Punkt, wo drei leicht unterschiedliche Primärfarben und sieben Button-Stile nebeneinander existieren und sich keiner mehr erklären kann, wie es eigentlich genau zu dem Durcheinander kommen konnte.

Gemäß den Prinzipien moderner Designsysteme, haben wir den neuen SPIEGEL bis auf die kleinsten Bausteine heruntergebrochen und von dort aus stückchenweise zusammengesetzt. Aus globalen Farben und Stilen werden kleine Elemente wie UI-Flächen, Headline-Felder und Buttons, die sich zu größeren Komponenten wie Artikelkarten zusammensetzen und in wiederkehrenden Mustern im Interface eingesetzt werden, bis daraus fertige Seitentemplates entsteht. Das Wesentliche daran: für alle Bausteine gibt es definierte Vorlagen, mit denen diese Bausteine verbunden sind. Wird an der Vorlage eines Buttons eine Änderung vorgenommen, ändern sich automatisch alle Buttons dieser Art in allen Bereichen des Produkts. Die Vorlagen werden allesamt an einer zentralen Stelle gesammelt und sind in verschiedenen Bibliotheken organisiert, was eine einfache Auffindbarkeit sicherstellt. Die Bibliotheken gelten als verbindliche Grundlagen für das ganze Produkt – wir sprechen von der »Source of Truth«. Diese Struktur bietet einerseits ein hohes Maß an Integrität und ermöglicht andererseits einen äußerst flexiblen und plattformübergreifenden Einsatz der grundlegenden UI-Bausteine.

Wie baut die Design-Bibliothek sich auf? Welchen Prinzipien folgt sie? Und wer wird sie nutzen?

Wir setzen auf ein hierarchisches Ordnungsprinzip, ähnlich zu Atomic Design. Die Bausteine werden ihrer Komplexität nach in kleinere »Elements« und größere »Components« klassifiziert und ihrer Bedeutung nach kategorisiert und beschrieben. Der Weg zu einem Button sieht beispielsweise so aus: Elements > Buttons > Button L Primary . Der einfache Baustein eines Buttons wird als Element klassifiziert, gehört zur Kategorie der Buttons, trägt Button und weitere Angaben zu seinen Eigenschaften im Namen.

Wir haben mehrere Bibliotheken für die Teilbereiche des Produkts aufgebaut. Die grundlegenden UI-Bausteine befinden sich im Bereich »Base UI«, Player-Elemente für Video- und Audio-Inhalte sind in »Media UI« zu finden, usw. Diese Bibliotheken können mit einem Klick für bestimmte Teams oder Kooperationspartner freigegeben werden. Die sehen dann nur jene Inhalte, die für ihre Arbeit auch relevant sind. Grundsätzlich richten sich die Bibliotheken also an alle, die in irgendeiner Form am Produkt arbeiten. Im engeren Kreis sind das Produktmanager, Designer und Developer, von denen die Bibliotheken aktiv gepflegt und weiterentwickelt werden, aber auch für die Redaktion, die Vermarktung, das Marketing und andere Teams sind sie relevant und hilfreich. Die Integration eines Designsystems ist eine langfristige Angelegenheit und digitale Produkte sind bekanntlich nie fertig. Beim SPIEGEL ist jetzt der erste große Schritt getan, ab jetzt wird es schrittweise weitergehen.