Relaunch mit optimiertem Content

Für Crazy Factory

Crazy Factory GmbH

Website Relaunch und Content-Erstellung

Partneragentur: Creations Media GmbH

Ist-Analyse, Layout- und technische Beratung, Usability-Optimierung, Scrum, Übersetzungshandling, Newsletter, Content-Erstellung, Code-Refactoring

HTML5, CSS3, Templating, Git Flow, Responsive Design, Copernica

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.

Flüssige Darstellung auch mit langsamem Prozessor

Damit die User im Crazy-Factory-Onlineshop auch mit langsamen Prozessoren störungsfrei stöbern und bestellen können, haben wir mit sogenannten Fächer-Mechanismen über hardwarebeschleunigte CSS-Animationen für eine flüssige Darstellung gesorgt. Für eine schnellere Reaktion werden hierbei bestimmte Prozesse vom Prozessor auf die Grafikkarte verschoben.

Crazy-Factory-Onlineshop in 25 Sprachen

Ein ganz klarer USP und deutlicher Vorteil von Crazy Factory ist die enorme Sprachenvielfalt. Hier wurde immer wieder nachgerüstet, bis der Shop in insgesamt 25 Sprachen wie Englisch, Spanisch, Italienisch, Dänisch, Griechisch und Bulgarisch verfügbar war. Auch für die Implementierung der Sprachen waren wir verantwortlich.

Mehrsprachiger Newsletter-Versand mit Copernica

Crazy Factory verschickt seinen Newsletter in 25 Sprachen mit Copernica. Mit diesem System kann man anhand automatischer und personlisierter Follow-up-E-Mails flexibel auf den Abbruch eines Online-Einkaufs oder auf das Klicken bestimmter Links im Newsletter reagieren. Verschiedene Zielgruppen erreicht man anhand textlicher und grafischer Anpassungen.

Erstellung von hochwertigem Content

Für den Relaunch wurde der gesamte Content neu getextet. Aufgrund des bildlastigen Gesamtkonzepts auf allen Seiten war nur Platz für wenig Text. Deshalb mussten wir mit wenigen Worten auf den Punkt kommen. Auch für die Unterseiten „Fragen und Antworten“, „Infos zum Bestellvorgang“, „Zahlung und Versand“ etc. verwendeten wir für die Kernzielgruppe eine jugendliche, lockere Sprache. Grundsätzlich wird überall im Shop geduzt.

Code-Refactoring bestehender Systeme

Anstatt einen ganz neuen Shop zu entwickeln, haben wir anhand eines Code-Refactorings den bestehenden und „renovierungsbedürftigen“ Code neu geschrieben. Dadurch konnten wir zum Beispiel in Hinblick auf das starke Wachstum mit etwa 2.000 neuen Produkten pro Jahr die Systemstabilität sicherstellen. Zudem haben wir verschiedene Features wie den Warenkorb, das Menü und die Produktübersichtsseiten mit A/B-Tests auf Funktionalität und Bedienbarkeit hin geprüft.

Texten von 1.700 Produkttexten

Für insgesamt 1.700 Topseller im Shop lieferten wir die Produktbeschreibungen. In den kurzen Texten über Plugs, Tunnel, Bananen, Expander, Nasenpiercings und Barbells waren zwei Dinge sehr wichtig: Einerseits mussten wir auf authentische Weise die junge Zielgruppe erreichen und sie zum Kauf animieren, andererseits mussten die wichtigen Produktdetails mit wenigen Worten beschrieben werden, ohne den Lesefluss zu beeinflussen.

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.