Relaunch NZZ Abo-Shop: Agile Designentwicklung

Michael Sebel

Der Abo-Shop der NZZ hat vor kurzem ein Facelift bekommen. Wir durften diesen Auftrag vom Designprozess, bis hin zur technischen Überarbeitung umsetzen. Da wir bereits vorher die Shoplösung zusammen mit dem SAP-/Businessteam aufgebaut haben, konnten wir einen agilen Designprozess anwenden – Direkt am lebenden Patienten sozusagen.

Bereits im September 2017 erschien nzz.ch im neuen Design. Zusammen mit einigen neuen Features wurde im November auch der Abo-Shop der NZZ wieder näher ans Design der nzz.ch Website angelehnt. Das vorherige Design wurde unabhängig von nzz.ch umgesetzt und hat sich weit vom Markenbild der NZZ entfernt. Das neue und modernere Design von nzz.ch ist die Gelegenheit, auch den Abo-Shop aufzufrischen. Nebst der Auffrischung wird auch eine überarbeitete und vereinfachte Produkt-Struktur präsentiert.

Moment. Das läuft aber nicht auf WordPress, oder?

Wir nutzen WordPress zwar als CMS der statischen Inhalte vom abo.nzz.ch, jedoch hat die eigentliche Software am Frontend nur noch sehr wenig mit WordPress zu tun. Technisch gesprochen ist WordPress nur ein „Proxy“, um eine komplette Individuallösung aufzubauen. Der Abo-Shop der NZZ ist somit im weitesten Sinne eine komplette Eigenentwicklung: Auf Basis einer (in der NZZ In-House entwickelten) Middleware, die an das zentrale SAP-System angebunden ist. Das Redesign Projekt umfasst nur wenige Änderungen und Erweiterungen an der Software selbst, jedoch wurde das Design von Grund auf überarbeitet.

Agile Designentwicklung

Ich gebe zu, die Wortkombination habe ich gerade erfunden. Was wir darunter verstehen ist ein wesentlicher Unterschied zu unseren „klassischen“ Prozessen, wo wir erst ein komplettes Screen-Design „zeichnen“ und erst dann die technische Umsetzung machen. Der grosse Vorteil: Ein umfangreicher Style-Guide (Schriften, Farben, inhaltliche Elemente vor allem für nzz.ch) ist vorhanden. Wir müssen somit einen grossen Teil vom Rad nicht mehr neu erfinden, aber diesen Style-Guide so exakt wie möglich auf die Design-Elemente des Abo-Shops adaptieren. Das umfasst etwas mehr als man im ersten Moment denkt:

  • Startseite mit den wichtigsten (neuen) Produkten – komplett überarbeitet.
  • Diverse Seiten mit weiteren Produkten.
  • Landingpages für Produktkampagnen (12 frei kombinierbare Inhaltsgefässe).
  • Bestellprozess und Checkout sowie Cross-Selling Angebote.
  • Text- und Bildinhalte: FAQ, Kontaktformular.
  • Benutzerkonto: Verwaltung des Login und der Abonnemente.
  • Newsletter: Präsentation und Verwaltung von Newslettern.
  • Sehr sehr viele neue Icons.

Mischung aus „agil“ und „klassisch“

Im wesentlichen haben wir nur die Startseite, sowie teile der Landingpages von Grund auf „neugezeichnet“. Durch den Style-Guide sind viele Design-Entscheidungen sozusagen bereits getroffen. Daher haben wir parallel die neuen Screens ausgearbeitet, während wir auf dem Test-System ein neues Design gemäss dem Guide umgesetzt haben. So kriegten wir, der Grafiker, aber auch die Kundin sehr schnell ein Gefühl dafür wie das alles aussehen wird. So entsteht nach und nach in einem interativen Prozess das gesamte Design und wir konnten alle unsere Ressourcen effizient einsetzen – Bei einem engen Zeitplan (August – November) ist diese Ausgangslage Gold wert.

Durch die Tatsache, dass wir das bereits vorhandene Test-System quasi ab der ersten Minute einsetzen können, sparen wir viel Zeit. Der Auftrag an den Frontend-Entwickler: Adaption des Style-Guide. Im gemeinsamen Prozess haben wir viele Elemente gar nicht erst in Photoshop oder Sketch gezeichnet, sondern haben direkt die bestehende Software visuell angepasst. Wir haben uns so einen kompletten Arbeitsschritt erspart und konnten viel schneller und effizienter mehrere Vorschläge veranschaulichen und abnehmen lassen. Ein grosser Vorteil, da wir den Grafiker in diesem Fall nicht In-House hatten.

Trennung von Logik und Design

Nun auf die technische Ebene. Möglich wird dieser Ansatz durch die strikte Trennung von Logik und Design. Der Abo-Shop hat sehr viele Funktionen und Abhängigkeiten. Die Middleware, die sich noch vor SAP befindet, abstrahiert zwar einen Teil der komplexen Logik innerhalb von SAP, doch am Frontend gilt es dennoch viele „Spezialfälle“ zu meistern. Und dieser Teil, die „Logik“ sollte gleich bleiben. Einfach gesagt, sollte der Abo-Shop „ein neues Kleid“ bekommen – Eine schöne Floskel. Je besser die Logik nun vom visuellen Teil getrennt ist, desto einfacher ist es, ein komplett neues Design auf eine bestehende Software anzuwenden.

Ich als Entwickler bin der Meinung, dass diese Trennung immer Sinn macht, damit eine Software oder, konkret eine Website, flexibel ist: Neue Anforderungen sollten immer einfach in eine bestehende Architektur einzubetten sein. Für den Anwendungsfall dieses Projekts trifft das ganz besonders zu. Müsste man für so ein Projekt die gesamte Lösung „neu bauen“, müssten Investitionen im sechsstelligen Bereich neu gebaut werden – Stattdessen ersetzen wir „nur“ einen Teil der Website: Das Design. Das CMS, die Logik und das was der Besucher auf der Website tun kann bleibt funktional nahezu gleich. Es sieht aber schöner und moderner aus und ist bestenfalls einfacher zu bedienen.

So sollte es immer sein.

Wir bauen jede Website nach diesem Prinzip der Trennung, egal ob gross oder klein. Uns ist es wichtig, dass jede Website die wir individuell entwickeln auch weiterentwickelt werden kann. Klar will man nicht bei jedem Redesign die gesamte Logik übernehmen. Es kann ich manchen Fällen, gerade bei komplexer Software, aber durchaus Sinn machen um die Investition zu wahren. Wir setzen auf nachhaltig aufgebaute Software um ihre Website auch nach der Aufschaltung weiterzuentwickeln und stetig zu optimieren.