Case Study: produktbezogen Blog-Relaunch

Seit Anfang an ist uns bei produktbezogen wichtig, dass wir nicht Wasser predigen und Wein trinken. Dass wir die Vorgehensweisen und Prinzipien, über die wir bloggen, auch auf uns selbst anwenden. Und dass wir unsere Erfahrungen damit transparent machen. Wie auch beim letzten Relaunch im Jahr 2015, wollen wir darum unseren jüngst erfolgten Relaunch mit einer Case Study begleiten.

Nachfolgend erfahrt ihr, welche Beweggründe unseren Relaunch geleitet haben und mit welchen Mitteln und Vorgehensweisen wir diesen dann umgesetzt haben. Dazu sind wir naturgemäß an Nutzer-Feedback interessiert und möchten euch darum einladen, eure Meinung, Verbesserungsvorschläge und Bugs in den Kommentaren zu posten.

Vision und Strategie

Unsere Poduktvision mit produktbezogen, die Rainer in Produktvision oder die Sehnsucht nach dem weiten, endlosen Meer formuliert hat, hat nicht nur unseren Relaunch vor drei Jahren geleitet, sondern ist auch heute noch so gültig. Mit zwei kleineren Präzisierungen lautet sie:

Mit produktbezogen wollen wir die deutschsprachige Plattform für alle Produktmanager, Product Owner, User Experience Designer und Researcher bieten, die allen Interessierten die Möglichkeit gibt, sich über die Entwicklung digitaler Produkte und die hierfür relevanten Themen zu informieren und auszutauschen.

Die Strategie, mit der wir diese Vision verwirklichen wollen ist, eine Plattform mit hervorragenden Inhalten für Einsteiger und Professionals in den genannten Bereichen zu schaffen und damit eine möglichst große Reichweite zu erlangen.

Die drei Komponenten, um die wir uns aktiv kümmern müssen sind also:

  1. Inhalte: Verfassen und Kuratieren von relevanten und hilfreichen deutschsprachigen Inhalten zu den Themen Produktmanagement, digitale Produktentwicklung, User Experience, Interaktionsdesign, Innovation, Unternehmenskultur und Karriere.
  2. Plattform: Schaffen eines Blogs als Träger unserer Inhalte und zugehöriger Diskussionen und damit eines regelmäßigen Anlaufpunkts für unsere Leser.
  3. Reichweite: Erreichen möglichst vieler Leser über persönliche Kontakte, Social Media, Suchmaschinen, Abonnements etc., Sicherstellen einer hohen Wiederkehrrate.

Als vierten Punkt ließe sich hier noch Monetarisierung nennen. Allerdings ist es nicht so, dass wir mit produktbezogen reich werden wollen. Unsere Antriebsfeder bleibt unser Idealismus. Muss es auch. Denn wenn man mal unsere Einnahmen mit unserem Zeiteinsatz verrechnen würde, kämen wir sicher kaum auf einen Stundensatz im Cent-Bereich. Nichtsdestotrotz sind uns unsere Einnahmen nicht egal. Sie ermöglichen uns den Betrieb des Blogs, die Investition in Inhalte, Möglichkeiten und Reichweite, aber auch Zeit für diese Tätigkeit zu finden. Unsere Intention ist es daher, behutsam Erlösströme (aktuell besser: Erlösflüsschen) zu erschließen oder zu stärken, ohne unseren inhaltlichen Kern zu gefährden. Um das nochmal zu betonen: Wir werden niemals Artikel oder Podcasts gegen Bezahlung veröffentlichen.

Ausgangssituation und Ziele

Das alte Layout war zwar immer noch gefällig, aber wirkte langsam immer beengter und altbackener. Dazu waren Struktur und Template „historisch gewachsen“, also über die letzten Jahre durch immer neue Anbauten unstrukturierter geworden.

Der nahende 5. Geburtstag unseres Blogs war darum ein guter Motivationsschub, endlich mal wieder „feucht durchzuwischen“ und mit ganzheitlichem Blick ein neues Template zu bauen. Für den Relaunch haben wir uns darum die folgenden Ziele gesetzt:

1. Verbesserung des Lese-Erlebnisses

