Projekt NextGen — wie der neue digitale SPIEGEL entsteht

DEV SPIEGEL
7 min readSep 11, 2019

--

Entwurf der neuen Webseite des SPIEGEL: neuer Name, klare Themenschwerpunkte, responsives Design
Entwurf der neuen Webseite des SPIEGEL: neuer Name, klare Themenschwerpunkte, responsives Design

Wenige Wochen noch, dann wird SPIEGEL ONLINE 25 Jahre alt. Erinnern Sie sich, sofern Sie alt genug sind, noch an das Internet des Jahres 1994? Besser nicht; es hatte keine Ähnlichkeit mit dem digitalen Ökosystem, das uns heute alltäglich umgibt. SPIEGEL ONLINE hat sich in den 25 Jahren seines Bestehens immer wieder weiterentwickelt. Doch bei der Reform, die nun ansteht und intern “NextGen” heißt, geht es um mehr.

Will man nach 25 Jahren eine Online-Marke grundlegend neu denken, sollte man ein paar Schritte zurücktreten, um die eigene Tradition zu respektieren und sich dennoch zu überlegen, was sich ändern muss, damit alles bleiben kann, wie es ist — also spiegel.de auch in einigen Jahren noch die Nachrichtenseite ist, die Millionen Deutsche täglich bevorzugt ansteuern. Vor gut anderthalb Jahren haben wir im SPIEGEL begonnen, uns mit der Zukunft von SPIEGEL ONLINE zu befassen, und sind dabei einige Schritte zurückgetreten.

Evolution des Designs über die Monate: Justierungen nach internen Analysen und Nutzertests

2020 werden wir in einem umfassenden Relaunch der Seite vieles ändern, zuvorderst den Namen “SPIEGEL ONLINE” — weil sie künftig im Sinne einer gemeinsamen Marke und einer gemeinsamen Redaktion “DER SPIEGEL” heißen wird. Doch hinter dem neuen Design verbergen sich weiterführende Motive. Ein Relaunch ist kein Wert an sich, sondern muss größeren journalistischen und geschäftlichen Zielen folgen. Und so ist auch digitales Produktdesign heute mehr, als einige Pixel zu schubsen und ein HTML-Grundgerüst schön anzumalen.

Wir waren uns klar, dass wir uns mit unserem großen Relaunch in einem Spannungsfeld bewegen:

  • Die publizistischen und wirtschaftlichen Ziele stehen am Anfang: Wofür wollen wir als Marke stehen, wie wollen wir im Netz künftig Geld verdienen? Das Design muss beides nicht nur reflektieren, sondern unterstützen. Der SPIEGEL ist keine Nachrichtenseite wie viele andere, sie ist seit vielen Jahren Marktführer nach vielen Kriterien im Qualitätssegment, und alle Leserumfragen zeigen uns: Es geht immer weniger um schnelle News, die im Internet vielfältig verfügbar sind, sondern — um das Profil der Marke herauszustellen — um die Präsentation der Tiefe, der Hintergründe, der analytischen Kraft, die unsere integrierte Redaktion bieten kann wie wenige andere. In Zeiten, in denen sich unser Bezahlmodell zum wichtigsten Wachstumsfeld entwickelt, ist dies doppelt wichtig. Wertigkeit und Wertversprechen gehen Hand in Hand, und das neue Designmodell muss das reflektieren und leicht erschließbar abbilden können.
  • Die technischen Möglichkeiten und Zwänge sowie die Herausforderungen durch die Plattform- und Kanalvielfalt im Internet des Jahres 2019 bedingen, dass wir ein zugleich simples wie flexibles Gestaltungssystem wählen, das die Chancen moderner Website-Entwicklung nutzt — von Responsive Design bis zu progressiven App-Development-Frameworks. Dazu kommt: Wir wollen erstens mittelfristig die digitalen Angebote von unserer Nachrichtenseite bis zur E-Paper-Kiosk-App in einer gemeinsamen Systematik unterhalten und technisch auch die Produktion der gedruckten Ausgabe daran anschließen. Die digitalen Produkte sollen dieselbe Grundlage sowohl technisch als auch designerisch nutzen. Schon deshalb unterliegen Technik und Design vielfältigen Wechselwirkungen. Zweitens haben wir in der SPIEGEL-Gruppe noch weitere Marken — vor allem manager magazin, bento und Harvard Business Manager — , die wir auf derselben Logik und Plattform aufsetzen wollen, ohne für jede Marke alles neu zu denken.
  • Die Bedürfnisse unserer Nutzerinnen und Nutzer sind wichtiger als interne Debatten und Zwänge. “Wir begleiten unsere Nutzer durch den Tag und in die Zukunft” — dieser NextGen-Leitspruch klingt etwas großsprecherisch, aber lieber orientiert man sich im Design an größeren Zielen als an kleineren, um nicht zu viele Kompromisse zu machen, und am allerbesten orientiert man sich eben an dem, was man aus Umfragen, Studien und On-Site-Analysen über die Bedürfnisse der Nutzer im Alltag weiß. Darum haben wir den Designprozess immer wieder mit Nutzerstudien, Interviews, Persona-Workshops und einen ganzen Checkup-Tag mit einem Dutzend Leserinnen und Lesern begleitet.

