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.

11 Kommentare

  1. steudneri
    17. Dezember 2012 um 12:23 Uhr

    super, ich finde das neue design sehr gelungen. im gegensatz zu vorher wirkt es einfach frischer und irgednwie dynamischer. wie bereits erwähnt ist die usability auch verbessert worden. das ganze ist echt übersichtlich gestaltet, weshalb es mich auch nciht wundert, dass die conversion-rate gestiegen ist. gute arbeit auf jeden fall :)

  2. David
    20. Dezember 2012 um 23:47 Uhr

    Hi, dem Artikel gehe ich voll d’accord. Und habe mir den mal gebookmarked. Besser kann man es nicht ekrlären.

    Grüße
    D

  3. Jens
    14. Januar 2013 um 12:48 Uhr

    Super auf den Punkt gebracht!
    Danke

  4. urlauber
    20. Februar 2013 um 13:00 Uhr

    kann mich meinen vorrednern eigentlich nur anschließen. finde die umsetzung ebenfalls super gut gelungen!

  5. Mirco
    25. Februar 2013 um 12:14 Uhr

    Da kann ich wirklich nur zustimmen. Realign ist übrigens immer notwendig, und erst recht nach einem grossen Redesign sollte man über Wochen hinweg erstmal wieder kleine Änderungen vornehmen und alles optimieren. Aber ein Redesign ist einfach alle paar Jahre fällig.

  6. Jochen
    7. März 2013 um 18:31 Uhr

    Eine Aufgabe, die wir auch gerade hinter uns haben ;-) Ich bin zufrieden mit dem Resultat und hatte glücklicherweise professionelle Hilfe von unserem Webdesigner – wir wollten die Grundoptik gleich lassen, aber alles etwas luftiger und leichter gestalten. Außerdem sollte die Site mobil sichtbar werden. Die Navigation, die sich seit 3 Jahren bewährt hat, ließen wir im Wesentlichen gleich, damit die gewohnte Usability gegeben bleibt. Mal schauen, wie sich das neue Design auf die Conversionrate auswirkt … :-)

  7. Teppiche
    17. März 2013 um 22:09 Uhr

    Das Design MUSS Kundenorientiert, einfach, logisch und optisch wertig aussehen! Im Fall von Escapio sehr gelungen!

  8. Mario
    26. März 2013 um 19:32 Uhr

    Ich finde auch das neue Design sehr gelungen. Auch unten rechts im Bild finde ich die kleine rote Box sehr gut. Ansonsten ist es viel übersichtlicher und macht echt Laune die Seite zu besuchen.

  9. Marion
    5. April 2013 um 08:46 Uhr

    Ist richtig gelungen der Artikel. Und genau so ist es auch. Ich finde, dass gerade bei der Gegenüberstellung erst auffällt, wie viel Platz man eigentlich hat, wenn man es geschickt anstellt. Und davor einfach nur sinnlos vergeudet!

  10. Jörg
    23. Mai 2013 um 00:49 Uhr

    Sehr schön und professionell geworden! Alles auf einen Blick- Ein Paradebeispiel für echte Usability und den Mehrwert daraus.

  11. Matthias
    19. Juli 2013 um 20:16 Uhr

    Sehr hilfreicher Artikel zu dem Thema.

Hinterlasse einen Kommentar