Der Kern von produktbezogen sind unsere Fachartikel. Wir wollen nicht nur hilfreiche Inhalte bieten – das Lesen derselben soll so angenehm wie möglich sein. Das neue produktbezogen soll durch viel Weißraum und (wenn möglich) Einspaltigkeit eine bessere Fokussierung auf den Inhalt ermöglich. Größere Schriften und Zeilenabstände sollen die Lesbarkeit verbessern.

2. Modernere Optik

Eine modernere Optik mit großen Key Visuals soll die Qualität unserer Inhalte auch visuell unterstreichen. Jedem Autor soll es möglich sein, attraktive Inhalte mit vertretbaren Aufwänden und ohne Spezialkenntnisse zu erstellen.

3. Verbesserung der Conversion

Wir wollen unser Wissen und das Wissen unsere Autoren nicht einfach nur in die Leere des Äthers Internets herausrufen, sondern dass es sich verfängt und multipliziert. Um vor allem unsere inhaltliche Reichweite zu stärken, müssen wir neben der Stärkung unseres Angebots auch unsere Leser aktivieren – also konvertieren.

Nun sind wir kein e-Commerce-Unternehmen, also was verstehen wir alles unter Conversion?

  • Das Kommentieren des Artikels
  • Das Teilen des Artikels über soziale Medien
  • Das Folgen in den Sozialen Medien
  • Das Lesen eines weiteren Artikels bzw. anderer Inhalte
  • Das Einreichen eines Gastartikels
  • Das Buchen einer Job-Anzeige

Bisher haben wir diese Punkte nicht oder wenig strukturiert adressiert. Das neue produktbezogen soll aber hier stärker optimiert werden.

Weitere Ziele

  • Erweiterbarkeit für neue Themen, die wir angehen wollen. Einige davon haben wir in unserem Artikel zum fünfjährigen Geburtstag schon präsentiert oder angeteasert.
  • Abwärtskompatibilität, weil niemand alle 242 Artikel überarbeiten möchte.
  • Aufräumen der historisch gewachsenen Struktur.

Nachdem wir die Ziele definiert hatten, habe ich – als Head of produktbezogen-Template 😉 – Sketch angeworfen und den Code-Editor entstaubt. Als braver UX-Designer habe ich aber nicht sofort losgelegt, sondern bin zuvor in Google Analytics abgetaucht, um nach Erkenntnissen zu fischen. Eines dieser Erkenntnisse führte dann zu dem folgenden Paradigma…

Paradigma: Desktop Big Screen first

Jetzt werden einige von euch sicher fragen: Was? Wolf, du als alter Mobile-First-Advokat, wie kannst du denn jetzt auf einmal wieder beim Desktop anfangen? Wir haben doch 2018…

Ja das stimmt, eigentlich bin ich voll und ganz Verfechter von Mobile First. Bei meinem Arbeitgeber OTTO ist das auch angebracht, denn die Zugriffe auf den Shop kommen mittlerweile zu 60% von Smartphones. Bei produktbezogen ist das aber tatsächlich anders gelagert. Wir sind offenbar ein Medium, was hauptsächlich am Arbeitsplatz gelesen wird. Und das schlägt sich nicht nur darin nieder, dass wir jeden Werktag einen Einbruch der Zugriffszahlen zur Mittagspausenzeit von 12-13 Uhr sehen. Sondern auch unsere Bildschirmgrößen-Verteilung zeigt eine deutliche Neigung zu sehr großen Bildschirmen: Knapp 70% unserer Nutzer haben eine Bildschirmbreite von 1280px oder mehr. 34% haben sogar 1920px oder mehr.

Benchmarks & Inspiration

Als nächstes habe ich mit Hilfe meiner Blog-Kollegen in Sketch einen Überblick erstellt, wie andere Blogs aber auch News-Medien und Content-Plattformen heutzutage ihre Seiten aufbauen und gestalten.

Ausschnitt aus unserer Inspirations-Datei

Besonderem Augenmerk galt dabei – analog zu unseren Zielen – Themen wie Lese-Erlebnis, Startseiten-Gestaltung, Umgang mit Bildern und Conversion (dazu unten mehr).

Inside-out-Design: Von Content zum Layout

