bonprix

Nutzerzentrierte Designentwicklung für die bonprix Online-Shops

Bonprix Lead Design Aufmacher

Die Aufgabe:

bonprix gehört als international erfolgreicher Modehändler zu den fünftgrößten E-Commerce-Anbietern in Deutschland. Die 23 internationalen Ländershops von bonprix ziehen täglich weltweit mehr als 3 Millionen Besucher an. Als bonprix uns im Jahr 2011 kontaktierte, war die Designsprache der bonprix Onlineshops nicht mehr zeitgemäß. Der E-Commerce erzielte jedoch bereits einen großen Anteil am Gesamtumsatz des Multichannel-Anbieters. bonprix entschied sich für H2D2 als Designspezialisten, um das Design zu modernisieren und das Einkaufserlebnis zu steigern.

Unsere Umsetzung:

Unsere bis heute andauernde Partnerschaft startete im Jahr 2011 mit einer Überarbeitung der Artikelübersichtsseite. Nach erfolgreichem Release dieses ersten Projektes überarbeiten wir sukzessive alle Seiten des Shops. Nachdem bonprix sich erfolgreich modernisiert zeigte und die Kundenzufriedenheit sowie die Conversion messbar stieg, entstand der Wunsch nach mehr. Die nächste große Evolutionsstufe erfolgte im Jahr 2014, die ganz unter dem Motto „Weniger Interface, mehr Produkt“ stand. Dafür haben wir das Design weiter reduziert und die Struktur vereinfacht. Dabei wurden im Rahmen von Nutzertests und Kundenbefragungen immer wieder unsere UX- und Designentwürfe getestet.

Das Herz des Shops: Die Artikeldetailseite rückt das Produkt in den Mittelpunkt

Artikeldetailseite des bonprix Online Shops in responisiven Ausprägungen

Nach dem Motto „Weniger Interface, mehr Produkt“ unterzogen wir sukzessive den gesamten Shop einem weiteren Relaunch

Startseite, Artikelübersichtsseite und Artikeldetailseite des bonprix Online Shops

Neben den Weiterentwicklungen der Grundfunktionen des Onlineshops entwickeln wir auch immer wieder spezielle Features. So etwa die Outfitberatung „Shop the Look“, eine spezielle Darstellung für Artikelserien „Mix & Match“ und einen nutzerfreundlichen BH-Berater.

Für viele Einzelartikel steht eine spezielle „Shop the Look“-Funktion zur Verfügung. Die Kundin kann sich über die „Shop the Look“-Funktion inspirieren lassen und gleich ein passendes Outfit zum Wunschartikel bestellen:

Die Beratungsfunktion „Shop the Look“ im Online Shop von bonprix

Wir sehen unsere Rolle nicht nur als Design-Lieferant, sondern beraten Unternehmen auch im Hinblick auf Designstrategie und aktuelle Entwicklungen. So rieten wir bonprix zu einem Atomic Design-Prozess, der viele Vorteile bei komplexen und großen Interface-Systemen bringt. Abstimmungen zwischen Design und Entwickler werden vereinfacht und Umsetzungsaufwände reduziert. Eine konsistente Atomic Design-Struktur legt die Basis für die geplante Weiterentwicklung der bonprix Shops im Responsive Design.

Im Jahr 2015 starteten wir mit der Atomic Designphase und stellten den Gestaltungsprozess nach und nach auf die modulare Designmethode um. Hierbei werden aufbauend auf Grundelemente (Atome) komplexere Interface-Elemente zusammengesetzt.

Bausteine für das Atomic Design des Online Shops von bonprix

Diverse Icons, die wir für den internationalen Einsatz zeichneten, sind ein wichtiger Teil des bonprix Interface Designs. Das gesamte Iconset bauen wir permanent aus. Es umfasst inzwischen mehr als 200 Symbole:

