Following our successful collaboration in 2015, DesignBridge partnered with Cyber-Duck once more. Together, we launched Cadbury’s festive Advent Calendar campaign! We invited players to compete against friends and family with a new series of themed questions every day, until the 24th of December.
What we did
- Technology Implementation
- Laravel
- Vue.JS
Objectives
Cadbury wanted to create an experience that’s aligned along their powerful slogan: ‘Share Good Times’.
The physical calendar would feature Cadbury’s Heroes; the digital experience would integrate with the physical and focus on sharing an experience with friends, rather than brand awareness.
DesignBridge managed the user experience, design and marketing; Cyber-Duck would power the technical implementation and support. Our objectives were to:
Develop a multiplayer quiz with a new set of questions each day, with an app-like experience.
Ensure the quiz had a scalable technical architecture, so it could perform with up to 800,000 visitors.
Measurably increase the engagement with the quiz throughout the month.
Agile test-driven development
Applying the agile methodology, our technology team developed and deployed the quiz in just 7 weeks.
We worked closely with DesignBridge in a collaborative, flexible way; prioritising the features for the project from a full Agile backlog. Progress was charged with daily stand-ups and weekly show-and-tells with DesignBridge.
Our technical team built the backend of the quiz in Laravel, which stored the game logic server-side. Using Vue.JS, we created a Single Page App (SPA).
Some components were built as a Progressive Web App (PWA), such as detecting the capabilities of the device and when a user went online.
We took advantage of these PWA capabilities and Vue.JS to create a fluid game, that felt more like an app than a website.
Vue.JS technology also meant we could pre-load all the assets, so the experience was quick and responsive, once a user started to play. As the quiz incorporated diverse asset types, such as video, this was important.
Interacting with the quiz database
We built a database to store the quiz questions, answers and days; then the users, groups, user / group scores, and a way to share the logic with friends (using a unique link).
So the web could interact with this database, we developed a custom API that validated all data end-points and could retrieve a user’s running answers each day through cookies.
Cadburys projected that 800,000 calendars would be sold. So, we had to prepare for a staggering number of quizzers.
We architected scalable hosting on Amazon Web Services (AWS), using Cloudflare for caching and as a Content Delivery Network (CDN).
The final quiz
A user is invited to sign-up for the quiz once they’ve purchased a chocolate Advent Calendar. This user becomes the host; they are encouraged to add a group of friends or family to compete against.
Just like a traditional Advent Calendar, a user could open a door and be asked fifteen themed questions each day. We developed a logic that could cope with releasing new quiz questions day-by-day. It had an engaging countdown timer for impatient users that couldn’t wait to answer another question.
Reminders, push notifications and a leaderboard were created to engage users consistently. Players’ score would be calculated day-by-day and compared to their peers. With Design Bridge, we launched Quizmass in December 2019.