Wie auch 2015 habe ich die Seite von innen nach außen gestaltet. Bei dieser Vorgehensweise fokussiert man sich auf den Kern seines Angebots (in unserem Fall der Artikel-Content) und arbeitet sich schrittweise nach außen, zum gesamten Produkt vor. In unserem Fall also:

  1. Schritt: Gestaltung des Artikel-Inhalts (Typographie, vertikaler Rhythmus, Inhaltselemente und Key-Visual)
  2. Schritt: Gestaltung der Artikel-begleitenden Elemente (Autoren-Info, Kommentare, Empfehlungen zum Weiterlesen,…)
  3. Schritt: Gestaltung der gesamten Seite (Header, Navigation, Footer)
  4. Schritt: Gestaltung der restlichen Seitentypen (statischer Content, Startseite, Artikelliste, Job-Anzeige, usw.)

Die Gestaltung habe ich dabei in Sketch begonnen. Hier konnte ich schnelle Experimente mit Looks und Anordnungen vornehmen, bis ich die grundlegende Richtung des Artikel-Inhalts festgezurrt hatte.

Exploration in Sketch

Ich bin dann aber relativ schnell von Sketch zu Code-Editor und Browser gewechselt. Das Arbeiten im Code hat mir ermöglicht, Design und Typographie präzise mit den „echten“ Parametern zu optimieren. Darüber hinaus konnte ich so mit unseren echten Inhalten arbeiten.

Als Startpunkt habe ich mir einen umfangreichen Artikel mit möglichst vielfältigen Inhaltstypen gewählt (den ersten Teil unserer Design-Systems-Serie). Dessen Inhalt habe ich samt Tags in eine statische HTML-Datei kopiert und begonnen, per CSS den neuen Stil herzustellen und zu optimieren. Für ein besseres Leseerlebnis habe ich die Standard-Schriftgröße um 2pt auf 18pt angehoben und mit einem Grundlinienraster von 30pt für einen harmonischen vertikalen Rhythmus gesorgt.

30pt Grundlinienraster

Nachdem ich mit dem Content zufrieden war und auch eine gute Größe für das Key Visual gefunden hatte, habe ich die weiteren Komponenten des Artikels und der Seite hinzugefügt. Viele Elemente habe ich dabei vorerst rudimentär behandelt, teils sogar nur als farbige Rechtecke eingefügt. Da ich bei einer statischen HTML-Seite zwar schon den echten Look hatte aber noch nicht das echte Seitenverhalten hatte, wollte ich mich nicht zu lange damit aufhalten, sondern in einem realen WordPress weiter arbeiten.

Vom statischen HTML zur Entwicklungs-Instanz

Dank der von uns eingesetzten Lösung für automatisierte Backups, lassen sich mit relativ geringem Aufwand Klone unseres Blogs erstellen. Ich habe also auf einer Subdomain ein zweites WordPress aufgesetzt und dort einen Klon unseres Livesystems aufbauen lassen. So konnte ich nach Herzenslust mit dem neuen Template und – ganz wichtig – den echten Daten experimentieren, ohne den Live-Betrieb zu stören.

Zwar hatte ich schon beim 2015er-Relaunch mit einer lokalen WordPress-Installation auf meinem Rechner gearbeitet, dank dieser neuen Entwicklungs-Instanz im Web hatte ich aber drei Vorteile:

  1. Ich hatte eine wirkliche Kopie von produktbezogen mit allen Drum und Dran (Inhalte, Nutzer, Plugins,…). Eine lokale Instanz so präzise nachzubauen wäre zu aufwändig gewesen.
  2. Ich konnte von überall an der Seite arbeiten.
  3. Ich konnte meine Blog-Kollegen und später auch Beta-Tester auf die Seite loslassen und so frühzeitig Feedback bekommen.

Nach Aufsetzen des Klon-Blogs begann der haarigste und anstrengendste Teil der Arbeiten: Das Verheiraten der neuen Seitenstruktur und CSS-Styles mit den Template-Dateien. Ich hatte zuerst überlegt, dafür ein blankes WordPress-Theme zu nehmen. Da diese Themes aber dennoch einigen, für meine Zwecke unnötigen, Ballast mitführen und ich nicht wieder ganz bei Null anfangen wollte, habe ich nach einigen Tests entschlossen, lieber unser bestehendes Template als Grundlage zu nehmen.

