ChocQlate crée des produits chocolatés à partir de la fève de cacao pure, qui, avec des ingrédients naturels, deviennent un concentré de force de la nature. Le cacao utilisé provient de cultures mixtes naturelles au cœur des jungles du Sri Lanka, du Panama et du Pérou.
La particularité de ChocQlate est, outre les produits finis en chocolat, les idées de cadeaux en chocolat à réaliser soi-même avec des ingrédients et des moules.
Le design de l'emballage de l'entreprise a déjà remporté l'iF Design Award et le Red Dot Award.
Situation de départ du projet
L'ancien site de ChocQlate était un mélange entre une sorte de magazine en ligne et une boutique. La boutique et sa navigation étaient strictement axées sur un processus d'achat spécifique :
- 1. kit d'ingrédients
- 2. moules à chocolat
- 3. toppings
- 4. snacks
Avec la croissance de ChocQlates, la gamme de produits s'est également élargie, ce qui ne pouvait plus être représenté dans le design initial très individuel. De plus, la combinaison d'OXID CE 4.6 et de Drupal n'était pas responsive et le blog Wordpress pour les recettes se trouvait sur un domaine externe.
Pour faciliter l'utilisation par le client, Drupal a été choisi pour le contenu, dans lequel OXID a été intégré dans des iFrames. Pour ce faire, des interventions profondes ont été effectuées dans le système OXID, ce qui a rendu impossible la mise à jour de l'ensemble de la boutique avec des versions plus récentes.
Objectif du projet
L'objectif du projet était, outre le fait de consommer beaucoup de chocolat sans prendre de poids, de procéder à une refonte complète du site web. Les critères de base suivants devaient être remplis :
- Design responsive adapté au nouveau design des produits, de l'entreprise et de la marque.
- Création de nouvelles photos et vidéos de produits.
- Extension possible à volonté avec de nouvelles catégories et de nouveaux produits
- Blog sur le même domaine
- Liberté aussi grande que possible pour le client de créer des contenus
Mise en œuvre
Felix Brodbeck de webnuts était responsable de la direction du projet et du design web ainsi que de la mise en œuvre du contenu. L'intégration technique et la mise en œuvre du système de boutique ont été réalisées par Michael Felber de Netensio .
Design
Le design de la nouvelle boutique a été conçu de manière à correspondre aux habitudes des utilisateurs tout en se distinguant des autres boutiques. Le design de la marque ChocQlate a été repris afin de transposer le message de la marque et l'idée de qualité des produits dans le domaine numérique.
Le chocolat et le cacao étant clairement des produits qui se vivent avec les sens, il était indispensable de travailler avec des images de produits grandes et évocatrices qui transmettent style et émotion.
Tous les produits ont donc été rephotographiés et 12 nouvelles vidéos de produits ont été tournées au cours d'une séance photo de deux semaines. Les photographies ont été réalisées par Olga Löffler.
Pour couronner le tout, une police d'icônes spécifique a été développée pour la boutique et utilisée pour les boutons. La page d'accueil et la page de présentation de la boutique illustrent l'univers de la marque ChocQlate et présentent les produits dans un monde d'images savoureuses et émotionnelles.
Développement du système
Le modèle Bootox - Responsive OXID eShop de Netensio a été choisi en raison de ses possibilités de développement rapide et de ses caractéristiques Responsive bien pensées. Celui-ci est basé sur la dernière version de Bootstrap et OXID.
En outre, le module SEO et Google Merchant de Netensio a été utilisé, ainsi que le module Google Analytics de Suabo pour le suivi du commerce électronique.
Catégories et pages d'articles
Pages d'articles
Comme le client souhaite avoir la plus grande liberté possible dans la gestion des pages de produits et de catégories et qu'il préfère travailler avec HTML et CSS, les pages d'articles ont été dotées de champs pour les CMS Idents dans le backend.
La gestion du contenu des pages de produits est donc effectuée par la création de pages CMS individuelles. La structure se présente comme dans l'illustration suivante.
Pages de catégories
Les pages de catégories de la boutique ont également bénéficié d'une structure similaire. Au lieu de pages CMS, on utilise ici les champs de texte descriptif des catégories, qui doivent être gérés via le backend de la boutique. La répartition des champs de texte descriptif est illustrée dans la figure suivante.
Processus de checkout
Dans le processus de validation de la boutique, l'élégant Bootstrap Validator avec validation en temps réel veille à ce que le client remarque encore pendant sa saisie si celle-ci est correcte. Les saisies correctes sont clairement signalées par un feedback vert et les saisies incorrectes par un feedback rouge.
Afin de pouvoir effectuer à l'avenir des tests A/B dans le checkout et d'optimiser le taux de conversion, les sites ont tous été dotés de leurs propres identifiants. Nous pouvons ainsi effectuer des tests AB avec Optimizely.
Mot de la fin
Toutes les personnes impliquées dans le projet sont impatientes de voir l'impact de la refonte de la boutique de ChocQlate sur les activités futures. Nous attendons les statistiques qui nous permettront à l'avenir de faire une petite étude sur l'augmentation de la performance globale de la boutique.
