We Are Tilt & Collingwood Learning

Smashed Online

Life-changing, world-reaching interactive storytelling

Branded Content - Public Service & Activism / Nominee

We Are Tilt & Collingwood Learning

Branded Content - Public Service & Activism

Nominee

How can we help ten million young people worldwide better understand the risks of underage drinking? Paul Mallaghan

Q: Can you briefly describe your project and the concept behind it?

A: Smashed Online is a life-changing digital experience designed to shift attitudes and understanding around alcohol for millions of young people, worldwide. Based around a central interactive film, Smashed allows viewers to go inside the story and ask, “what would I do differently?” We aimed to create an experience that young people would choose to engage with – with all the storytelling magic of a great Netflix show.

Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?

A: We needed a flexible design system and platform that could adapt to multiple countries and languages. Each version of the site has its own bespoke interactive film. We also needed a robust hosting solution that could handle access from multiple locations, with periods of heavy usage. This went beyond our previous uses of the WP platform, pushing the boundaries of what we could create and deliver for a truly international audience.

Watch

Q: What were some of your biggest learning and takeaways from this project?

A: The extent to which WordPress can be scaled to create an optimised experience. There were stumbling blocks, and we had to investigate caching as we launched in more countries. More broadly, we learned that–despite cultural nuances and language changes–the principles of a great story are universal. In every country, the dynamics between the characters remains largely intact. Our tech approach is designed to uphold the purity of that core story.

Q: What web technologies, approaches, tools, or resources did you use to develop this experience?

A: Smashed Online is built as a Wordpress Multisite experience, with technologies such as Video.js, Sass, Node.js and NPM. It was designed in Adobe XD. As the site is delivered globally in several languages we made use of VPNs for testing, and CDN for optimising delivery of content. We chose WP Engine as the hosting provider that offered global reliability. A custom dashboard allowed the client to view and visualise real-time usage data.

Q: How did the final product meet or exceed your expectations?

A: Since launch, we have reached more than 1.1 million young people worldwide – well on target for 10 million by 2030. 95% of young people surveyed report that they are less likely to drink alcohol after the experience. Overall feedback from teachers and young people is that they haven't seen an educational experience quite like this ever before.

Q: Why is this an exciting time to create new digital experiences?

A: The tools we use to bring ideas to life are becoming more powerful, almost by the day. AI is a key driver in this explosion of creative opportunity, and harnessing this potential will lead to new and innovative experiences. Our team's appetite for creative digital experimentation means we're excited to explore and use these new capabilities, enabling our clients to reach new audiences in ways that weren't possible even a couple of years ago.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: The client had developed a clear set of brand guidelines, designed to appeal to a broad range of younger people. We expanded this into a set of principles for the interactive narrative – ensuring that we created something authentic, believable and compelling. Throughout the project, the client and agencies worked together in a beautifully collaborative, supportive way that meant creative ideas were nourished rather than stifled.

Q: What did your initial moodboard, wireframe, or prototype look like? How did those ideas change throughout the design process?

A: Our initial moodboards played around with different tones. How do we get the balance between looking positive and conveying the seriousness of the subject? What colour schemes offer the broadest international appeal? How can we create something distinctive and appealing, without alienating certain ages, genders, cultures etc? As the project developed, we were able to use our experiments to find a happy balance on all of these elements.