Conversion-Optimierung

Im Anschluss an den Artikelinhalt habe ich die den Artikel begleitenden Elemente, wie Empfehlungen und Kommentare, konzipiert und gestaltet. Wie bereits erwähnt, war eines unserer Ziele, den Leser besser zu „konvertieren“. Ihn also zu einer weiteren Aktion zu bewegen, wie dem Teilen des Artikels oder dem Lesen eines weiteren Artikels.

Ich habe dazu bei ausgesuchten Medien die Bereiche unterhalb der Artikel analysiert, welche Patterns welche Conversion-Arten bedienen:

Konversionsbereich unterhalb des Artikels bei medium.com

Bei der Adaption für produktbezogen haben die Empfehlungen zum Weiterlesen besondere Aufmerksamkeit bekommen. Bisher hatten wir an dieser Stelle einfach eine Funktion des Jetpack-Plugins integriert, die drei „ähnliche“ Artikel automatisch listet. Allerdings war ich mit den Vorschlägen des Plugins selten zufrieden. Eine Recherche nach vergleichbaren Plugins brachte eigentlich nur zwei Arten zutage: Plugins, die ähnlich schlechte Ergebnisse liefern und Plugins, die auf Kosten einer enormen Serverlast mittelmäßige Ergebnisse liefern.

Unzufrieden mit dem Angebot habe ich mich von der automatischen Lösung abgewendet. Wenig überraschend wissen wir als Blog-Team sicher am besten, welche Artikel zu welchen passen. Ich habe darum über das Plugin Advanced Custom Fields zu jedem Artikel die Möglichkeit hinzugefügt, drei Artikel-Empfehlungen manuell auszuwählen.

Insgesamt habe ich unter jedem Artikel sechs Positionen für Empfehlungen vorgesehen. Diese setzen sich zusammen aus:

  1. Den drei manuellen Empfehlungen
  2. Den letzten drei Artikeln aus derselben Kategorie
  3. Falls keine manuellen Empfehlungen gepflegt sind, den drei aktuell beliebtesten Artikeln auf Produktbezogen.

Um diese Empfehlungen herum habe ich dann die anderen Elemente zum Folgen oder Teilen des Artikels und zum Abgeben von Kommentaren angeordnet:

Conversion-Bereich unterhalb der Artikel

Von Zwei- zu Einspaltigkeit & Responsive Design

Durch die Verlagerung der Conversion-Elemente in den entsprechenden Kontext und damit in den Flow der Seite, bestand für unsere bisherige Sidebar eigentlich keine Notwendigkeit mehr. Darüber hinaus war die Sidebar, wenn der Leser am Ende des Artikels angekommen ist, meist schon sehr weit weggescrollt und damit keine große Hilfe mehr. Da ich zur Verbesserung der Fokussierung sowieso eine Einspaltigkeit angepeilt hatte, musste ich nur noch die verbliebenen Elemente aus der Sidebar im Header und/oder Footer unterbringen.

Dank der Entscheidung für Einspaltigkeit war die anstehende Umsetzung des Responsive Designs deutlich einfacher. Bis auf einige spezielle Komponenten gibt es nur noch einen Breakpoint bei 768px der die Tablet- und Desktop-Welt von der Smartphone-Welt trennt.

Um dennoch genau entscheiden zu können, wo ich meine Energie hineinstecke und wo nicht, habe ich anhand der Verteilung unserer Bildschirmgrößen verschiedene Qualitäts-Stufen (Grades) festgesetzt:

Auflösung Anteil Optimierung
< 320px
0,01%
Grade 0: Wird nicht bedient
320-359px
2,89%
Grade C: Sollte irgendwie funktionieren, keine Optimierung
360-411px
17,25%
Grade A: Optimal
412-767px
2,47%
Grade B: Mobile hochgestreckt, soll OK aussehen, keine zusätzliche Optimierung
768-1279px
8,60%
Grade A: Inhalt Optimal, Teaser verkleinert
1279-1919px
34,81%
Grade A: Seite Optimal
≥ 1920px
33,96%
Grade A: Seite Optimal, Teaser groß

