ChildFund Swipe Safe

A world-first web safety program using story + technology.

Solomon Islands
Vietnam
Cambodia

ChildFund Australia’s Swipe Safe App is a world-first online safety program that brings together interactive storytelling and evidence-based curriculum in an innovative learning tool. The web safety education platform transforms an educational program developed by child protection experts into an accessible and compelling mobile game. Harnessing the power of interactive storytelling, the app provides young people around the world with a learning environment where they can hone their skills through trial, error and exploration.

An ambitious web safety mandate

Context + brief

ChildFund Australia has spent years developing a unique training program for developing countries called Swipe Safe, to educate young people across the Asia-Pacific region about online safety. The program has achieved significant success being delivered by trained facilitators in Vietnam and the Solomon Islands. However, the existing face-to-face approach threatened to limit Swipe Safe’s ability to expand its eSafety mission – especially into more remote areas of the Pacific Islands.

In the midst of the COVID-19 pandemic, ChildFund Australia came to us with the goal of translating the Swipe Safe curriculum into a digital learning tool. For us, simply putting the curriculum online would be a missed opportunity. Instead, our aim was to transform the web safety curriculum into an interactive learning experience – one that was not just widely accessible but deeply engaging.

Mapping challenges + opportunities

Discovery

Our first step in tackling such an ambitious brief was to embark on a Discovery phase. But, as we were in the midst of a pandemic, this Discovery looked slightly different from others we’ve conducted in the past. Instead of gathering everyone together in a room to hash out the details, we instead gathered online – somewhat fitting given we were exploring web safety.

We held a scoping workshop, conducted stakeholder interviews, brainstormed possible solutions, and even began to map out creative territories using Miro, an interactive visual platform.

By the end of Discovery we had developed a deep understanding of online safety, child protection and the Swipe Safe curriculum, as well as a framework for the creative direction and a fantastic collaborative relationship with our partners at ChildFund.

Learning through experimentation

Framework

The exploration of choice and consequence was the foundation of our creative. We wanted to create a world where young people would have the chance to experiment with and learn from their actions. With a series of branching storylines, we would give young people the chance to try, fail, and try again within a safe environment. And, thanks to the real-time nature of the interactive experience, young people would be able to see the long-term impact of their actions in a matter of seconds or minutes – rather than years.

Storytelling meets curriculum

Curriculum + content

At the heart of the Swipe Safe App is a dedication to evidence-based learning. The original curriculum was developed by child protection experts and young people over many years. In making the digital experience, we would need to deliver the same eSafety content in a digital format, while staying true to the ethos of the face-to-face version. In addition, we wanted to transform the education program into a self-guided learning journey which could then be accessible all over the world.

Lucky for us, the educational methodology behind the existing Swipe Safe curriculum – practical, hands-on, experiential – aligned perfectly with many affordances of the digital medium. So we set about creating an interactive story that would allow young people to make choices, see consequences, and experiment with learning outcomes.

This approach required our team to produce a suite of content that reflected the experience young people encounter in their everyday lives.

In the face-to-face program, ChildFund Australia facilitators source online safety examples for discussion from young people themselves. In the digital version, we created those web safety scenarios ourselves, embellishing lessons through dramatised narratives that represent scenarios young people may encounter in their real lives. In this manner, the game was centred around your ability to help other young people navigate the perils of the online world through unfolding conversations.

A personal dialogue about online safety

Creative

When it came to the creative that would bring our web safety content to life, our goal was to create a near-future digital world for young people to explore, set in the year 2030. To help them navigate this new world, young people would be guided by their very own artificially intelligent assistant, or Smart Access Machine – also known as S.A.M.

The entire Swipe Safe digital learning tool was designed as an intimate conversation between the player and S.A.M. We wanted this to be a story of personal growth, and the narrative unfolds in tandem for both our learner and S.A.M. As our young person grasps the art of navigating the online world safely, they also grapple with the responsibilities tied to unfettered digital autonomy. In a parallel nature, over time S.A.M. transforms from a functional system to a sentient being capable of thought and emotion.

Shapes with spirit, colours with conscience

Art direction

To bring the world of Swipe Safe to life, we needed an art direction that reflected both the freedom and complexity of the internet. We created a beautifully expressive world of colour, shifting and changing to reflect the narrative. This was paired with simple UI elements to help position the story in a future not so far away.

Flowing out of that UI was a collection of animated expressive shapes that became the visual embodiment of S.A.M. as a character. These shapes imbued the Swipe Safe world with playfulness while giving our virtual companion a sense of identity as the relationship between a young person and S.A.M. evolved.

