ChocQlate maakt chocoladeproducten van de pure cacaoboon, met natuurlijke ingrediënten. De verwerkte cacao is afkomstig van natuurlijke gemengde culturen midden in de junglegebieden van Sri Lanka, Panama en Peru.
Het bijzondere aan ChocQlate, afgezien van de afgewerkte chocoladeproducten, zijn de DIY chocolade cadeau-ideeën met ingrediënten en mallen.
Het verpakkingsontwerp van het bedrijf heeft al de iF Design Award en de Red Dot Award gewonnen.
Aanvankelijke situatie van het project
De oude site van ChocQlate was een mix van een online magazine en een winkel. De winkel en zijn navigatie waren strikt gericht op een specifiek aankoopproces:
- 1. ingrediëntenset
- 2. chocoladevormen
- 3. toppings
- 4. snacks
Met de groei van ChocQlates werd echter ook het assortiment uitgebreid, wat niet meer kon worden weergegeven in het oorspronkelijke, zeer individuele ontwerp. Ook was de combinatie van OXID CE 4.6 en Drupal niet responsief en de Wordpress blog voor recepten stond op een extern domein.
Voor een eenvoudigere afhandeling door de klant is gekozen voor Drupal voor de inhoud, waarin OXID in iFrames is geïntegreerd. Hiervoor werden diepe ingrepen gedaan in het OXID-systeem, waardoor de hele winkel niet meer kon worden bijgewerkt met nieuwere versies.
Doel van het project
Het doel van het project was, behalve veel chocolade eten zonder aan te komen, een volledige herlancering van de website. Aan de volgende kadercriteria moest worden voldaan:
- Responsive design passend bij het nieuwe product, corporate en brand design.
- Creatie van nieuwe productfoto's en productvideo's
- Kan naar wens worden uitgebreid met nieuwe categorieën en producten
- Blog op hetzelfde domein
- Zoveel mogelijk vrijheid voor de klant om inhoud te creëren
Uitvoering
Het projectmanagement en de verantwoordelijkheid voor het webdesign en de implementatie van de inhoud lag bij Felix Brodbeck van webnuts. De technische integratie en implementatie van het shopsysteem werd gedaan door Michael Felber van Netensio .
Ontwerp
Het ontwerp van de nieuwe winkel is zo gemaakt dat het overeenkomt met de gebruiksvriendelijkheid van de gebruiker en zich toch onderscheidt van andere winkels. Het bestaande merkontwerp van ChocQlate werd overgenomen om de merkboodschap en het premium idee van de producten naar de digitale wereld over te brengen.
Aangezien chocolade en cacao duidelijk producten zijn die met de zintuigen worden ervaren, was het essentieel om te werken met grote en sfeervolle productbeelden die stijl en emotie overbrengen.
Dus werden in een twee weken durende fotoshoot alle producten opnieuw gefotografeerd en 12 nieuwe productvideo's opgenomen. De foto's zijn gemaakt door Olga Löffler.
Als kers op de taart werd voor de winkel een speciaal icoonlettertype ontwikkeld, dat wordt gebruikt voor de knoppen. De startpagina en de overzichtspagina van de shop tonen de merkwereld van ChocQlate en presenteren de producten in een smakelijke en emotionele wereld van beelden.
Systeemontwikkeling
De Bootox - Responsive OXID eShop Template van Netensio is gekozen vanwege de snelle ontwikkelingsmogelijkheden en de doordachte Responsive functies. Dit is gebaseerd op de laatste versie van Bootstrap en OXID.
Verder wordt de SEO en Google Merchant Module van Netensio gebruikt en de Google Analytics Module van Suabo voor e-commerce tracking.
Categorieën en artikelpagina's
Artikel pagina's
Omdat de klant zoveel mogelijk vrijheid wil bij het onderhoud van de product- en categoriepagina's en het liefst met HTML en CSS werkt, werden de artikelpagina's voorzien van velden voor CMS identifiers in de backend.
Het inhoudelijk onderhoud van de productpagina's gebeurt dus door het aanmaken van individuele CMS-pagina's. De structuur ziet er als volgt uit.
Categorie pagina's
Ook de categoriepagina's van de winkel profiteren van een soortgelijke structuur. In plaats van CMS-pagina's worden hier echter de lange tekstvelden van de categorieën gebruikt, die via de backend van de winkel moeten worden onderhouden. De verdeling van de lange tekstvelden is weergegeven in de volgende figuur.
Afrekenen
In het afrekenproces van de winkel zorgt de fancy Bootstrap Validator met real-time validatie ervoor dat de klant merkt of zijn invoer correct is terwijl hij deze nog aan het invoeren is. Correcte inzendingen worden duidelijk gemarkeerd met een groene feedback en onjuiste inzendingen met een rode feedback.
Om in de toekomst A/B-tests in de kassa te kunnen uitvoeren en het conversiepercentage te optimaliseren, kregen de sites allemaal een eigen ID. Zodat we AB testen kunnen uitvoeren met Optimizely.
Conclusie
Iedereen die bij het project betrokken is, is erg enthousiast om te zien hoe de herinrichting van de winkel van ChocQlate de toekomstige activiteiten zal beïnvloeden. Wij wachten op statistieken, die dan in de toekomst kunnen worden gebruikt om een kleine studie uit te voeren over hoe de algemene prestaties van de winkel kunnen worden verbeterd.