Die Anteile entsprechen unseren Nutzungsdaten in den 6 Monaten vor dem Relaunch.

Magazin-Startseite

Die letzten fünf Jahre war die produktbezogen-Startseite eine ganz typische Blog-Startseite. Die letzten sieben Artikel wurden in chronologisch umgekehrter Reihenfolge übereinander angezeigt. Diese Liste war aber viel zu oft nicht wirklich repräsentativ für unser inhaltliches Spektrum. So standen machmal nur UX-Themen auf der Startseite oder – vor allem im Sommerloch – eine wenig attraktive Mischung aus Event-Rückblicken und Lesenswert-Artikeln. Um Neueinsteigern einen besseren Überblick zu unseren Themen zu geben, habe ich darum eine Magazin-artige Darstellung gewählt, die jeweils die vier neuesten Artikel zu unseren sieben Hauptkategorien (Produktmanagement, UX, Innovation, Unternehmenskultur, Karriere, Events und Lesenswert) zeigt.

Ausschnitt aus dem Wireframe der Startseiten-Struktur

Nach der groben Konzeption der Startseite, habe ich die einzelnen Blöcke weiter als Wireframes verfeinert. Für diese Tätigkeiten bin ich wieder zurück zu Sketch gewechselt. Dort lassen sich solche explorativen Tätigkeiten deutlich schneller durchführen.

Wireframe Themen-Block

Damit der Leser einen noch besseren Überblick über unsere Themen bekommt und somit schneller für ihn interessante Artikel finden kann, habe ich für unsere Hauptkategorien noch Unterkategorien eingeführt. Diese sollen den Einstieg in spezielle Themencluster wie Pattern Libraries oder Product Discovery erleichtern:

 

Schritt für Schritt zum fertigen Blog

Nach Artikelansicht und Startseite standen die restlichen Seitentypen auf dem Plan: Seiten für statische Inhalte, Job-Anzeigen und die Artikel-Listen für Kategorien und Suchergebnisse. Da statische Inhalte und Jobs nur reduzierte Varianten der Artikelansicht waren und für die Artikellisten keine grundlegende Änderung zum Status Quo nötig war, ging dies relativ schnell von der Hand.

Aufwändiger war dann die Arbeit an den vielen Details, nicht nur am Frontend sondern auch auf technischer Ebene. Denn dieses Mal bin ich deutlich tiefer in die Technik und damit die Möglichkeiten vom WordPress eingetaucht als 2015. Die Mächtigkeit der WordPress-Template-Engine, insbesondere im Umgang mit Daten und Inhalten, hat mich dabei schwer beeindruckt. Und viele Dinge, die WordPress nicht selbst anbietet, lassen sich entweder mit Plugins nachrüsten oder mit etwas PHP-Wissen selber entwickeln.

So wollte ich gern eine Funktion integrieren, die sich immer größerer Beliebtheit in Blogs erfreut: Zitate mit Twitterfunktion. Diese senken die Hürde zum Teilen eines Beitrags per Twitter auf ein Minimum herab, würden also auf die Konversionsrate unserer Leser einzahlen.

Es gibt zahlreiche Plugins, die WordPress um eine solche Funktion erweitern. Leider sind die meisten davon schon Opfer von Feature-Creep geworden und bringen für meinen Geschmack viel zu viel Ballast mit. Darüber hinaus wollte ich auch innerhalb meiner Artikel möglichst sauberes und minimalistisches Markup haben. Da ich nun einigermaßen wieder mit PHP angefreundet war, und schon ein anderes Content-Element geschrieben hatte, hab ich mich einfach hingesetzt und Twitter-Zitate direkt als Funktion unseres Templates implementiert – schlank und mit semantisch korrektem Markup:

Von Inside-Out-Design bis Big-Screen-First – Ausführliche Case Study zum Blog-Relaunch von produktbezogen.

Auf Twitter teilen →

Eine deutlich härtere Nuss war das Erstellen von Konfigurationsseiten. Um nicht ständig im Code herumwühlen zu müssen, wollte ich möglichst viele Texte und Einstellungen über das WordPress-Backend editierbar machen. Leider ist das Erstellen solcher Seiten in WordPress deutlich komplexer als das Erstellen der Templates. Oder ich hab es einfach nicht verstanden. 🤓

