ChocQlate creates chocolate products from the pure cocoa bean, using natural ingredients to create a powerhouse of nature. The processed cocoa comes from natural mixed cultures in the middle of the jungle areas of Sri Lanka, Panama and Peru.
The special thing about ChocQlate, apart from the finished chocolate products, are the DIY chocolate gift ideas with ingredients and moulds.
The company's packaging design has already won the iF Design Award and the Red Dot Award.
Initial situation of the project
ChocQlate's old site was a mixture of an online magazine and a shop. The shop and its navigation were strictly geared to a specific purchasing process:
- 1. ingredient set
- 2. chocolate moulds
- 3. toppings
- 4. snacks
With the growth of ChocQlates, however, the product range also expanded, which could no longer be represented in the original, very individual design. Also, the combination of OXID CE 4.6 and Drupal was not responsive and the Wordpress blog for recipes was on an external domain.
For easier handling by the customer, Drupal was chosen for the content, in which OXID was integrated in iFrames. For this, deep interventions were made in the OXID system, which meant that the entire shop could no longer be updated with newer versions.
Project goal
The aim of the project was, apart from eating a lot of chocolate without gaining weight, to carry out a complete relaunch of the website. The following framework criteria were to be fulfilled:
- Responsive design to match the new product, corporate and brand design.
- Creation of new product photos and product videos
- Can be expanded as desired with new categories and products
- Blog on the same domain
- As much freedom as possible for the customer to create content
Implementation
Project management and responsibility for the web design as well as the implementation of the content was Felix Brodbeck from webnuts. The technical integration and implementation of the shop system was done by Michael Felber from Netensio .
Design
The design of the new shop was created to correspond to the usability of the user's habits and still stand out from other shops. The existing brand design of ChocQlate was taken up in order to transfer the brand message and the premium idea of the products into the digital world.
Since chocolate and cocoa are clearly products that are experienced with the senses, it was essential to work with large and atmospheric product images that convey style and emotion.
So in a two-week photo shoot, all the products were photographed anew and 12 new product videos were shot. The photographs were taken by Olga Löffler.
As an icing on the cake, a special icon font was developed for the shop, which is used for the buttons. The start page and the overview page of the shop show the brand world of ChocQlate and present the products in a tasty and emotional world of images.
System development
The Bootox - Responsive OXID eShop Template from Netensio was chosen because of the fast development possibilities and the well thought-out Responsive features. This is based on the latest version of Bootstrap and OXID.
Furthermore, the SEO and Google Merchant Module from Netensio is used as well as the Google Analytics Module from Suabo for e-commerce tracking.
Categories and article pages
Article pages
Since the customer wants to have as much freedom as possible in maintaining the product and category pages and prefers to work with HTML and CSS, the article pages were provided with fields for CMS identifiers in the backend.
The content maintenance of the product pages is therefore done by creating individual CMS pages. The structure looks like the following illustration.
Category pages
The category pages of the shop also benefit from a similar structure. Instead of CMS pages, however, the long text fields of the categories are used here, which are to be maintained via the shop's backend. The distribution of the long text fields is shown in the following figure.
Checkout process
In the checkout process of the shop, the fancy Bootstrap Validator with real-time validation ensures that the customer notices whether his input is correct while he is still entering it. Correct entries are clearly marked with a green feedback and incorrect entries with a red feedback.
In order to be able to carry out A/B tests in the checkout in the future and to optimise the conversion rate, the sites were all given their own IDs. So that we can carry out AB testing using Optimizely.
Conclusion
Everyone involved in the project is very excited to see how the redesign of ChocQlate's shop will affect future business. We are waiting for statistics, which can then be used in the future to do a small study on how to increase the overall performance of the shop.
