Webseiten Redesign – Eine Fallstudie

Messbaren Mehrwert schaffen durch besseres Design

  • von Christian Schulze

Redesigns sind mit die größten Projekte, die einem Webentwickler unter die Nase kommen können. Die Anforderungen sind komplex. Die individuelle Note des Unternehmens sollte weitergeführt werden, sonst könnten Stammkunden denken nicht auf der richtigen Seite zu sein. Trotzdem möchte man einen frischen Look und am Ende mehr Verkäufe oder Buchungen erzielen. Heute zeige ich euch die Schwierigkeiten eines Redesigns anhand von Escapio, einem Reiseportal für individuelle Hotels.

Redesign vs. Realign

Mittlerweile plädieren viele Webdesigner dafür, ein regelmäßiges Realign einem großen Redesign vorzuziehen. Statt alle zwei Jahre das Bestehende Design komplett über den Haufen zu werfen sollten kleinere Elemente ständig verbessert werden. Dafür eignen sich zum Beispiel A/B-Tests um die Auswirkung kleiner Veränderungen zu testen. Doch manchmal ist die Zeit von einem alten Webdesign einfach abgelaufen. Damit die Webseite eine zeitgemäße Gestaltung bekommt, erfordert es dann größerer Anstrengung.

Bei Escapio ist es gelungen den Ton beizubehalten. Die Farbgestaltung wurde weitestgehend beibehalten und auch die wichtigsten Elemente sind weiterhin vorhanden. Dabei wurden fast alle wichtigen Bereiche verbessert.

Startseite – Ausgangspunkt für neue Besucher

Die Startseite ist oft der Ausgangspunkt für neue Besucher. Sie sollen erfahren worum es überhaupt geht und von hier aus so schnell wie Möglich zum gewünschten Ziel kommen. Das neue Design von Escapio wurde genau auf diese Anforderungen hin optimiert.

Das alte Design der Escapio Startseite wirkt auf den ersten Blick unübersichtlich. Zu viele Elemente versuchen gleichzeitig die Aufmerksamkeit auf sich zu lenken.

Die neue Startseitengestaltung bietet dagegen eine klare Anordnung der Elemente. Der Betrachter wird von oben nach unten geleitet.

Der Bilder-Slider weckt durch die großen hochwertigen Fotos Assoziationen und Emotionen die direkt mit dem Thema “Urlaub” in Zusammenhang stehen. Die Untertitel klären auf, was es bei Escapio zu finden gibt: Unique Hotels. Handverlesen. (Wobei fraglich ist ob die meisten Besucher etwas mit dem Fremdwort “unique” anfangen können. Das deutsche Wort “einzigartige” ist aber leider ziemlich verbraucht und kein guter Ersatz. Ein klarer Fall für zukünftige Verbesserungen.)

Unter dem Slider wurde eine übersichtliche und einfach zu bedienende Suchmaske platziert. Hier kann der Besucher seine Vorstellungen eingeben und gelangt schnellstmöglich zu einer Liste mit Hotels. Erst auf der Suchergebnisseite kann er weitere Einzelheiten wie Preisspanne oder Ausstattungsmerkmale festlegen. Gut ist der Verzicht von erweiterten Suchkriterien auf der Startseite. Die Fülle an Auswahlmöglichkeiten schreckt potentielle Interessenten eher ab.

Weiter unten auf der Startseite gibt es ein paar ausgesuchte Hotel-Highlights und Links zu Urlaubsorten, Regionen und Ländern.

Produktseite – Informieren und zum Kauf anregen

Eine weitere wichtige Seite möchte ich unter die Lupe nehmen: Die Produktseite. In diesem Fall ist das Produkt ein Hotel und der Besucher soll so einfach wie möglich Übernachtungen buchen können.

Die alte Seite verschwendete einen beachtlichen Teil des verfügbaren Platzes mit einem inhaltslosen Header. Daraufhin folgte eine Bildergalerie, dann ein kurzer Anrisstext über das Hotel, Links zu Details der Hotelanlage und erst dann eine Buchungsmaske.

Die neue Seite besticht durch eine optisch viel aufgeräumtere Gestaltung. Bilder des Hotels sind nun Bestandteil des Headers und geben einen guten Eindruck der Anlage auf den ersten Blick. Direkt darunter findet sich der Name des Hotels. Dieser wird mit einer großen Schriftgröße selber zum Gestaltungselement. Darunter wurde die überarbeitete Buchungsmaske platziert.

Ist das Hotel nicht ausgebucht, werden direkt die verfügbaren Zimmer mit Foto angezeigt. An der rechten Seite gibt es einen Gesamtpreis, der immer an der gleiche Stelle steht und damit sehr prominent wirkt und nicht übersehen werden kann. Ebenfalls nicht übersehbar findet sich direkt unter dem Preis die Aktionsaufforderung “Jetzt buchen”.

Aber auch kleinere Details wie zum Beispiel die Beschreibung des Hotels wurde wesentlich verbessert. Fand der Besucher vorher einen unübersichtlichen Textklumpen vor, so wird er jetzt mit übersichtlichen Informationshappen versorgt. Die Texte sind gut lesbar formatiert und Details in Tabellenform untergebracht.

Wichtig beim Relaunch

Wie schon eingangs beschrieben muss bei einem Redesign noch mehr beachtet werden als bei einer kompletten Neugestaltung einer Webseite. Man muss abwägen inwieweit man ein bestehendes Design verbessert oder komplett über den Haufen wirft.

Hauptaugenmerk sollte dabei immer eine Verbesserung der Conversationsrate sein. Vor allem wenn es sich um einen Onlineshop handelt. Bei Escapio gibt es eine große Auswahl an handverlesenen Hotels aus der ganzen Welt. Hier ist es wichtig eine übersichtliche Auswahl zu ermöglichen und trotzdem jederzeit den Zugriff auf die essentielle Buchungsfunktion zu bereitzuhalten.

In meinen Augen ist dieses Redesign ein voller Erfolg. Aber was nützt einem eine schöne Webseite ohne messbaren Erfolg?

Verbesserung Conversationsrate

Das Ziel aller Veränderungen sollte die direkte oder indirekte Verbesserung der Conversationsrate sein. Der simple Wunsch nach einem neuen Look reicht nicht aus.

Laut eigenen Angaben konnte Escapio in einem A/B-Test mit dem neuen Design eine Steigerung der Conversions von +19% erreichen. Das ist beachtlich und zeigt das die Summe aller optischen Verbesserungen im Shop einen messbaren Erfolg gebracht haben.

Denk dran:

Die Wahl der Schriftart, die Größe von Bildern, die übersichtliche Formatierung eines Textes oder die Einfachheit eines Suchformulars. Alle Details haben zum Ziel das Problem des Besuchers so schnell und einfach wie möglich zu lösen. Erst dann kann ein Redesign messbaren Mehrwert bieten.

13 Kommentare

  1. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.