So habe ich mich dann Element für Element bis zur Fertigstellung des Templates weitergehangelt. Da ich so mit ganzheitlichem Blick den ganzen Blog überarbeitet habe, konnte ich auch noch ganz triviale Fehler entdecken: Auf der Ansicht einzelner Job-Anzeigen, gab es zum Beispiel gar keinen Link auf die Job-Übersicht 🙈

Das Arbeiten im Code und mit echten Daten hat sich als sehr effektiv und praktisch herausgestellt. Der Overhead durch die Erstellung von Entwürfen in Design-Programmen war minimal. Dafür gab es aber neuen Overhead an anderer Stelle: Durch das iterative Erstellen des Templates ist immer wieder Code unnötig geworden oder sind Styles mehrfach deklariert worden. Um auch später den Überblick nicht zu verlieren, musste ich immer mal wieder ein Refactoring einlegen – also nochmal aufräumen. Bei 2.250 Zeilen CSS-Code macht man das auch mal nicht eben so nebenbei. In Summe war es trotzdem deutlich effizienter als die komplette Seite vorher in Sketch zu bauen und dann in den Code zu übertragen.

Als letzter Schritt stand die Performance im Fokus. Unser Blog war auch vorher schon kein strahlendes Beispiel für schnelle Ladezeiten und durch immer mehr Plugins und mein deutlich komplexeres Template begann es merkbar zu knirschen. Zum Glück schuldete mir ein Frontend-Performance-Experte noch einen Gefallen. Dank der Hilfe meines Kollegen Tom konnte ich vor allem durch das Aufsetzen einer Caching-Lösung sowie durch diverse weitere Optimierungen unsere Ladezeiten massiv verbessern (siehe unten).

Betatest

Mein Plan war es, den Relaunch Ende September oder Anfang Oktober zum fünften Geburtstag unseres Blogs durchzuführen. Etwa einen Monat vorher war das Template im Großen und Ganzen nutzbar. Zwar standen noch unzählige Detailarbeiten an, aber die Gelegenheit war günstig, endlich Testnutzer auf die Seite loszulassen.

Wir haben darum einige treue Leser und weitere Experten aus unserem Netzwerk eingeladen, den zukünftigen produktbezogen-Blog auf der Entwicklungs-Instanz zu begutachten. Ein großer Dank geht darum an alle, die uns mit wertvollem Feedback und Hilfen unterstützt haben: Matthias Müller-ProveGerhard Kühne und Stefan Freimark für das konstruktive Feedback. Tom Piribauer von Intuio sowie Stefanie Hädicke, Sina Steep und Thorsten Wilhelm von eresult, die sogar richtige Experten-Reviews verfasst haben.

Wenig überraschend, war das Feedback sehr hilfreich. Plakativstes Beispiel war die Box mit den beliebtesten Artikeln, aktuellen Kommentaren und Jobs, die sich auf der Startseite unterhalb der ersten Artikelvorschau befindet. Diese hatte ich zuerst grau hinterlegt. Als unsere ersten beiden Tester diesen Bereich unabhängig voneinander als Footer bezeichnet haben, war ich schon leicht schockiert. Schließlich kommt 90% des Startseiten-Contents doch erst nach dieser Box. Als Konsequenz habe ich die Box nicht mehr grau hinterlegt, sondern nur mit einem dünnen grauen Rand abgegrenzt und damit die Chance minimiert, dass dieser Bereich als Footer wahrgenommen wird:

Auf viele weitere Feedbacks bin ich dann entweder kurzfristig eingegangen oder habe Themen und Ideen, die nicht Launch-kritisch waren, in unser Backlog geschrieben. Die ein oder andere Sache habe ich auch einfach ignoriert. 😇

Livegang

Um möglichst nicht zu vielen Lesern im Weg zu stehen, haben wir unsere Artikelplanung am Livegang orientiert: In der Woche vor dem Livegang haben wir einen Artikel platziert, von dem wir keine sehr hohe Resonanz erwartet haben. In der Woche des Livegangs haben wir dann gar keinen Artikel platziert. So konnten wir die Wahrscheinlichkeit minimieren, dass genau zum Zeitpunkt der Umstellung auf einmal ganz viele Leser auf unsern Blog wollen.

