Website Redesign – der vollständige Guide in 11 Schritten

Sobald man in der einen oder anderen Art für das Marketing oder die Online-Präsenz eines Unternehmens (mit-)verantwortlich ist, kommt zwangsläufig immer wieder das Thema Website Redesign auf. Vielleicht kommen nicht genügend Leads rein, vielleicht ist das Design veraltet und passt nicht mehr zum Branding, oder vielleicht generiert sie Leads, aber nicht die richtigen Leads und nicht schnell genug. Oft wächst die Seite über die Jahre und wird immer unübersichtlicher.

Ein Website-Redesign ist ein großes Projekt, egal wie groß das Unternehmen ist, ganz besonders dann, wenn man es richtig machen will. Einsparungen an dieser Stelle führen in der Regel zu einem schlechteren Endergebnis, das Marketing und Vertrieb mehr schadet als nutzt. Richtige Planung, Forschung und auch Voraussicht können helfen, das nächste Redesign zu einem echten Erfolg zu machen. Aus diesem Grund zeigen wir Ihnen hier anlässlich unseres eigenen Website Redesigns unsere Checkliste für das Neugestalten Ihrer Website.

 

Schritt 1: Audit der aktuellen Website

Im ersten Schritt unserer Checkliste für das Redesign einer Website geht es darum, zu überprüfen, wo Sie derzeit stehen. Wenn man sich die bestehenden Werbemittel ansieht, welche Seiten besucht werden und was möglicherweise fehlt, bekommt man einen Eindruck davon, was wiederverwendet und aktualisiert werden kann oder was von Grund auf neu erstellt werden muss.

Häufig ist man verwundert darüber, welche Seiten, die man eigentlich gar nicht für relevant hält, bei Google Analytics die höchsten Besucherzahlen haben. Der nächste Schritt muss also sein, diese Seiten zu notieren um später einige Benutzertests durchzuführen. Es ist wichtig genau herauszufinden, was gut funktioniert. Gibt es eine (Adwords?) Kampagne, die für Traffic sorgt, oder gehen Benutzer einfach der guten Inhalte wegen auf Ihre Website? Oder kommen sie und gehen gleich wieder, weil der Content nicht das ist, was sie erwartet haben?

Sobald man verstanden hat wo die Schwachstellen liegen, kann man feststellen, wo die wirklichen Anstrengungen unternommen werden müssen. Die Seiten, die stark sind, Traffic erzeugen und gute Conversions bringen, müssen aber natürlich intakt bleiben und nach Möglichkeit weiter optimiert werden. Notieren Sie sich also was gut funktioniert, und was schlecht funktioniert hat.

 

Schritt 2: Den Wettbewerb benchmarken

Stellen Sie sich vor was Sie letztendlich mit Ihrer neuen Website wollen. Dinge wie Branding kann man noch außen vor lassen. Sollte es einen Shop geben? Welche Bilder könnten bei Kunden funktionieren? Welche Layouts sind die besten für Ihre Branche? Das Sammeln von Ideen und die Analyse der Websites der Mitbewerber helfen dabei, einen Überblick über die besten Praktiken der Branche zu erhalten und herauszufinden, wo man etwas anders machen könnte.

Wir haben bei unseren Recherchen die besten Websites von drei unserer Konkurrenten mehrere Stunden lang genau betrachtet. Welche Gemeinsamkeiten gibt es? Veröffentlichen sie ihre Preise? Verwenden sie bestimmte Bilder oder Videos? Man sollte sich die Liste der Seiten anschauen, die man beim Audit erstellt hat. Gibt es Ähnlichkeiten auf den Seiten Ihrer Mitbewerber?

Wenn die Mitbewerber keine Preise anzeigen, ist das Ihre Chance, genau das trotzdem zu tun. Geld ist eines der 5 wichtigen Content-Themen für potenzielle Interessenten.

 

