Mai 2015
Nutzerzentriertes Re-Design der bonprix-Artikeldetailseite
Die Artikeldetailseite ist die zentrale Seite eines Online-Shops. Hier entscheidet sich ein Kunde für oder gegen den Kauf eines Produktes. Umso wichtiger ist es für den Erfolg eines Shops, an dieser Stelle alles dafür zu tun, dem Kunden ein bestmögliches Einkaufserlebnis zu bieten. In einem systematischen Prozess unterzogen wir die Artikeldetailseite von bonprix einem grundlegenden Relaunch, bei dem wir zu einem ganz neuen Ergebnis fanden.
Von Markus Remscheid
Der Ausgangspunkt:
Die bisherige Artikeldetailseite konvertierte sehr gut und war rein funktional betrachtet eine gute Seite. Doch standen die Buttons und Auswahlelemente der Benutzeroberfläche stark im Vordergrund. Das Interface erinnerte eher an eine Software als an einen Online-Shop. Dies führte zu einer nüchternen Produktpräsentation, welche die Artikel nicht überzeugend und emotional in Szene setzen konnte.
Die bonprix Artikeldetailseite vor dem Relaunch. Funktional eine gute Seite, wirkt sie insgesamt jedoch eher technisch und damit unpassend für einen Mode-Shop.
Zielsetzung:
Die neue Artikeldetailseite sollte vor allem eine grundlegende Anforderung erfüllen: die Artikelbilder in das Zentrum der Aufmerksamkeit zu stellen und diese möglichst groß abbilden zu können. Große Bilder bieten echte Mehrwerte für die Nutzer, es lassen sich mehr Details erkennen und die Artikel kommen insgesamt besser zur Geltung.
Erste visionäre Konzept-Studien:
Um ein visionäres Zielbild zu entwickeln, wie die neue Artikeldetailseite einmal aussehen könnte, scribbelten und zeichneten wir zunächst klassisch mit Stift und Papier, um verschiedene Anordnungen und Ideen auszuprobieren. Aus diesen Ideen entstanden erste digitale Prototypen. In Abstimmungen mit bonprix zeichnete sich hier ein Favorit ab, der von uns weiter verfeinert und für einen User-Test vorbereitet wurde.
Anhand erster Scribbles und Protoypen untersuchten wir verschiedene Möglichkeiten, die neue Artikeldetailseite aufzubauen.
Die Grundidee zeichnete sich schon im frühen Entwicklungsstadium ab. Wir stellten das Artikelbild in die Mitte der Seite und gruppierten die Auswahlelemente darum herum.
Verschiedene Aspekte und Funktionen der Artikeldetailseite wurden anhand von noch ungestalteten Prototypen in Usability-Tests untersucht. Das Testing wurde von eResult durchgeführt.
Usability-Testing: Neues Design wird als übersichtlich und aufgeräumt empfunden
Um herauszufinden, ob das neue Konzept verstanden und im Vergleich zur alten Artikeldetailseite besser wahrgenommen wird, wurde ein nutzerbasierter Usability-Test durchgeführt. Dieser ergab, dass die Probandinnen das neue Design als übersichtlicher, klarer strukturiert und hochwertiger empfanden.
Außerdem bestätigte sich, dass die Produktbilder als wichtigste Information zum Produkt empfunden wurden. Mit unserem Ansatz, die Artikelabbildung ins Zentrum zu rücken lagen wir also genau richtig.
Die Artikelbilder lassen sich über die Lupenfunktion vergrößern, ohne dass die Artikeldetailseite verlassen werden muss. Die Auswahlelemente liegen transparent über dem Artikelbild. Der Artikel kann auch im Lupenmodus so mit wenigen Klicks in den Warenkorb gelegt werden.
Finalisierung – Lupenausschnitt noch vorgesehen
Im letzten Schritt gestalteten wir die Produktionsvorlagen für die neue ADS im Detail aus und berücksichtigten wichtige Erkenntnisse, die im Usabiltity-Test gewonnen wurden.
Beispielsweise stellte sich heraus, dass sich die Kundinnen einen Lupenausschnitt wünschen, bei welchem bis auf die Materialdetails vergrößert werden kann.
Selbst sehr große Produktabbildungen, wie wir Sie bereits vorgesehen hatten, konnten dies nicht ersetzen.
Die Nutzer wünschten sich eine Ausschnittfunktion, bei der bis auf Materialdetails vergrößert werden kann.
Das Ergebnis
Nach einem systematischen Entwicklungsprozess, der die Anforderungen und Wünsche der Nutzer in den Mittelpunkt rückte, steht am Ende ein sehr gut bedienbares Seitenkonzept zur Verfügung. Im Usability-Test zeigte sich, dass die Seite im Vergleich mit direkten Wettbewerbern sehr gut abschneidet sowie als aufgeräumt und mit Fokus auf das Produkt beschrieben wurde.
Zusätzlicher Nutzen: die neue Artikeldetailseite unterscheidet sich von Aufbau sowie Look & Feel von den Artikeldetailseiten der Mitbewerber. Mit dieser individuellen und überzeugenden Lösung gelingt es bonprix, sich positiv im Bewusstsein der Kundinnen zu verankern und sich weiter erfolgreich in einem hart umkämpften Markt zu behaupten.
Die finale Artikeldetailseite in voller Länge. Das große Artikelbild steht im Fokus. Interaktionselemente sind in sinnvollen Gruppen um das Artikelbild angeordnet.
Artikel aus den unterschiedlichsten Sortimenten, welche im großen bonprix Produktportfolio angeboten werden lassen sich mit der neuen Artikeldetailseite sehr gut abbilden.
Die Artikelseite wurde in verschiedene Sprachen lokalisiert, wie z.B. für den russischen Online-Shop.
Weitere Projekte, die wir für bonprix umsetzten finden sich unter Arbeiten.