Als Teil unseres größeren Rebranding-Projekts haben wir bei 99designs vor Kurzem eine komplette Überholung des Erscheinungsbildes unseres Blogs vorgenommen. Und da wir ein Designunternehmen sind, welches über designbezogene Themen schreibt, haben wir uns gedacht, wir sollten vermutlich ein bisschen darüber erzählen, warum (und wie) wir das getan haben, was wir getan haben.

Die 3 Gründe, weshalb wir unseren Blog umgestaltet haben

old blog design
Eine Artikelseite auf unserem alten Blog

 

1. Unser Blogdesign war optisch veraltet

Unser altes Blogdesign baute auf einem Zweispalten-Layout auf, wodurch es aussah wie ein Template. Der Inhalt war unaufgeräumt und erdrückend – es war nicht klar, wohin man schauen soll. Nichts davon flößt dem Leser unbedingt Vertrauen ein, wenn wir über Grafik- und Webdesign schreiben.

2. Das alte Design passte nicht zum Rest unseres Brandings

Um genau zu sein, war es nicht einmal klar, dass es sich um einen Firmenblog handelte. Als ich letzten Sommer auf einer Konferenz war, traf ich eine Frau, die mir sagte, dass sie jeden Tag unseren Blog liest – Spitze! – und dass sie keine Ahnung hatte, dass wir nichts anderes tun, als zu bloggen. Hmpf.

3. Die Funktionalität entsprach nicht unseren und den Bedürfnissen der Leser

Das Artikel-Template, das wir hatten, schränkte das, was wir unseren Lesern präsentieren konnten, ein. Die Bilder konnten maximal mickrige 624 Pixel breit sein und es gab keine Möglichkeiten zu variieren. Unsere Navigation war ebenfalls suboptimal und führte zu einer sehr hohen Absprungrate (selbst für einen Blog). Und schließlich betrieben wir zwei separate englischsprachige Blogs, ebenso wie einen deutschen und einen französischen Blog. Das war nicht nur für die Leser verwirrend, sondern aufgrund von vier verschiedenen WordPress-Back-Ends auch eine Mammutaufgabe.

Es war also an der Zeit für eine Veränderung.

Die 6 Ziele unseres Blog-Redesigns und wie wir sie implementiert haben

Basierend auf den oben genannten Kriterien hat sich das Content-Strategie-Team mit den Kollegen aus den Bereichen SEO, User Experience Design und Engineering zusammengesetzt und sich sechs Ziele für unser Blog-Redesign überlegt.

1. Lesbarkeit

Unsere Artikel sollten gut aussehen und einfach zu lesen sein. Wenn wir eine gute Leseerfahrung bieten, werden die Leute dableiben und mehr lesen.

Wie wir an die Sache herangegangen sind: Breite Bilder und schmaler Text

Das Ziel gliederte sich in ein paar Teile: Bilder sollten leicht und angenehm zu sehen und Text leicht zu lesen sein.

banana elvis
Bananen-Elvis reißt eine Menge Barrieren ein (wortwörtlich und bildlich). Wir nutzten auch das Rot von seinem flotten Umhang, um den Artikel zu strukturieren. Von Benjamin Armstrong.

 

Wenn du Bilder sehen willst, musst du sie groß machen. Und es sollte mehrere Wege geben, sie anzuzeigen, basierend auf dem Kontext. Also haben wir mehrere Bilder-Templates entwickelt: Volle Breite, ein flexibles Raster und fließende Hälften mit Textumflüssen.

Text auf der anderen Seite sollte in einer relativ schmalen Spalte sein, damit die Augen der Leser nicht permanent auf dem Bildschirm hin und her springen müssen (was den Lesefluss unterbricht).

Um den verschiedenen Anforderungen an Breite zwischen Text und Bildern gerecht zu werden, erlaubten wir es unseren Bildern, die Grenzen unserer zentralen Spalte zu übertreten. Dies hat den zusätzlichen Vorteil, es uns zu ermöglichen, einen visuellen Fluss entlang der Seite zu kreieren.