Beim Durchsehen sollte man unbedingt Lesezeichen bei den Websites setzen, die Sie interessant finden. Es könnte so etwas wie ein schickes Layout, die Verwendung eines Testimonials, die Gegenüberstellung eines Bildes mit einem Inhalt sein…. wirklich alles, was einem ins Auge fällt.

Diese Inspirationen helfen Ihrem Team oder – falls man jemanden extern beauftragt – Ihrer Agentur, zu verstehen, was man sucht. Dadurch können sie viel besser mit einem zusammen arbeiten, um das beste Design für den Benutzer zu entwickeln.

 

Schritt 3: Brand Guidelines erstellen bzw. aktualisieren

Als nächstes ist es wichtig, die vorhandenen Markenrichtlinien und -stile zu überprüfen, damit man ein in sich stimmiges Design erstellen kann. Ihr Team sollte erstmal überprüfen, wo die aktuellen Branding-Richtlinien stehen. Sieht es veraltet aus? Sind die Schriften schwer zu lesen? Gibt es eine Schriftartenhierarchie? Wird Ihr Unternehmen durch diesen Stil auch wirklich so wiedergegeben, wie man es gerne möchte?

Der Grund, warum dieser Schritt so wichtig ist liegt daran, dass Branding ein Unternehmen konsistent repräsentieren muss. Besonders Farben nehmen auf einer Website eine wichtige Rolle ein, daher sollten diese im Guideline klar strukturiert dargelegt werden. Ebenfalls aufgenommen werden sollte der korrekte Einsatz von Logos, Schriftarten und Interaktionselementen.

Das Ziel dieses Guides ist, dass jeder, der daran mitarbeitet, dieselben Vorgaben hat. Nur so kann Konsistenz über alle Medien hinweg geschaffen werden, sei es Web, Print oder Video.

Sobald die Richtlinien gegeben sind, ist es an der Zeit, Deadlines zu definieren, innerhalb derer das gesamte Redesign der Website abgeschlossen sein muss.

 

Schritt 4: Den Projektablaufplan erstellen

Der nächste Schritt in unserer Checkliste für das Redesign unserer Website ist ein Schritt, der oft übersehen wird: eine realistische Zeitleiste zu erstellen.

Gute Websites brauchen Zeit. Um sicherzustellen, dass man seine Ziele nicht nur für die Marke, sondern auch für seine Kunden erreicht, ist aber noch einiges an Strategie und Forschung notwendig. Das sollte lange vor dem Beginn der Programmierung berücksichtigt werden. Abhängig von der Größe Ihrer Website und Ihren Zielen, sollten man etwa 2-5 Monate für diesen Prozess einplanen.

Es gibt Möglichkeiten, die Timeline zu beschleunigen, wie z.B. die Größe der Website zu reduzieren oder einen iterativen Ansatz, der sich anfangs auf die wichtigsten Seiten für das Redesign konzentriert und dann den Rest der Website schrittweise aktualisiert.

Unabhängig davon sollte man sicherstellen, dass eine angemessene Zeit für die Zusammenarbeit mit dem Team oder der Agentur eingeplant wird. Es wird Feedback Loops zum Design geben, man muss bei der Erstellung von Inhalten helfen (da kommen wir gleich noch drauf) und sicherstellen, dass alles so ist, wie es sein sollte.

Bei der Entscheidung über einen Termin ist es wichtig zu berücksichtigen, wann man die neue Website benötigt. Stehen irgendwelche Ereignisse bevor? Messen? Deadlines wichtiger Auftraggeber? Wenn es etwas Dringendes gibt, sollte man so früh wie möglich anfangen, damit man dann genügend Zeit hat, eine wirklich hochwertige Website zu erstellen.  Zeitdruck ist leider doch auf Kriegsfuß mit der Qualität.

 

Schritt 5: Ziele setzen

Da ein Website-Redesign finanziell wie auch zeitlich mit hohem Aufwand verbunden ist, sollte es sich auch wirklich lohnen. Es ist sehr wichtig, sich auf realistische Ziele für die Website festzulegen, deren Erfolg man später messen und bewerten kann.