Da durch die vielen Änderungen an Funktionalität, Daten und Content der Livegang kein reiner Template-Tausch war, habe ich diesen in einem Drehbuch mit 72 Einzel-Schritten geplant:

Ausschnitt aus dem Launch-Drehbuch

Das Drehbuch bereits während des Werdegangs des neuen Templates auf der Entwicklungs-Instanz (grob) zu verfassen, war Gold wert. Viele Anpassungen, Schritte und Parameter hätte ich über die knapp drei Entwicklungsmonate sicher wieder vergessen.

Dank des Drehbuchs und ausgiebiger Vorbereitung waren wir dann am 27. September nach weniger als 2 Stunden Offline-Zeit wieder live.

Mit dem Launch brach zuerst unsere Silent-Launch-Phase an. Ziel war es nun, ohne groß Aufmerksamkeit auf den Blog zu lenken, die nötigen Nacharbeiten durchzuführen: den Live-Content soweit nötig anzupassen, zusätzliche Inhalte anzulegen, die neuen Unterkategorien zu erstellen und zuzuweisen und die neuen, großen Key Visuals einzubauen.

Da alte Artikel durch die Abwärtskompatibilität des Templates generell brauchbar blieben, haben wir uns dabei auf unsere sichtbarsten Artikel konzentriert. Dies waren:

  • Die meistgelesenen Artikel der letzten 12 Monate
  • Die jüngsten Artikel aus jeder Top-Kategorie
  • Alle Teile von Artikel-Serien
  • Sowie der ein oder andere Artikel, der uns persönlich wichtig war.

Insgesamt haben wir so über ein Drittel unserer 242 Artikel modernisiert. Nachdem in den Tagen nach dem Launch auch keine Katastrophen eingetreten oder signifikante Bugs aufgetreten sind, haben wir dann am 4. Oktober mit unserem Artikel zum 5. Blog-Geburtstag den Relaunch publik gemacht.

Feedback und Analyse

Vier Wochen nach dem Relaunch ist es noch zu früh, wirklich signifikante Änderungen in unseren Zugriffszahlen zu sehen. Allerdings stimmen uns Daten wie die Verweildauer, die Anzahl der Seitenaufrufe pro Besucher, die Treffer von Google und die Besucherzahlen bestimmter Bereiche schon sehr positiv.

Positiv ist ebenfalls das Feedback, was wir von unseren Lesern bekommen haben. Wenn sich auch nicht jeder sofort mit der cleanen Darstellung oder der Einspaltigkeit anfreunden wollte, haben wir doch viele Signale bekommen, dass wir auf dem richtige Weg sind.

Einen wirklich deutlichen Unterschied macht aber die Performance seit dem Relaunch, vor allem dank des Einsatzes von Caching. So schneidet die Artikelansicht von produktbezogen bei den Performance-Tests von Google (Pagespeed und Mobile Test) hervorragend ab:

Bei der Startseite sind wir noch nicht ganz so perfekt unterwegs, aber es gibt auch noch einen ganzen Stapel identifizierter Optimierungsansätze. Insbesondere das Caching ist ja eine Wissenschaft für sich (WP Total Cache schraubt mal eben 18 Seiten mit Optionen ins WordPress-Backend).

Pläne für die Zukunft

Natürlich wollen wir die nächsten Monate wieder nutzen, um viel zu lernen. Aber wir haben auch noch ein gut gefülltes Backlog mit kleineren und größeren Optimierungen und viele neue Ideen für die Zukunft unseres Blogs. Größere Punkte sind zum Beispiel:

  • Den Overhead für das Anlegen von weiteren Autoren zu minimieren.
  • Unsere neuen Podcasts noch besser in den Blog zu integrieren.
  • Den Blog mit einem Board für Trainings und Weiterbildungen zu erweitern.
  • Aber auch technisch-logische Optimierungen, wie zum Beispiel ein präziseres Handling der Unterkategorien in den Vorschauen auf der Startseite und unterhalb der Artikel.

Entwicklung von Produktbezogen