Verschiedene Icons im Online Shop von bonprix - Teil 1
Verschiedene Icons im Online Shop von bonprix - Teil 2

Die Zusammenarbeit

Als zentrale Anlaufstelle für Designabstimmungen nutzen wir eine eigens eingerichtete Plattform namens „Projektor“, die sich zur Bereitstellung von Prototypen, Designs sowie zum Erhalt von Feedback vielfach bewährt hat. Der „Projektor“ fungiert dabei als agiles Board, zu dem alle Teilnehmer des Projektes Zugriff haben. Jira zur Aufgabenplanung und Confluence zur Projektdokumentation wurde von bonprix in den Prozess integriert. Das ermöglicht eine nahtlose Zusammenarbeit zwischen uns als externes Designteam mit dem internen UX-Team von bonprix. Zur Prototyperstellung nutzen wir vor allem Axure. Das Interface Design erfolgt mit Sketch und Photoshop. Mit Hilfe von Shared Librarys arbeiten wir eng und konsistent mit dem UX-Team von bonprix zusammen.

Verschiedene Tools und Apps zur Zusammenarbeit am Online Shop von bonprix

„Ich habe über fünf Jahre mit H2D2 auf unterschiedlichsten Themen sehr erfolgreich zusammengearbeitet. Von E-Commerce über Kataloggestaltung bis hin zu allgemeinen Printerzeugnissen. H2D2 hatte immer eine kompetente Antwort auf unsere Anforderungen. Meine Empfehlung!“

— Frank Loehmann, Projektmanager User Experience bonprix

Das Resultat – gutes Design verkauft

In einem anspruchsvollen und hochkompetitiven Marktumfeld ist es uns gelungen, bonprix erfolgreich als attraktive und sympathische Modemarke zu positionieren. So haben wir gemeinsam mit unserem Kunden die Grundlage für nachhaltiges Wachstum im E-Commerce gelegt. Im deutschen Markt erzielte bonprix im Jahr 2010 einen E-Commerce-Umsatz von 388,4 Millionen EURO. 2016 lag der E-Commerce-Umsatz bereits bei 586,6 Millionen EURO. Der entscheidende Erfolgsfaktor: Mithilfe kreativer Designlösungen die Bedürfnisse der Nutzerinnen ins Zentrum rücken, welche nach einer emotionalen Ansprache beim Onlineshopping verlangen. Doch nicht nur die Umsatzentwicklung ist eine Bestätigung für die richtige E-Commerce-Strategie. bonprix findet auch breite Anerkennung von Branchenexperten, wie sich etwa durch die zuletzt erhaltene Auszeichnung beim INTERNET WORLD Business-Shop-Award 2018 zeigt. Bei der Preisverleihung lobte Ingrid Lommer, Co-Moderatorin des Shop-Awards:

„Heute zeigt sich die OTTO-Tochter vor allem im Netz von ihrer modernsten Seite. Der Shop ist inspirierend, emotional und hebt sich durch hochwertige Produktfotos, durchbrochene Produktüberblicksseiten, inspirative Inhalte und diverse andere kleine Details erfrischend von anderen Mode-Shops in dieser Preisklasse ab – und das auch auf kleinen Bildschirmen.“

Das ist wichtig, da Onlineshopping per Smartphone immer beliebter wird.

Kunde

bonprix Handelsgesellschaft mbH, Hamburg

Unsere Leistungen

UX AuditUX & UI DesignE-Commerce DesignDesign Richtlinien / StyleguidesDesignsystemeResponsive DesignCorporate DesignIllustration & IcondesignInteraktive Prototyp-EntwicklungWebanimation und ErklärfilmeFrontend-Programmierung

Launch

2011–2020

Ergebnis

www.bonprix.de

Sie möchten mehr erfahren?

Schreiben Sie mir oder rufen Sie einfach an: Markus Remscheid, markus.remscheid@h2d2.de +49 30 78 89 03 -21