Hier ist es wieder wichtig zu verstehen, wo die aktuelle Website steht. Wenn sie regelmäßig Traffic generiert, aber kaum Leads reinkommen, könnte man sich ein Startziel setzen, nämlich die Conversationrate um 1% zu erhöhen.

Welche Ziele man sich auch immer setzt, sie sollten denjenigen mitgeteilt werden, die an dem Redesign arbeiten, damit sie das in den Vordergrund stellen können, während die Website geplant, gestaltet und entwickelt wird. Dabei sollte einem aber auch klar sein, dass ein Website-Redesign keine Wundertüte ist, die alles in Ordnung bringt.

Die Website sollte, wenn es richtig geplant und organisiert wird, die Statistiken verbessern und auf Kurs bringen, um Ihre Ziele zu erreichen. Das wird jedoch eine Zeit lang brauchen. Auch wenn Sie nach dem Launch der Website eventuell auf heißen Kohlen sitzen – etwas Zeit braucht es schon, bis sich die volle Kraft entfaltet hat. Man sollte also nicht erwarten, dass die Statistiken am ersten Tag explodieren. Im Gegenteil, bei unseren bisherigen Redesigns, besonders bei Websites mit hohem Traffic wie z.B. der Website des bekannten US-Amerikanischen Filmkritikers James Berardinelli ist der Traffic nach dem Launch erst einmal nach unten. Erst nach einigen Wochen war er wieder auf dem alten Stand, ab dann ging es aber auch steil bergauf.

Jetzt, da Sie einige Ziele vor Augen haben, ist es an der Zeit, sich auf die Menschen zu konzentrieren, die wirklich wichtig sind…. Ihre Benutzer!

 

Schritt 6: Usability

Der wahrscheinlich wichtigste Schritt in dieser Checkliste für das Redesign der Website ist das Verständnis des Benutzers und der Benutzerführung. Zu verstehen, was der Benutzer sucht, mit welchen Fragen er auf die Website kommt und wie er danach sucht, ist der einzige Weg, sich wirklich auf den Erfolg einzustellen.

Es gibt einige Möglichkeiten, wie man diese Informationen erhält, z.B. Befragungen Ihrer Benutzer zu deren Erfahrungen. Fragen wie “Warum haben Sie sich für den Kauf von Produkt x entschieden” und “Hat Sie etwas auf der Website frustriert” sind ideal, um herauszufinden, was ihnen tatsächlich geholfen hat.

Genau diese Fragen werden natürlich nicht von heute auf morgen beantwortet, weshalb es sinnvoll ist, diese bereits einige Zeit vorher zu stellen. Wir haben hierfür Hotjar verwendet. Für uns waren die Antworten auf genau diese Fragen einer der Ausschlaggeber für das Redesign.

Einige wichtige Fragen, die man sich bei der Überprüfung der Redesign-Pläne stellen sollte, sind “Welche Inhalte benötigt der Nutzer, um seine Kaufentscheidung zu treffen”. Man kann auch Benutzertests einrichten und das „Publikum“ bitten, eine Aufgabe auf der aktuellen Website oder der neu entwickelten Website auszuführen, bevor sie gelauncht wird.

So kann man aus erster Hand sehen, wie ein potenzieller Kunde mit der Website interagiert und wo Sackgassen oder Absprungpunkte sind. Schließlich geht es darum, eventuelle Konfliktsituationen so weit wie möglich zu reduzieren, um den Usern den schnellsten Weg zum Ziel zu ermöglichen.

Es ist auch wichtig, nach dem Start der Website Daten von den Nutzern zu sammeln. Ja, wir haben es gesagt, auch auf Ihrer Website müssen Daten gesammelt werden ? Dafür muss man sich natürlich nicht aus dem Fenster lehnen, große Anbieter wie Google Analytics oder eben Hotjar sind DSGVO konform und hinreichend vertrauenswürdig.

Gerade zum Thema Usability ist Jacob Nielsen die absolute Referenz. Auf seiner Website gibt es zahlreiche detaillierte und mit super Beispielen erläuterte Guidelines an denen man sich orientieren kann.