Im ersten Schritt haben wir Konzept- und Designentwicklung parallel betrachtet, um verschiedene Pole auszuloten und ganz verschiedenen Ansätzen Raum geben zu können. Diese haben wir dann in Explorationsstudien zusammengeführt — immer in interdisziplinären Teams aus Redaktion, Vermarktung, Vertrieb, Produktmanagement, Design und anderen Abteilungen — und immer rückgekoppelt an unsere Erkenntnisse aus der Nutzerforschung. Die wesentlichen Neuerungen im inhaltlichen Konzept waren nach den ersten Workshops klar: mehr Tiefe und thematischer Kontext, schlicht mehr Übersicht auf der Seite bei zugleich hoher Aktualität — dieses Dilemma zwischen Tempo und Tiefe mit besserer Strukturierung aufzulösen, erwies sich im nachrichtlichen Kernteil mit als die wichtigste Entwicklungsherausforderung. Leser wollen zugleich klarere Trennung von Nachricht und Meinung und mehr Gewichtung zwischen kleinen und großen Stücken. Und sie vermissen bei uns gelegentlich das, was Journalisten magazinige Stoffe nennen: Nutz- und Lebenswert mit Anspruch.

Design-Entwicklung mit Personas: Erst die Grundlagen, dann…
…die Ausgestaltung in verschiedenen Entwürfen für weitere Tests

Designerisch haben wir uns diesen Anforderungen durch verschiedene Ansätze genähert. Zunächst entwarfen wir acht Personas von Lesern, die bei uns auf der Seite regelmäßig identifizierbar sind, dann reduzierten wir sie auf die vier profilitiertesten, die für wesentliche Zielgruppen stehen — und überlegten: Wie müsste sich spiegel.de für sie anfühlen, was würden sie gut finden, welche Funktionen würden sie nutzen? Ziel war nicht, dass eine dieser sogenannten Explorationen 1:1 umgesetzt wird, sondern herauszufinden, wie sich die besten Teile der einzelnen Gedankenstränge schlau zu einem schlüssigen neuen Design kombinieren lassen. Wo sind die Extreme in der Gestaltung, die einem Grenzen aufzeigen, die es zu überwinden gilt? Was findet der eine Nutzer vielleicht fancy, der andere zu fancy? Wie viel Farbe ist gut für uns? Wie stark dürfen wir mit Typografie spielen?