Bringing a world of colour to life

Motion design

Motion plays a crucial role in giving the Swipe Safe app a sense of personality and momentum while providing eSafety education. Playing with blur, transparency and depth of field, we brought dimensionality to S.A.M.’s world, helping young people to feel that it extended beyond the phone screen. We also implemented subtle animations across UI elements, giving a further sense that this immersive world was always alive.

Animation was also important in teaching young people how to interact with S.A.M’s world. We wanted each swipe to move players seamlessly through the story, each tap rewarding them for engaging further. Our design and development teams continually fine-tuned these interactions throughout the iterative process to make sure what we were creating was a dynamic and fulfilling experience.

Reaching a diverse audience

Accessibility

We knew from the very beginning of this project that our web safety tool would be used by many different people all over the world. With that comes a whole host of accessibility considerations: literacy levels, device types, interaction aptitude, connectivity and game knowledge.

While the digital content for Swipe Safe is text based, we made sure to simplify the language so that it would be easy regardless of literacy levels. We adopted familiar UI elements to make navigation intuitive, as well as simple visual tutorials demonstrating how to interact. And, we invested time into creating a solution that would work across the myriad of devices commonly found throughout the Asia-Pacific region.

Maximal impact, minimal requirements

Progressive Web App

Accessibility was also a key consideration in our decision to develop the digital Swipe Safe platform as a hyper-optimised progressive web app (PWA). Delivering the program as a PWA meant that we could maximise reach by reducing any potential barriers to engagement. Furthermore, the app’s content was optimised to be compact in nature, requiring minimal bandwidth and storage capacity to play, allowing for usage on the low-end devices typically found in developing nations.

On the other hand, having the choice of using Swipe Safe as an app allowed us to enhance the experience for young people looking for a more immersive gameplay. As a PWA, the entire experience could be enjoyed as a full-screen window, and content would download on boot up so that young people were able to engage offline even after losing internet connectivity.

A global web safety education platform

Localisation

Content localisation stood as a foundational pillar within the digital transformation of the Swipe Safe initiative, as our objective was to establish a framework enabling ChildFund Australia to seamlessly translate the program into any desired language. We were also excited by the potential to contextualise within languages, including the ability to localise certain content elements, like adjusting character names and slang to those popular in a particular region.

Localisation + translation

Content management

Given the sheer volume of content involved in this project, and the need for localisation, creating a robust content management system (CMS) was crucial. Unlike other educational games we’ve made in the past, this web safety platform is almost entirely comprised of text. And every bit of text displayed in the game would need to be changeable from within the CMS.

As well as simple text fields and media uploads, we needed a system that could handle the complexity of branching narratives, language colloquialism and online media snippets. We invested a significant amount of time in refining the CMS such that it would be easy and efficient for editors and translators from ChildFund to be able to add, change and remove content as needed.

Scalability + maintainability

Automation

ChildFund Australia’s vision for the Swipe Safe App is one of the most ambitious we’ve worked to deliver, both in terms of content volume and potential reach. To ensure future-proofing of the application, we deployed the ecosystem on Amazon Web Services cloud infrastructure, using Amazon Cognito to manage the pool of users expected. This enabled a scalable user authentication process, setting the foundation for accommodating even the most substantial user loads. The efficient management of user profiles, authentication, and data handling, will play a pivotal role in maintaining a high level of performance even as the user count soars past the 1 million mark.

We also developed specific continuous integration and development (CI/CD) processes to ensure not just maintainability but scalability of the eSafety education platform moving forward as future versions were released and features were iterated upon.

This approach allowed us to automate most of the deployment process, shortening the timeframe between feature development and public release. It also allows us to manage and streamline the content input and testing process so that any time an update is made it can be received by players instantly. Any changes that the ChildFund Australia team make in the CMS would thus be reflected within the app in a matter of seconds, reducing the level of knowledge required to maintain and extend the digital learning tool.

Empowering young people all over the world

Roll out

We’re proud to announce that the Swipe Safe app will be released later this year. Piloted initially by ChildFund Australia in Vietnam and the Solomon Islands, before being translated into Khmer and Lao in preparation for the eSafety tool’s rollout in Cambodia and Laos.

If you know a young person who would benefit from the online safety app, are interested in implementing the digital learning tool in your own programming, or want to support Swipe Safe in reaching more young people – there are many ways to get involved. Just send an email to creative@s1t2.com and we’ll be delighted to explore any and all possibilities.