Wenn man sich auf die Benutzerführung konzentriert und Problemstellen reduziert, gestaltet man das Redesign automatisch so, dass echte Ergebnisse erzielt werden. Nachdem wir festgestellt haben, was verbessert werden muss, ist es an der Zeit, mit der Arbeit an den Inhalten zu beginnen, mit denen das Redesign optimiert wird.

 

Schritt 7: Content first

Ohne Inhalt ist eine Website eventuell nur eine Ansammlung schöner Bilder und nichtssagender Floskeln – und das hilft niemandem. Wenn man zuerst Inhalte erstellt, kann man zuerst Ideen ausarbeiten und verfeinern, ohne Designrevisionen zu riskieren oder Termine zu verschieben.

Ein weiterer Vorteil dabei ist, dass der Designer die Möglichkeit hat, ein maßgeschneidertes Layout zu erstellen, um den Content bestmöglich hervorzuheben. Das Design sollte sich immer dem Inhalt anpassen, nicht anders herum!

Die Inhalte sollten immer so präzise und benutzerorientiert wie möglich sein. Viele Unternehmen machen auch heute noch den Fehler, Websites wie Flyer zu gestalten. Darin preisen sie sich selbst an, Benutzer jedoch interessieren sich häufig weniger für ein Unternehmen an sich, als für deren Produkte.

Indem man sich auf den Benutzer konzentriert, trägt man auch gleichzeitig dazu bei, den tatsächlichen Mehrwert Ihres Unternehmens zu verdeutlichen.

 

Schritt 8: Das Design

Jetzt sollte man die Inhalte, den aktualisierten Corporate Identity Guideline, sowie die Targets an der Hand haben. Zeit, das Designteam hinzuzuziehen, um Ihre Seitenlayouts und Design-Mockups zu erstellen. Es ist wichtig, dass der Designer Daten verwendet, die während der vorherigen Schritte gesammelt wurden – andernfalls war die geleistet Arbeit umsonst.

Verlassen sich Ihre Benutzer beispielsweise stark auf Social Proof wie Testimonials? Dann ist es sinnvoll, das auch in den Vordergrund zu rücken. Erwägen Sie, Kundenlogos einzubinden, die mit Ihrem Unternehmen erfolgreich waren, und stellen Sie sicher, dass Sie den Kontext mit einer beschreibenden Überschrift versehen, z.B. “Unternehmen, denen wir geholfen haben…”.

Unter Verwendung von Best Practices übernimmt der Designer auch den erstellten oder aktualisierten CI-Guideline und wendet ihn auf allen zu erstellenden Designs an.

Bevor mit der Entwicklung begonnen wird ist es wichtig, dass Sie und der Designer sich vollständig auf diese Mockups einstellen. Alles, was bis jetzt noch nicht vollständig geplant wurde kann zu Fehlern führen, die zu Verzögerungen in der Entwicklung führen können, insbesondere wenn neue Informationen auftauchen, die eine Überarbeitung erforderlich machen.

 

Sobald alle Entwürfe fertig gestellt und genehmigt sind, sollten nun echte Benutzer diese überprüfen können.

 

Schritt 9: Benutzerfeedback

Jetzt, da das Design erstellt wurde kann man ja mit der Entwicklung beginnen, richtig? Leider nein. Man sollte zuerst noch prüfen ob die User, die die Website in ihrem aktuellen Zustand kennen sich auch mit der neuen Website zurecht finden.

Mit einem Tool wie Axure können interaktive Versionen der Designs erstellt werden, damit Benutzer erleben können, wie die fertig entwickelte Website aussehen wird. Es sollten Prototypen unterschiedlicher Darstellungen (Desktop und Mobilgeräte) erstellt werden. Mit Aufgaben wie „Versuche, eine Anfrage zu stellen“ oder „Versuche, Produkt XYZ zu kaufen“ kann man beobachten, ob man gute Usability hat, oder Anpassungen notwendig sind.