Für alle, die jetzt nochmal in Erinnerungen schwelgen wollen – oder die unsere Entwicklung nachvollziehen möchten – seht ihr hier die drei bisherigen Versionen unseres Blogs nebeneinander. Die Gedanken zur Entwicklung von der ersten zur zweiten Version könnt ihr in unserer Case Study von 2015 nachlesen. Besonders die Punkte bezüglich Typografie, Visual Design und Branding sind auch heute noch gültig.

Artikelansicht (zum Vergrößern anklicken).

Startseite (zum Vergrößern anklicken).

Feedback erwünscht

Wir freuen uns natürlich über weiteres, ehrliches Feedback zu unserem Relaunch aber auch zu unserer Vorgehensweise. Gern hören wir auch neue Ideen oder Bug-Reports von eurer Seite. Schreibt diese einfach unten in die Kommentare. (Gebt bei Bugs bitte euer Betriebssystem und Browser samt Versionen an.)

Über Wolf Brüning

Wolf arbeitet als Executive UX Designer in der Abteilung User Experience der OTTO GmbH & Co KG und kümmert sich hier mit seinen Kollegen um Konzeption und Interaktionsdesign der vollständig inhouse entwickelten eCommerce-Plattform des Konzerns. Vor seiner Hamburger Zeit hat Wolf in verschieden Web- und Usability-Agenturen gearbeitet und in Magdeburg Computervisualistik studiert. Wolf ist Mitgründer von produktbezogen.de und kümmert sich neben den Inhalten auch um Design und Technik des Blogs.

5 Kommentare


  1. Smail

    Die Artikelansicht ist sehr gelungen, durch die angepasste Schriftgröße, das Raster und den Weißraum ist es sehr angenehm die Artikel zu lesen, die einspaltige Darstellung der Artikel ist hervorragend. Erinnert mich stark an medium.com , was aber nicht schlimm ist.

    Auch die Strukturierung der Startseite muss ich loben. Themenbezogene Artikel können dadurch schneller erreicht werden.

    Allgemein ist produktbezogen Anlaufpunkt Nr. 1 wenn es um deutschsprachige Artikel geht, danke dafür!

    Zur Monetarisierung:
    Ein Spenden-Button könnte euch in der ein oder anderen Form helfen. Für den guten Content wären sicherlich einige bereit etwas zu spenden.


  2. Wolf Brüning Artikelautor

    Vielen Dank für euer Feedback! Ich freue mich sehr!

    @Smail: Du hast recht, ich habe mich stark von Medium inspirieren lassen. Meiner Meinung nach sind sie aber auch aktuell der Goldstandard, was das Leseerlebnis angeht. Die ein oder andere Sache hab ich zwar bewusst anders machen wollen, bin aber nach tieferem Verständnis oder diversen Optimierungsschritten dann doch genau bei der Lösung von Medium gelandet.

    Das mit dem Spendenbutton überlegen wir uns mal. Danke für den Tipp.



  3. Wolf Brüning Artikelautor

    Unser Gewinnspiel ist abgeschlossen. Das Buch „Product Leadership“ geht an Smail Smajkic und „Sprint“ an Matthias Müller-Prove. Herzlichen Glückwunsch an die Gewinner und vielen Dank an alle für die Teilnahme.

    Hier zum Zwecke der Transparenz das Verlosungsvideo:


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Mit Absenden des Kommentars stimmst Du der Speicherung deiner persönlichen Daten (Name, eMail-Adresse, Webseite und Nachricht) durch uns bis auf Widerruf zu. Zur Vermeidung von Spam und zur rechtlichen Absicherung wird deine IP für 2 Monate gespeichert. Ebenfalls zur Vermeidung von Spam werden diese Daten einmalig an Server der Firma Automattic inc. geschickt. Zur Darstellung eines Nutzerbildes wird die eMail-Adresse im pseudonymisierter Form an Automattic inc. übermittelt. Wenn du einen oder beide Haken für die eMail-Benachrichtigungen setzt, wird deine eMail-Adresse bei Automattic inc. gespeichert. (Datenschutzerklärung)

Du hast noch viel mehr zu erzählen?

Dann schreib doch einen eigenen Artikel auf produktbezogen.

Artikel vorschlagen →