ChocQlate kreiert Schokoladenprodukte aus der puren Kakaobohne, die mit natürlichen Zutaten zu einem Kraftpaket der Natur werden. Der verarbeitete Kakao stammt von natürlichen Mischkulturen mitten aus den Dschungelgebieten von Sri Lanka, Panama und Peru.
Das Besondere an ChocQlate sind, neben den fertigen Schokoladenprodukten, die Geschenkideen aus Schokolade zum Selbermachen mit Zutaten und Gießformen.
Das Packaging Design der Firma gewann bereits den iF Design Award und den Red Dot Award.
Ausgangssituation des Projekts
Die alte Site von ChocQlate stellte eine Mischung aus einer Art Online Magazin und Shop dar. Der Shop und dessen Navigation waren strickt auf einen bestimmten Einkaufsprozess ausgerichtet:
- 1. Zutatenset
- 2. Schokoladengießformen
- 3. Toppings
- 4. Snacks
Mit dem Wachstum ChocQlates erweiterte sich jedoch auch die Produktpalette welche in dem ursprünglichen, sehr individuellen Design nicht mehr abzubilden war. Auch war die Kombination aus OXID CE 4.6 und Drupal nicht responsive und der Wordpress-Blog für Rezepte lag auf einer externen Domain.
Zur leichteren Bedienung durch den Kunden wurde für den Content Drupal gewählt, in welchem OXID in iFrames integriert wurde. Hierfür wurden tiefe Eingriffe ins OXID System gemacht, wodurch der ganze Shop nicht mehr mit neueren Versionen aktualisiert werden konnte.
Projektziel
Ziel des Projekts war es neben dem Verzehr von ganz viel Schokolade ohne zuzunehmen, einen kompletten Relaunch der Website durchzuführen. Dabei sollten folgende Rahmenkriterien erfüllt werden:
- Responsive Design passend zum neuen Produkt-, Corporate- und Brand-Design
- Erstellung von neuen Produktfotos und Produktvideos
- Beliebig mit neuen Kategorien und Produkten erweiterbar
- Blog auf gleicher Domain
- Möglichst große Freiheit für den Kunden zur Content-Erstellung
Umsetzung
Projektleitung und verantwortlich für das Webdesign sowie die Umsetzung des Contents war Felix Brodbeck von webnuts. Die technische Integrations und Umsetzung des Shopsystems geschah durch Michael Felber von Netensio.
Design
Das Design des neuen Shops wurde so angelegt, um von der Usability her den Gewohnheiten der User zu entsprechen und sich trotzdem von anderen Shops abzuheben. Hierbei wurde das bereits bestehende Branddesign von ChocQlate aufgegriffen, um die Markenbotschaft und den Premiumgedanken der Produkte ins Digitale zu übertragen.
Da Schokolade und Kakao ganz klar Produkte sind, die man mit den Sinnen erlebt, war es unumgänglich mit großen und stimmungsvollen Produktbildern zu arbeiten, die Stil und Emotion übertragen.
Also wurden in einem zweiwöchigen Fotoshooting alle Produkte neu abgelichtet und 12 neue Produktvideos gedreht. Die Fotografien stammen von Olga Löffler.
Als i-Tüpferl wurde für den Shop noch ein eigener Icon Font entwickelt, der bei den Buttons zum Einsatz kommt. Die Startseite sowie die Übersichtseite des Shops zeigen die Markenwelt von ChocQlate und präsentieren die Produkte in einer schmackhaften und emotionalen Bilderwelt.
Systementwicklung
Aufgrund der schnellen Entwicklungsmöglichkeiten und dem durchdachten Responsive-Eigenschaften wurde das Bootox - Responsive OXID eShop Template von Netensio gewählt. Dieses basiert auf der aktuellsten Version von Bootstrap und OXID.
Des Weiteren kommt das SEO und Google Merchant Module von Netensio zum Einsatz sowie das Google Analytics Modul von Suabo für E-Commerce Tracking.
Kategorien und Artikelseiten
Artikelseiten
Da der Kunde bei der Pflege der Produkt- und Kategorieseiten möglichst große Freiheiten haben möchte und hier am liebsten mit HTML und CSS arbeitet, wurden die Artikelseiten im Backend mit Feldern für CMS Idents versehen.
Die Content-Pflege der Produktseiten wird also über das Anlegen von einzelnen CMS Seiten erledigt. Der Aufbau dabei sieht wie in folgender Abbildung aus.
Kategorieseiten
Auch die Kategorieseiten des Shops profitierten von einem ähnlichen Aufbau. Anstatt CMS Seiten, kommen hier jedoch die Langtextfelder der Kategorien zum Einsatz, welche über das Backend des Shops zu pflegen sind. Die Verteilung der Langtextfelder zeigt sich in folgender Abbildung.
Checkout Prozess
Im Checkout-Prozess des Shops sorgt der schicke Bootstrap Validator mit Echtzeitvalidierung dafür, dass der Kunde noch während seiner Eingabe merkt, ob diese richtig ist. Korrekte Eingaben werden deutlich mit einem grünen und inkorrekte Eingaben mit einem roten Feedback gekennzeichnet.
Damit zukünftig im Checkout A/B Tests gemacht werden können, und die Conversion Rate zu optimieren, wurden die Sites alle mit eigenen IDs versehen. Sodass wir mittels Optimizely AB-Testing betreiben können.
Schlusswort
Alle Beteiligten am Projekt sind sehr gespannt darauf, wie sich die Neugestaltung des Shops von ChocQlate auf das zukünftige Geschäft auswirken wird. Es wird auf Statistiken gewartet, mit denen dann in Zukunft eine kleine Studie zur Steigerung der Gesamtperformance des Shops gemacht werden kann.