Bevor die Entwicklung startet sollten diese Änderungen unbedingt umgesetzt werden, denn ab dann werden Änderungen in der Regel im Verhältnis richtig teuer.

Sobald die User einem quasi die Freigabe erteilt haben, ist es an der Zeit, in die Entwicklung einzusteigen und die Website für den Launch im nächsten Schritt vorzubereiten.

 

Schritt 10: Website programmieren lassen

Die Entwicklung ist in der Regel der letzte Schritt für jedes Redesign, und auch bei unserer Checkliste für das Redesign der Website ist das nicht anders.

Es war ein langer Prozess, um an diesen Punkt zu gelangen, von daher ist dieser Schritt auch immer mit gewissen Befürchtungen verbunden.

Es ist absolut notwendig, genügend Zeit für sauberen Code unter Einhaltung von SEO und branchenspezifischen Best Practices einzuplanen. In diesem Schritt überträgt das Team, intern oder extern, die erstellten Design Mockups in HTML, CSS und Javascript. Wirtschaftlich günstig ist auch oft die Nutzung von Content Management Systemen wie WordPress, die insbesondere die iterative Content-Erweiterung vereinfachen.

Es gibt auch hier eine beträchtliche Anzahl von Tests, die in diesen Schritt einfließen. Spätestens hier sollte man jedoch unbedingt eine Website Agentur beauftragen.

Die Überprüfung der Browser-übergreifenden Funktionalität, um ein einheitliches Erlebnis für jeden Benutzer zu gewährleisten, ist vor dem Start entscheidend. Qualitätsmanagement ist ein zentrales Thema eines jeden guten Entwicklungsdienstleisters. Dadurch erhält man Gewissheit darüber, dass die Website unabhängig vom verwendeten Browser genau so angezeigt wird, wie es beabsichtigt ist.

Das Gleiche gilt für mobile Geräte – die Vielfalt der Bildschirmgrößen erfordert Zeit. Normalerweise macht es Sinn, auf den beliebtesten Geräten (iPhone & Samsung Galaxy) zu testen. Damit erhält man eine realistische Momentaufnahme davon, wie die Website auf verschiedenen Geräten aussieht, und gewährleistet wiederum eine konsistente User Experience, die niemanden frustriert.

 

Nachdem die Website entwickelt wurde fehlt jetzt nur noch ein Schritt, damit sie perfekt wird.

 

Schritt 11: Wieder von Vorne: Benutzertests durchführen und Website optimieren

Die neue Website ist entwickelt und online erreichbar. Jetzt kann die Evaluierung anhand neuer Nutzerdaten starten, mit deren Hilfe die Website weiter optimiert wird.

Planen Sie mit Ihrem Team Benutzertests, um verschiedene Layouts (z.B. wie performen z.B. verschiedene Landingpages?) oder Funktionen zu testen, um die Benutzerfreundlichkeit zu verbessern. Dabei sollte man sich zuerst auf die wichtigsten Seiten der Website konzentrieren. Wiederholen Sie dafür die Schritte 6-10 so oft wie nötig, bis die gesetzten Targets schließlich erreicht sind.

Diese Tests und die nachfolgenden Änderungen sind einzig und allein dazu da, die Benutzerfreundlichkeit Ihrer Website und die Lead-Generierung zu verbessern.

 

Fazit

Das ist unsere Checkliste für das Redesign unserer Website! Es ist nicht immer einfach, es nach Vorschrift zu befolgen, besonders wenn es ambitionierte Deadlines mit Zeitdruck gibt, weshalb man einige Schritte verkürzen oder gar ganz überspringen muss.

Bei uns hat das Redesign übrigens knapp 2 Monate gedauert, wobei wir einerseits einen erheblichen Anteil der Arbeit, das Sammeln und Auswerten von Benutzertests mit der alten Website bereits im Vorfeld organisiert hatten. Andererseits wurde diese Arbeit während unseres Tagesgeschäfts, also ohne dedizierte Task Force erledigt. Immer dann, wenn die jeweiligen Kreativen / Units eben Zeit hatten.