Chupa Chups - Global brand platform

The case
Organisation
Burst
Client
Chupa Chups (Perfetti Van Melle)
Category
Design / UX
Launch date
Summary
Where Chupa Chups already was a strong and exciting brand in the offline world, their online presence didn’t properly reflect Chupa Chups' global brand idea “Forever Fun”. The new global brand platform has been designed to match the newly developed visual identity for Chupa Chups, while at the same time also taking advantage of today’s technical possibilities such as data capturing and ecommerce.
Project description
The project had two main goals:

1. Design a website that does justice to the global brand idea “Forever fun” and the new global visual identity of Chupa Chups.
2. Build a global platform that can serve as the backbone for all Chupa Chups websites worldwide (eventually around 100), and implement data capturing and ecommerce functionality.

*DESIGN*
The starting point of the design was a study of the 3 different persona’s that Chupa Chups would like to target:

* Teens (13+, need for entertainment, satisfy their curiosity)
* Mothers of teens (need for product information and possibly to buy)
* Customers & public (need for general information and credibility of the brand)

The key insight of the study was that the main thing that both teens and moms have in common in their online behaviour is that they spend a lot of time on social media (on mobile), which resulted in both a conventional top navigation as well as a, Instagram inspired sticky footer linking to key functions and pages on the website. Next we researched the main competitors of Chupa Chups, and based on all this information a style guide was developed.

Finally, all insights were combined and used in the creation of the UX, visual and motion designs (mobile first) for the platform (which were also tested during a user test with the target audience).

*TECHNOLOGY*
The main objective from a technical perspective was that by developing the platform centrally, Chupa Chups would gain a lot of scaling advantages. It enables the brand to implement new features in all markets (100+) with the push of one button, and also adapt quickly to technical and cultural changes. This resulted in one global Drupal 8 set-up, deployed to data centers world-wide serving all those websites.

Secondarily, by centrally implementing data capturing and analysis tools Chupa Chups can monitor individual markets performance, and benchmark them to each other. It also allows them to test out new functionality in only a few markets, learn from that and in case of a success roll it out to other countries.

Finally, ecommerce is currently a hot topic for FMGC brands, as less and less people physically visit grocery stores. By implementing buy buttons in the platform, visitors can add their favourite Chupa Chups products to the basket of their prefered online retailer, such as Amazon, Tesco or Albert Heijn. During the first test in the UK, 6% of all unique visitors clicked on a buy button over the course of 2 months!
Challenges
* Flexibility vs standardisation: All countries and websites (there is a roadmap for 2018 to roll out many more, eventually towards 100 websites) needed to be able to share functionality, while still being able to make the site feel local by being able to add campaigns and promotions and local content.

* A target audience that consists of two very different persona’s: teens and their moms. It was important to test our UX- and visual designs with them to make sure the website appeals to both of them.

* Design and implement a centralised data capturing system to measure all activity on all websites, and report on the KPI’s through local and global dashboards.

* Hosting and availability: The platform needed to be truly global, with server locations on each continent. We created a continuous integration flow that enables us to easily deploy to multiple servers and data centers.
Community contributions
Besides the fact that a global brand like Chupa Chups is a great case for the Drupal community in general:

During the development of the platform (which ran in parallel with our Natuurmonumenten project), Burst developed a headless Drupal 8 and React framework called Headless Ninja (HN). It is fully open sourced and consists of multiple smaller sub modules for easy extension and high performance. By also publishing the Javascript parts on NPM a headless React/Drupal website can be created instantly.

* HN module to send structured data from Drupal to React:drupal.org/project/hn
* HN Javascript package to pull data from Drupal: github.com/burst-digital/hn
* HN React package to show retrieved data in React: https://github.com/burst-digital/hn-react
* HN React Webform package to show forms from Drupal, including all business logic: https://github.com/burst-digital/hn-react-webform

Besides this we submitted several patches for different existing modules.
Screenshot