Kurzgefasst
Für Crazy Factory haben wir den Onlineshop einem Responsive Facelift unterzogen. Neben einem responsiven Layout kam es hier vor allem auf die Benutzerfreundlichkeit bei der Produktauswahl, eine übersichtliche Produktdetailseite sowie einen jederzeit schnellen Zugriff auf den Warenkorb an. Außerdem erstellten wir den Content für die Inhaltsseiten, betexteten 1.700 Produkte und etablierten ein Newslettersystem für den mehrsprachigen Aussand an monatlich 3 bis 5 Mio. Empfänger in der ganzen Welt.
Da die Agentur Creations aus Münster den ersten Onlineshop für Crazy Factory realisiert hatte, war sie beim Relaunch für die technische Implementierung des Systems verantwortlich. Die Betreuung des neuen Onlineshops findet in enger Kooperation und Absprache statt.
- Ist-Analyse und Konzeptionierung
- Technische Beratung
- Umsetzung des mit dem Kunden entwickelten Layouts
- Umstellung auf Responsive Design für Usability-Optimierung mit allen Endgeräten
- Prozessoptimierung für flüssige Darstellung auf allen Endgeräten
- Content-Erstellung für die Website
- Verfassen von 1.700 Produktbeschreibungen
- Implementierung von 25 Sprachen
- Newsletter-Handling mit Copernica
- Monitoring von Besucherfluss und Conversions
Relaunch für mehr Übersicht und Benutzerfreundlichkeit
Mit Sitz im schweizerischen Chur ist Crazy Factory der weltweit größte Piercing-Onlineshop und verfügt über ein Portfolio von mehr als 80.000 Produkten, das jährlich um etwa 2.000 weitere Piercings und Modeschmuckstücke erweitert wird. Bei dieser Produktfülle müssen sich die User möglichst einfach im Shop zurechtfinden und ihre Suche bzw. Bestellung mit wenigen Klicks abschließen können.
So sorgen die klare, farbliche Trennung der einzelnen Produkte sowie ein strukturiertes Menü für ein aufgeräumtes Gesamtbild, Übersichtlichkeit und eine intuitive Navigation. Hinzu kommt das Responsive Design, das den Shop für sämtliche Endgeräte vom PC über das Tablet bis hin zum Smartphone optimiert, denn gerade die junge Kernzielgruppe surft und stöbert häufig mobil.
Clickdummy zum Testen der Bedienfreundlichkeit
Um die Usability des Shops gründlich testen zu können, erstellten wir zunächst einen Clickdummy. Fragen bezüglich Menüführung sowie Struktur der gesamten Website und der Aufbau der Einzelseiten ließen sich anhand dieses „Look and Feel“-Erlebnisses deutlich beantworten. So konnten wir, nachdem die Entscheidung für ein Layout gefallen war, mit dem umfangreichen Umbau des bestehenden Onlineshops beginnen.
Konzeptionierung
Für einen möglichst genauen Fahrplan beim Relaunch des Crazy-Factory-Onlineshops stand eine gründliche Ist-Analyse am Anfang des Projektes. Gemeinsam mit dem Kunden sammelten wir neue Ideen für Layout und Farbgebung der einzelnen Seiten. Ein weiterer wichtiger Punkt war das Optimierungspotenzial. Hier wurde festgelegt, wo Ladezeiten verkürzt werden konnten, wie die Usability erhöht werden konnte, welcher Stil für Content-Seiten und Produktbeschreibungen angemessen war und wie die Filter- und Sortierfunktion für die Suche nach den verschiedenen Piercings am besten funktionierte.
Responsive Design – zum bequemen Surfen auf allen Endgeräten
Für die reibungslose Navigation auf allen Endgeräten bis hin zum Smartphone war die Umstellung auf Responsive Design dringend notwendig. Schließlich steigt die Anzahl der Websitebesuche mit Smartphones und Tablets immer weiter an und gerade die Kernzielgruppe der 14- bis 25-Jährigen surft häufig von unterwegs. Deshalb mussten auch die Ladezeiten optimiert werden. Mit der Umstellung auf das SPDY-Protokoll reduzierten wir den Verwaltungsaufwand zwischen Browser und Server und
sorgten für eine schnelle und reibungslose Nutzung der Website. Außerdem passt sich das Volumen der Grafiken dank responsiver Bilder an das jeweilige Endgerät an. Dank Lazy Loading baut sich die Seite nach dem Aufrufen schneller auf, denn für die Funktionalität werden weniger wichtige Seitenbestandteile erst später nachgeladen. Zudem reduzierten wir Dauer und Häufigkeit von Datenbank-Abfragen und wegen des Browser-Cachings müssen übermittelte Dateien beim nächsten Besuch nicht erneut runtergeladen werden.
Flat-Design für eine bessere Übersicht und Facettensuche für genaue Ergebnisse
Die Produktübersichtsseiten sollen nicht überladen wirken. Viele helle Farben sowie ausreichender Abstand zwischen den einzelnen Produkten sorgen für eine bessere Übersicht, auch auf dem Smartphone. So wird der User einerseits nicht vom Wesentlichen abgelenkt, andererseits verkürzt sich durch die einfacher zu beschreibenden Interface-Elemente wiederum die Ladezeit. Auch die Produktdetailseiten sind übersichtlich. Drop-down-Menüs „verstauen“Bedienelemente wie die Auswahl von Länge oder Dicke der Piercings platzsparend. Sogenannte Action Shots zeigen, wie das jeweilige Schmuckstück getragen aussieht und schaffen einen weiteren Kaufanreiz. Zusätzlich werden ähnliche und meistverkaufte Produkte angezeigt.
So wurde auf der gesamten Website eine bessere Usability etabliert, da sowohl die Übersichtsseite als auch die Produktdetailseiten intuitiv und einfach bedienbar sind. Der Warenkorb ist immer unauffällig am Kopf der Seite platziert und klappt auf, sobald ein Artikel hineingelegt wird. So hat man immer einen Überblick über den Bestellwert.
Anhand einer Sortierfunktion können die User auf den Produktübersichtsseiten unter anderem nach Material, Materialstärke, Stil, Gewindeart und -größe filtern und gelangen so schnell zum gewünschten Produkt. Diese Facettensuche haben wir anhand der Datenbank Elastic Search realisiert, die speziell für die Auswahl aus großen Datenmengen konzeptioniert ist.