Da wir wollten, dass der Fokus jeder Seite auf dem Inhalt der Artikel liegt, haben wir uns schlussendlich gegen den Trend der groß angezeigten Bilder entschieden und stattdessen unserem Artikeltitel einen Spritzer Farbe verpasst. Diese Farbe ist einem Bild auf der Seite entnommen und wird in allen Überschriften und Links verwendet und erzeugt so ein einheitliches Gefühl durch den gesamten Artikel hindurch. Sie wird ebenfalls in dem einzigartigen kleinen Initial verwendet, mit dem jeder Artikel beginnt und welches ein dezentes optisches Leuchten bietet und ebenfalls dazu fungiert, das Auge des Lesers sofort auf den Text zu richten.

Und natürlich haben wir eine Version für Mobilgeräte und Tablets entworfen, um sicherzustellen, dass alles responsiv ist und zu den Geräten, die unsere Leser verwenden, passt.

2. Intuitive Navigation

Die Leser sollten in der Lage sein, unseren Blog leicht zu verstehen und gut durch ihn navigieren zu können, sowie Inhalt ihren Interessen entsprechend zu finden.

Wie wir an die Sache herangegangen sind: Denke wie ein Leser und erzeuge eine optische Hierarchie

Das erste Ziel, das dein Blog haben sollte, ist eine Person dazu zu bewegen, den Artikel zu lesen. Das zweite Ziel ist, ihn dazu zu bewegen, einen zweiten Artikel zu lesen. Um das hinzubekommen, müssen Leser die Möglichkeit haben, einfach einen weiteren attraktiven Artikel zum Lesen zu finden.

Wir sind das Problem angegangen, indem wir wie unsere Leser gedacht haben. Mehrere Monate vor dem Zusammenschluss und dem Redesign, haben wir die Kategorien auf unserer Seite komplett überarbeitet. Anstatt sie an unsere internen Produkte und Prozesse anzupassen, haben wir uns überlegt, nach welchem Inhalt ein Leser womöglich sucht und unsere Kategorien daran ausgerichtet. Wir haben uns auch mit unserem SEO-Team beraten, um sicherzustellen, dass sie Google-freundlich sind.

Nachdem wir das herausgefunden haben, konnten wir eine optische Hierarchie entwickeln, um unsere Leser weiter zu ermuntern, dazubleiben. Hier sind ein paar Sachen, auf die wir uns bei den Artikelseiten konzentriert haben:

  • Verwandte Artikel am Ende der Seite, sodass Leser, die einen Artikel zu Ende gelesen haben und ihn mochten, sofort ein paar andere Artikel angeboten bekommen, die sie möglicherweise interessieren. Wir haben dafür einen Algorithmus, aber auch die Möglichkeit selbst Artikel, die wir bevorzugen, auszuwählen (um den Traffic dahin zu lenken, wo wir ihn am meisten haben wollen).
  • Schlagworte und Autoren-Seiten sind ebenfalls leicht vom Ende des Artikels aus zu erreichen, da dies möglicherweise ebenfalls Wege sind, auf denen Leser sich mit unserem Content auseinandersetzen.
related articles
Einige der handverlesenen verwandten Artikel für diesen Blog-Post. Willst du sie lesen? Scroll ans Ende der Seite!

Auf der Homepage wollten wir die Vielfältigkeit unseres Contents zeigen und außerdem die Aufmerksamkeit des Lesers wecken. Anstatt einer Chronologie der Posts haben wir ein Raster erstellt, damit man die Vielfalt an Texten sehen kann. Wir haben außerdem drei größere Posts ganz oben auf der Homepage kreiert, um bestimmte Inhalte hervorzuheben.

blog featured articles layout
Verschieden große Bilder auf der Homepage lenken die Aufmerksamkeit auf Artikel, die wir hervorheben wollen.

3. Den SEO-Wert maximieren

