Childfund Swipe Safe Web Safety App

An ambitious mandate for online safety + digital literacy

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 delivery limited the program’s ability to be implemented at scale – especially into more remote areas of South-East Asia and 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 an expansive digital learning tool. One that would be beneficial for reaching more children and young people, especially in locations without qualified facilitators to deliver the face-to-face program or those lacking extensive online safety knowledge and skills. 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 conducted in the past. Instead of gathering everyone together in a room, we instead gathered online – somewhat fitting given we were exploring web safety.

We held a scoping workshop, conducted stakeholder interviews, brainstormed possible solutions, and 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.

An intimate conversation about online safety

Creative

When it came to the creative, our goal was to create a futuristic digital world for young people to explore. To help them navigate this new world, young people are 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. Over time, S.A.M. transforms from a functional system to a sentient being. This character development is designed to mirror the learner’s journey, symbolising the deepening awareness and maturity of a young person throughout life.

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 that shifted and transformed to reflect the narrative. This was paired with minimalist UI elements to help position the story in a future not so far away.

Flowing out of the 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 over time.

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 dynamism while providing eSafety and online engagement.

Playing with focus, translucency 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 navigational and 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. Because the UI did not entirely rely on pre-existing conventions, we wanted to ensure that the learning curve for mastering S.A.M’s unique interface was quick and easy.

Our design and development teams continually fine-tuned these interactions throughout the design process to make sure what we were creating was an enjoyable 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 more immersive gameplay. As a PWA, the entire gameplay could be enjoyed as a full-screen experience, and content would download on boot up so that young people were able to engage and play offline even after losing internet connectivity.

A globally accessible education platform

Localisation

Content localisation stood as a foundational pillar of Swipe Safe’s digital transformation, as our objective was to enable ChildFund Australia to seamlessly translate the program into any desired language for wider use worldwide. As a result, we were able to create features that allowed deeper contextualisation within a region, gaining the ability to localise language as well as specific content elements, such as adjusting character names and slang to those popular in a particular region.

Enabling translation + localisation

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 needed to be editable 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

To ensure future-proofing of the application, we deployed the suite of apps on Amazon Web Services cloud infrastructure, using Amazon Cognito to manage the pool of users. This enabled a scalable user authentication process, setting the foundation for accommodating even the most substantial of user loads. The efficient management of user profiles, authentication, and data handling, plays 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 as future versions are released and features iterated upon.

This approach allows the team 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 administrators make within 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.

Play-based learning

Framework

Allowing children and young people to explore choice and consequence was at the heart of our creative. Through this, 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 experiment, learn and improve all within a safe learning 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 with a focus on supporting learning, literacy and life skills development.

In developing the digital experience, our goal was to faithfully evolve the educational program into a self-guided learning journey, enabling individuals to engage with the material independently, without the necessity of a facilitator’s guidance.

The educational methodology underpinning the existing Swipe Safe curriculum – practical, hands-on, experiential – naturally complemented the many advantages of the digital medium. Leveraging this alignment, we embarked on creating an interactive story that enables young people to make choices, observe consequences, and explore various learning outcomes.

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

In the face-to-face program, ChildFund facilitators sourced online safety scenarios for discussion from the young people present. In the digital version, we designed a series of web safety scenarios, embellishing lessons through stories that represent circumstances young people may encounter in their real lives. In this manner, the game experience was centred around a person’s ability to help others navigate the online world through unfolding conversations.

Empowering young people all over the world

Roll out

The Swipe Safe educational app is now available. Initially piloted by ChildFund in Vietnam and the Solomon Islands, it is in the process of being translated into Khmer, Lao and French, while gearing up for implementation in other parts of South-East Asia and the Pacific Islands.

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.