Die Ergebnisse der Exploration haben wir dann intern wie extern abgeglichen: Liegen wir mit unseren Einschätzungen richtig? In enger Zusammenarbeit mit unserer hinzugezogenen Designagentur Make Studio haben wir in den Monaten bis zum Jahreswechsel 2018/19 inkrementell an einem finalen Entwurf gearbeitet — der dann allerdings nicht in ein simples Stylebook überführt und an die Entwicklung gegeben wurde. Die erwähnten technischen Rahmenbedingungen legten uns nahe, eine grundlegend moderne Designlogik anzuwenden, die gestalterische und technische Anforderungen so vereint, dass die Weiterentwicklung und Adaption von Entwürfen und technischer Umsetzung entscheidend vereinfacht und simpel nachhaltbar wird.

Über die Monate hinweg bauten wir als gemeinsames, integriertes Team aus internen Design- und UX-Experten und der Agentur ein sogenanntes Designsystem auf: eine Bibliothek, die auf der untersten Ebene abstrakte Designtokens wie Schriftarten, Farben, Stile und responsives Seitenraster festlegt — und auf den Ebenen darüber erst einzelne Elemente wie Überschriften, Buttons, Texte, Links, dann Komponenten wie Teaser, Bildergalerien, Videos und Zitatblöcke, schließlich ganze Seiten wie die Artikelansicht oder Übersichtsseiten von der Homepage bis zu Themenseiten.

Neues Designsystem des SPIEGEL: Von den Farben…
…über den Einsatz der Hausschriftarten…
…und das grundlegende responsive Seitenraster…
…hin zu den einzelnen Elementen…
…und schließlich zu den Modulen, die…
…zur Webseite zusammengesetzt werden.

Diese Aufbaulogik ermöglicht es uns erstens, später mit kleinen Eingriffen größere Justierungen vorzunehmen. Zweitens wird die Übertragung auf andere Marken deutlich leichter; man ändert auf den unteren Ebenen grundlegende Einstellungen, die in der Logik dann nach oben durchschlagen. Und drittens stellen wir damit natürlich eine gestalterische Konsistenz über verschiedene Kanäle sicher — auch über die eigentliche Plattform hinaus. Sozusagen nebenher können wir so auch weitere Websites aus dem SPIEGEL-Kosmos auf die neue Designsystematik umziehen, um ein einheitliches Markenbild zu kommunizieren.

Derzeit bringen wir das, was in dem monatelangen Prozess als neues digitales SPIEGEL-Design entstanden ist, mit unserer generellen Markenführung zusammen, setzen die neue Seite in unserem OKR-getriebenen Entwicklungsprozess in den Produktteams und unserer Techlab um — und entwickeln parallel die Gestaltungslogiken weiter. Wie können wir die designerische und technische Architektur noch enger verzahnen? Wie übertragen wir die Grundideen hinter dem neuen Design auf alle nicht-technischen digitalen Kanäle, also Facebook, Snapchat, Newsletter, Podcasts, Motion Design für Video…?

Grundprinzip der Entwicklung des neuen digitalen SPIEGEL: Redaktionelle Konzepte und Designs bilden das Produktgerüst des Relaunchs — dazu kommt dann die neue technische Architektur

Anfang 2020 wird das neue spiegel.de nach gut zwei Jahren intensiver Arbeit das alte SPIEGEL ONLINE ablösen, wenn wir in der Umsetzung nicht noch neue Herausforderungen entdecken. Tatsächlich hat die Arbeit an dem Redesign aber mehr bewirkt, als nur eine neue Webseite umzusetzen. In unseren Produktteams hat sich eine grundlegend andere Logik ergeben, wie wir in Zukunft Entwicklungen angehen werden. Eine wesentliche Erkenntnis war: Wir wollen nie wieder einen grundlegenden Relaunch wie diesen umsetzen. Stattdessen wollen wir in einem kontinuierlichen Prozess stetig daran arbeiten, die digitalen Angebote modern und frisch zu halten. Intern nennen wir das Projekt seit langem „NextGen“, weil es um die nächste Stufe von Produktdesign geht: ganzheitlich, eng verzahnt und interdisziplinär — nicht als Gestaltungsprojekt, das nach Launch abgeschlossen ist.

--

--

DEV SPIEGEL

DER SPIEGEL × Devblog. Wie wir unsere Produkte weiterentwickeln, was wir dabei lernen.