Wir wollen, dass Leser unseren Content finden, was bedeutet, dass wir unser Suchpotenzial ausschöpfen müssen.

Wie wir an die Sache herangegangen sind: Kategoriebasierte Slugs und die richtigen Plugins

70% des Traffics zu unserem Blog kommt von organischer Suche. Wenn wir die Gesamtzahl der Views und Leserschaft erhöhen wollen, müssen wir sicherstellen, dass wir gut mit den Suchalgorithmen zusammenspielen.

Das Erste, was wir entschieden haben zu tun, war unsere Slugs zu ändern. Wie ich oben bereits erwähnte, haben wir zwei englischsprachige Blogs zusammengeführt. Jeder Blog hatte (natürlich) eine unterschiedliche URL-Struktur. Wir mussten sie also zusammenlegen. Wir entschieden uns dafür, das Kategorie-Name/Artikel-Titel-Format zu verwenden. Indem wir den Kategorienamen hinzufügen, haben wir eine weitere Möglichkeit, ein Schlüsselwort in der URL unterzubringen.

Als zweites haben wir darauf geachtet, dass wir die richtigen Plugins installiert haben. Wir haben Yoast für das SEO-Management benutzt und Disqus für die Kommentare.

Abschließend haben wir unsere Redirects doppelt und dreifach gecheckt, um sicherzustellen, dass wir nicht den Wert unserer alten Seiten verlieren.

4. Verbindung zur Hauptseite von 99designs

Es muss klar ein, dass der Blog mit 99designs.de (bzw. 99designs.com) verbunden ist.

Wie wir an die Sache herangegangen sind: Designelemente und Produktintegration

Wir wollten, dass unser Blog wie der Rest unserer Website aussieht, aber auch als Blog funktioniert. Um das zu erreichen, haben wir ein paar zentrale optische Elemente in unseren Brand-Guidelines definiert und sie in das Design integriert:

Flying elephant
Wir zeigen die Arbeit unserer Designer überall auf unserer Website (und auf dem Blog). Von pmo for Davidjpeterson.
  • Verwendung des Designs von unserer Plattform integriert in unsere Seite (wie der schwebende Elefant, welcher hier und neben dem Kästchen zum Abonnieren des Newsletters erscheint)
  • Eine dynamische Farbpalette basierend auf den Bildern der Seite
  • Den Farbton und die Bilder hell und authentisch halten

Für eine ganze Weile haben wir unsere Navigation erörtert – Wollen wir die Navigation der Hauptseite integrieren? Wäre das verwirrend, da es auch eine Blognavigation bräuchte? Letztendlich haben wir uns darauf geeinigt, nicht die Navigation unserer Hauptseite zu nehmen, sondern unser Logo zurück auf unsere Homepage zu verlinken (und „Blog Home” in unsere Blognavigation einzubauen).

Schlussendlich haben wir eine Art Link zu unserem Produkt geschaffen, indem wir einen Bereich hinzugefügt haben, der unsere aktuellen Design-Wettbewerbe mit zwei Auswahlmöglichkeiten hervorhebt: Für potenzielle Kunden, ihren eigenen Wettbewerb zu starten oder für potenzielle Designer, sich anzumelden. Wir haben außerdem einen anpassbaren Promo-Balken (auf jeder Seite) und Kästchen (auf der Homepage), die es uns ermöglichen, auf besondere Angebote aufmerksam zu machen.

5. Bindung

Leser sollten leicht in der Lage sein, unsere Artikel in sozialen Netzwerken zu teilen, sich für unseren E-Mail-Newsletter anzumelden und unsere Artikel zu kommentieren.

Wie wir an die Sache herangegangen sind: Logos der sozialen Netzwerke, die dir folgen und ein E-Mail-Feld auf jeder Seite

Hier sind wir ziemlich direkt: Um Leute dazu zu bewegen, sich zu beteiligen, mussten wir es ihnen leicht machen. Das bedeutete, wir brauchten Links zu sozialen Netzwerken und die Möglichkeit, sich für den Newsletter anzumelden.

