Nicht nur bunte Pixel — warum das neue Gesicht des digitalen SPIEGEL mehr als ein Redesign ist
Eigentlich möchte man das ja tunlichst vermeiden – eine der größten Nachrichtenwebsites des Landes von Grund auf neu zu gestalten. Viel lieber würde man die Designsprache sukzessive in eine neue Richtung lenken. Jeden Produktbestandteil nach und nach modernisieren, testen, Designentscheidungen mit validen Daten hinterlegen. Wenn aber — wie bei unserem Projekt “NextGen” — alles in Bewegung ist und neben dem Design auch die komplette technische Infrastruktur, das Redaktionssystem und so gut wie alle Workflows in Redaktion und Verlag geändert werden, dann bleibt einem einfach keine andere Wahl als ein kontrollierter Bruch mit allem, was bisher war.
Die Ausgangslage
Bevor das Projekt “NextGen” vor etwas mehr als zwei Jahren wirklich Fahrt aufnahm, hatten wir neben allen organisatorischen und technischen Themen auch die Frage zu beantworten, wie das Produktdesign des SPIEGEL im Digitalen zukünftig aufgestellt und organisiert werden soll. Bis dahin war dies nicht formal definiert:
Die Verantwortlichkeiten für verschiedene Touchpoints waren dezentral aufgestellt, es gab kaum festgelegte Prozesse, welche diese verschiedenen Silos miteinander verknüpft hätten. Während die Kernplattform SPIEGEL ONLINE in einem Team designed und entwickelt wurde, wurden weitere Systeme und digitale Angebote der SPIEGEL-Gruppe in verschiedenen Verlagsbereichen und in der Zusammenarbeit mit diversen externen Partnern entwickelt. Bei einer so fragmentierten Landschaft ist es keine Frage des Styleguides, sondern lediglich eine Frage der Zeit, bis die verschiedenen Welten optisch auseinanderlaufen.
Und genau das ist passiert: SPIEGEL+ sah deutlich anders aus als SPIEGEL ONLINE, der Abschluss eines Abonnements führte durch verschiedene Systeme, die sich visuell stark unterschieden, teilweise nicht responsiv waren und Design Tokens und Patterns unterschiedlich zum Einsatz brachten. Bei einer frühen Bestandsaufnahme vor dem Relaunch konnten wir beispielsweise knapp zehn verschiedene Rot- und Orangetöne im digitalen SPIEGEL-Kosmos identifizieren.
Auch in der konkreten Zusammenarbeit im Entwicklungsprozess der redaktionellen Kernprodukte haben wir bis dahin unser Potential nicht voll genutzt: Die Anforderungen von Redaktions- oder Verlagsseite wurden gestaltet, aber es gab keine Prozesse, diese auch systematisch auf Produkt- und Nutzerfit zu hinterfragen. Dadurch wurde eher immer mehr angebaut als grundlegend zu renovieren.
Hinzu kommt noch, dass in der Vergangenheit immer wieder Features und Designs in die technische Umsetzung gegangen sind, die nicht komplett konzipiert und definiert waren – und dann, sehr spät im Prozess, nochmal unter hohem Zeitdruck vervollständigt oder neuentwickelt werden mussten. Teilweise unter Abstrichen im letztendlichen Featureumfang oder der Produktqualität.
Unser Ansatz
Uns war damit schon früh klar, dass ein neues Design für den digitalen SPIEGEL nicht nur aus schön gestalteten Layouts im Designtool unserer Wahl bestehen kann, sondern mit der Designarbeit auch ein Change-Prozess angestoßen werden muss, der sich vor allem auf zwei grundlegende Dimensionen bezieht:
- Universelle Designssprache:
Eine einheitliche Designsprache muss vom Kernprodukt ausgehen, sich aber auf andere Touchpoints mit der Marke SPIEGEL erweitern lassen — und idealerweise auch darüber hinaus skalieren (dazu später mehr). - Prozessgestaltung:
Die Zusammenarbeit des Designteams, der Redaktions- und Produktverantwortlichen auf der einen Seite, aber vor allem auch mit den technischen Umsetzungsteams auf der anderen Seite muss grundlegend reformiert werden.
Mit diesen Prämissen haben wir uns auf die Suche nach einem externen Partner gemacht, der uns auf diesem Weg unterstützt — nicht nur gestalterisch, sondern auch prozessual und konzeptionell. Mit der Agentur Make Studio haben wir diesen Partner gefunden und in den folgenden 18 Monaten sehr eng zusammengearbeitet. Nicht in einer klassischen Auftraggeber-Dienstleister-Beziehung, in der Design-Deliverables “über den Zaun” geworfen werden, sondern als integriertes, gemischtes Team aus Agentur und unseren eigenen Design- und UX-Kolleg*innen.
Das Ziel unserer Zusammenarbeit: Ein Design-System für (damals noch) SPIEGEL ONLINE entwickeln. Nicht mehr, aber auch nicht weniger.
Nachdem eine grundlegende Designrichtung (mehr dazu hier) entwickelt wurde und ein parallel laufender Markenprozess die Begrenzungspfosten definierte — etwa die Konzentration auf die Muttermarke DER SPIEGEL —, haben wir die Anforderungen für die Grundbestandteile der neuen Seite aus Redaktions- und Verlagsseite gemeinsam mit den Kolleg*innen konsolidiert und, wo möglich, standardisiert sowie in Komponenten heruntergebrochen.
Diese Standardisierung einzelner Elemente und daraus zusammengesetzter Seiten- und Artikel-Komponenten erlaubt uns eine bessere Governance des Design-Systems sowie eine Konzentration auf die — aus Nutzersicht — wirklich wichtigen Komponenten, Funktionen und Produktbestandteile. Custom-Lösungen über HTML-Tags, Formatierungen oder sonstige Hacks in Texten sollen nicht mehr möglich, aber auch nicht mehr nötig sein. Denn bei aller Rigidität, mit der wir standardisiert haben, soll durch den komponentenbasierten Aufbau natürlich die Flexibilität zur bestmöglichen Aufbereitung der Inhalte und der Seite beibehalten bleiben — für alle Endgeräte.
Aber nicht nur auf Anforderungsseite, sondern auch in der Zusammenarbeit mit der technischen Entwicklung sind wir enger zusammengerückt. So basiert der Aufbau unserer Komponenten in unserem Designtool (wir arbeiten seit Beginn des Projektes mit Figma) im Grunde auf der Markup-Struktur und dem Box-Model der inzwischen umgesetzten HTML-Bausteine im Browser. Margins und Paddings (die Innen- und Außenabstände von HTML-Elementen) und das Seitenraster wurden direkt in die Designs integriert, wodurch der Handoff-Prozess zwischen Designteam und dem SPIEGEL Techlab als technischem Umsetzungsteam deutlich erleichtert wurde und eine gemeinsame Sprache zwischen den Beteiligten etabliert wurde. SVG-Grafiken und Icons wurden nach direkter Abstimmung in teilweise mühsamer Handarbeit optimiert, um Performance, Accessibility und eine gute Darstellung sicherzustellen. Dadurch wurde in der Designabnahme von Komponenten nicht mehr Grundsätzliches diskutiert und geändert, sondern es wurden — im wahrsten Sinne des Wortes — lediglich einzelne Pixel optimiert. Ein geschätzter Kollege aus dem Frontend-Team des Techlab ließ sich nach Launch zu folgenden Worten hinreißen:
“Das waren endlich mal Designs, die auch so umsetzbar sind!”
Wer schon einmal im Kontext zwischen Webdesign und Frontend-Entwicklung gearbeitet hat, weiß, dass diese Worte einem Ritterschlag gleichkommen. Gleichzeitig müssen wir als Designteam auch ein großes Lob an die Kolleg*innen aus der Entwicklung geben. Denn das Delta zwischen Design und Umsetzung ist wirklich marginal – ebenfalls alles andere als eine Selbstverständlichkeit.
Das Ergebnis
Nach ziemlich genau einem Jahr intensiver Konzeption, Design, Umsetzung, Testing, Revision und Optimierungen sind wir nun mit spiegel.de am 8. Januar live gegangen. Und haben damit das erste große Produkt gelauncht, das sich aus unserem neuen Design-System und dessen Modulen speist:
Während in den “Guides” unsere grundlegenden Ansprüche und Prinzipien zur Zusammenarbeit hinterlegt sind, bildet der Bereich “Foundation” im wahrsten Sinne das Fundament des Designs: Neben dem Seitenraster und einem einheitlichen Icon-Stil sind dort die Basis-Styles wie Farben, unsere UI-optimierten Schnitte der Hausschriftarten, Schatten, Linien und weitere Design-Tokens festgelegt, welche die Marke und Stilistik der Seite maßgeblich prägen. Die Sektion “Patterns” beinhaltet hingegen alle konkreten, produktspezifischen Elemente (z.B. verschiedene Link-Klassen Fließtext und Navigation), Komponenten (z.B. die verschiedenen Teaserformate für Themenblöcke) sowie ganze Sektionen (z.B. der neue Leben-Bereich auf der Homepage), die letztendlich das Produkt ausmachen und die zu vollständigen “Layouts” kombiniert werden können.
Aufmerksamen Leserinnen und Lesern wird auffallen, dass die ersten beiden Bereiche, Guides und Foundation, grundsätzlich produkt- und plattformagnostisch, also allgemeingültig zu verstehen sind. Das ist kein Zufall, sondern Absicht. Denn diese grundlegende Design-Definition sollen nicht nur der Seite spiegel.de dienen, sondern zukünftig die gesamte Marke SPIEGEL im digitalen Raum definieren.
Durch die Modularisierung und Entkopplung zwischen grundsätzlicher Designsprache und konkreter Anwendung war es uns beispielsweise möglich, während des Relaunches der Kernplattform und trotz eines kleinen Designteams auch den Login-Bereich für Nutzer in das neue Design zu überführen, unseren Abo-Shop zumindest in Grundzügen auf die neue Designsprache zu heben und externe Einbindungen wie die Sportdaten oder den Bezahl- und Checkout-Prozess unseres Partners Plenigo organisch in die Seite zu integrieren. Im Gegensatz zu früher können wir somit unseren Nutzerinnen und Nutzern eine nahezu nahtlose User Experience über verschiedene Produktbereiche und technische Systeme bieten.
Und auch über spiegel.de und direkt angeschlossene Systeme hinaus ist die neue Designsprache bereits im Einsatz: Bei SPIEGEL Ed, der Bildungsinitiative der SPIEGEL Gruppe, wurde das Design bereits durch unsere IT und einen Dienstleister auf einer komplett anderen Technologie angewendet. Weitere Websites aus dem Unternehmensverbund werden nun sukzessive folgen.
Die Zukunft
Zweifelsohne ist es ein gutes Gefühl, als Designteam einen so großen Launch wie den von spiegel.de maßgeblich mitgestaltet zu haben. Der Launch ist für uns jedoch nicht das Ende eines 18-monatigen Entwicklungsprozesses, sondern der eigentliche Startpunkt in eine neue Ära. Wie schon angedeutet, soll das Design-System mit seinen Komponenten nicht nur die Marke SPIEGEL prägen, sondern zukünftig darüber hinaus auch die anderen Marken und Plattformen der SPIEGEL-Gruppe — beispielsweise manager magazin und bento.
Hierzu werden wir verschiedene Instanzen des Design-Systems erstellen, die eine klare, markenspezifische Designsprache etablieren und gleichzeitig auf die bereits entwickelten Komponenten und die möglichen Rekombinationen aus diesen zurückgreifen, um das Rad nicht immer wieder neu erfinden zu müssen. Dadurch schaffen wir einen deutlich effizienteren Projektverlauf bei kommenden Relaunches sowie die Möglichkeit, neue Produkte, Plattformen und Verticals dieser Marken schnell und in hoher Qualität zu entwickeln.
Neben dem Rollout auf weitere Bereiche werden wir aber weiterhin auch am Design System selbst sowie an damit verbundenen Entwicklungsprozessen arbeiten:
- Design ♥ Development (& vice versa)
Die Verzahnung zwischen Design und Frontend-Entwicklung wird weiter ausgebaut, um im Zielbild eine möglichst weitgehende Synchronisierung zwischen Design und Development zu erreichen. - Weiterentwicklung von Komponenten und Design Tokens
Durch laufendes aktives Testing neuer und bestehender Komponenten werden wir einen nutzerzentrierten Evolutionsprozess des Design-Systems sicherstellen — in Bezug auf die UX, aber auch auf Performance, Accessibility und Flexibilität der Bestandteile. - Vollständige Dokumentation und Öffnung des Systems
Um die Zusammenarbeit im Haus und darüber hinaus zu verbessern, werden wir das Design-System umfassend dokumentieren, niedrigschwellig zugänglich machen und um weitere Aspekte wie die neu entstandene, ebenfalls modulare Illustrationssprache erweitern.
Wie es aussieht, wird uns nicht langweilig werden — vor allem, wenn nicht nur das Design-System, sondern der größere Kontext betrachtet wird. Denn mit der neuen technischen Architektur, dem Design-System und den reformierten Prozessen und Arbeitsweisen im Unternehmen haben wir letztendlich gemeinsam ein Konstrukt geschaffen, mit dem wir als SPIEGEL-Gruppe im Digitalen flexibel und agil auf Nutzerbedürfnisse und Marktanforderungen reagieren können und das wir kontinuierlich weiterentwickeln und verbessern werden.
Fragen zum Design-System? Beantwortet das Designlab des SPIEGEL gerne: designlab@spiegel.de