Um sicherzustellen, dass die sozialen Netzwerke so leicht wie möglich zugänglich sind, haben wir ihre Symbole haftend gemacht, damit sie einem folgen, wenn man die Seite herunterscrollt (aber auch dezent gestaltet, damit sich die Leseerfahrung nicht stören). Für die Anmeldung zum Newsletter haben wir entschieden –vorerst– nicht dem Trend von Pop-ups und Lightboxen zu folgen, sondern bieten stattdessen am Ende der Seite die Möglichkeit, sich für unseren Newsletter anzumelden. Vielleicht kommen wir in Zukunft darauf zurück.

6. Leichteres Blog-Management

Das Back-End des Blogs sollte die Arbeit der Autoren, Redakteure, Administratoren und Entwickler leichter machen. Und es sollte so gebaut sein, dass es Skalierung zulässt.

Wie wir an die Sache herangegangen sind: Ein Back-End und ein mehrsprachiges Plugin

Es ist leicht (zumindest verhältnismäßig), eine schnelle optische Überholung des Blogdesigns durchzuführen. Aber das löst oftmals nicht die Management-Probleme. Wir sind gewachsen und wir expandieren immer noch und unser aktuelles System reichte nicht mehr aus.

Es hat eine Menge Nachforschung gekostet, und ein bisschen herumprobieren, aber letztendlich haben wir uns dafür entschieden, dass die beste Lösung für uns darin besteht, unsere mehrsprachigen Blogs auf einem Back-End aufzusetzen und das WordPress Multilingual (WPML) Plugin zu benutzen. Es war wesentlich mehr Aufwand, das zu implementieren – Wir mussten alle unsere Kategorien, Schlagwörter und bereits übersetzten Posts per Hand mit ihren Gegenstücken in anderen Sprachen verbinden – aber letztendlich macht es unsere Arbeit leichter. Es gibt ein Design und ein Stylesheet für alle Blogs. Wenn es einen technischen Fehler gibt, können die Entwickler den Fehler für alle Blogs gleichzeitig beheben. Und wenn wir Inhalte übersetzen wollen, können wir einfach den Post herüberziehen und die Bilder und das Format erhalten. (Oder sie austauschen, wenn das mehr Sinn ergibt).

Es hat uns zu der Zeit sicher Kopfschmerzen bereitet, aber in unsere Infrastruktur zu investieren, stellt uns für unseren zukünftigen Weg wesentlich besser auf. (Und es wurde auch höchste Zeit, da unser Japan-Team sich entschied, einen japanischen Blog aufzubauen, gerade als wir mit dem Projekt fertig wurden!)

Also, hat es funktioniert?

Es ist noch sehr früh – den neuen Blog gibt es gerade mal etwa einen Monat – also sind die Ergebnisse noch nicht eindeutig. Aus der Managementperspektive ist es definitiv einfacher geworden. Und wir lieben den neuen Look! Aber wir müssen den Zahlen ein bisschen Zeit geben. Doch keine Sorge, wir werden in 3 bis 4 Monaten auf das Thema zurückkommen und euch wissen lassen, ob wir erfolgreich waren (oder nicht) und auf das Ergebnis dieses Posts verlinken.

Du spielst mit dem Gedanken deines eigenen Blog-Redesigns? Einige Tipps, die du beachten solltest:

  1. Mache eine Liste mit Dingen, die funktionieren und nicht funktionieren
  2. Erstelle eine Liste mit Prioritäten (und finde einen Weg, ihren Erfolg zu messsen)
  3. Denk daran, dass das Schaffen guter Inhalte das Beste ist, was du für deinen Blog tun kannst
  4. Aber du solltest auch über SEO und  Nutzererfahrung nachdenken

Dieser Artikel wurde in Zusammenarbeit mit Tristan Le Breton geschrieben, dem herausragenden User Interface Designer, der diese Seite so wunderschön hat aussehen lassen, wie sie heute aussieht.