In partnership with ChildFund, we helped bring Swipe Safe to life – a world-first online safety program delivered through an interactive educational app, a vivid digital world and a connected ecosystem of tools that make it easier to teach online safety at scale.
At its heart, the Swipe Safe educational app is designed to give children and young people a hands-on way to understand the online world and develop the skills they need to protect themselves. It brings together interactive storytelling, evidence-based curriculum and an accessible digital experience that can be rolled out across countries, communities and classrooms.
Our role covered the full Swipe Safe ecosystem: a story-driven micro-website, the Swipe Safe progressive web app (PWA), a powerful content management system, a user management dashboard and the visual identity that ties everything together. For ChildFund, this wasn’t just another app – it was an investment in a new, scalable model for online safety education.
From classroom curriculum to digital companion
Swipe Safe began as an educational program developed by child protection experts at ChildFund. Over many years, they refined an evidence-based curriculum focused on supporting learning, literacy and life skills development in the online world. The challenge was to translate this program – originally designed for facilitated delivery – into a self-guided digital experience that young people could explore on their own.
ChildFund wanted a solution that could:
- Reach young people in multiple countries with varying device access and connectivity
- Stay faithful to a proven curriculum while embracing interactivity and play
- Support both individual use (for example, teenagers on their own smartphones) and group or community settings (where devices might be shared)
- Reflect ChildFund’s commitment to inclusion, safety and child-centred design
That’s where our work in non profit design and development and digital product strategy came in. Together with ChildFund, we set out to turn a classroom-based program into a compelling digital companion that could travel much further than any single workshop.
Hands-on learning for a complex online world
From the beginning, ChildFund made one thing very clear: Swipe Safe needed to feel like a world you could step into, not a lecture you had to sit through. The app could not simply be a series of static lessons or quizzes. It needed to be a hands-on learning experience where young people:
- Practice decision-making in simulated online situations
- See the impact of choices in a low-risk environment
- Build literacy around concepts like privacy, consent, cyberbullying and digital footprints
- Develop confidence in navigating social media, chats and online communities
The experience had to feel inviting, safe and playful, while still dealing with serious topics. The design language, user experience and technology choices all needed to support that balance.
Building the Swipe Safe ecosystem
One of the defining features of Swipe Safe is that it’s not just an app. It’s an ecosystem of interconnected touchpoints designed to guide different audiences – children, parents, educators, donors and partners – into the same world with context that makes sense for them.
The Swipe Safe micro-website: A gateway to the world of S.A.M
The first entry point into the program is the Swipe Safe micro-website at swipesafe.org. We handled the website design and full development of this introductory experience, which needed to do several things at once:
- Introduce the Swipe Safe world and its narrative
- Explain the educational purpose in plain, accessible language
- Provide a simple path to download the app or launch the PWA
- Offer pathways for schools, NGOs and community organisations to enquire about larger rollouts
- Act as a landing page for fundraising and non profit marketing campaigns
The micro-website is where users meet S.A.M. – the Smart Access Machine and virtual companion at the heart of the Swipe Safe experience. Rather than framing Swipe Safe as a dry educational program, the website introduces S.A.M. as a character and invites visitors into a near-future world where AI-guided learning and online safety intersect.
Art direction: A world of colour, complexity and possibility
To bring Swipe Safe to life, we needed an art direction that reflected both the freedom and complexity of the internet. Young people move across platforms, conversations and subcultures rapidly; we wanted the visual language to capture some of that fluidity without feeling chaotic or overwhelming.
Expressive colours for an expressive internet
We created a beautifully expressive world of colour that shifts and transforms as the narrative unfolds. Rather than a single static palette, the colours respond to the mood of the moment:
- Warm, optimistic tones for safe exploration and positive choices
- Cooler, more muted hues for moments of risk, reflection or consequence
- Subtle gradients and transitions that mimic the feeling of sliding between different online spaces
This approach echoes the nature of the internet itself – constantly moving, layered and full of possibility. It also gives educators and facilitators an emotional language to reference when discussing choices with young people: “How did this part of the world feel? What did the colours tell you about what was happening?”
Minimalist UI in a near-future world
We paired this expressive visual environment with minimalist interface elements that position the experience in a future that feels close, but not implausible. The UI leans on:
- Clean typographic systems optimised for legibility across languages and devices
- Simplified iconography that can be learned quickly by users with varied digital literacy
- Clear spacing and hierarchy to keep the focus on content and decisions, not decoration
The result is an interface that feels futuristic enough to excite young people, yet familiar enough that it never becomes intimidating. It suggests that this is a world just a little ahead of where we are now – the kind of future that today’s young users will inherit.
Expressive shapes as the visual language of S.A.M.
Flowing out of the UI is a collection of expressive shapes that become the visual embodiment of S.A.M. As these shapes animate, they:
- Move and transform in response to user choices
- Immerse users in the Swipe Safe world without relying on literal avatars
- Give S.A.M. a sense of personality and emotion without becoming overly anthropomorphic
These motion-driven elements are more than decoration. They stand in for S.A.M.’s “body language”, helping young people feel as though they are in conversation with a living system. Over time, as users interact with S.A.M., the movement and behaviour of these shapes subtly reflect the evolving relationship between user and companion.
Interaction design: Teaching how to navigate a new interface
Because Swipe Safe offers a custom interface and a narrative-driven experience, we intentionally stepped away from relying solely on pre-existing app conventions. That does, however, introduce a design responsibility: teaching users how to interact with S.A.M.’s world quickly and enjoyably.
Animation as a teacher
We used animation not just to create delight, but to guide behaviour. For example:
- Micro-animations gently hint at tappable or swipeable areas
- Transitions show where content is coming from and where it “goes”
- Subtle motion cues nudge users towards important actions or decisions
The aim was to make the learning curve for mastering S.A.M.’s UI as short as possible. While the interface is unique, young people quickly understand how it works because the motion language “teaches” them in-context. The process of figuring it out is designed to feel like part of the story rather than a barrier to it.
Hands-on choices, real-world parallels
Throughout the app, users encounter scenarios that echo real online experiences: friend requests from strangers, surprising messages, prompts to share content, and situations where something “doesn’t feel right”. The interface design leans into these as moments of agency:
- Choices are clearly framed, with consequences revealed through narrative rather than simple “right/wrong” feedback
- Reflective prompts encourage users to connect in-app experiences with their own digital lives
- Replayable sections let users try different paths and discuss them with peers, parents or educators
The combination of interactivity, narrative and design creates a learning experience where young people are not just told how to behave online – they get to practise.
Designing for accessibility and inclusion from the outset
From day one, we knew Swipe Safe would be used by many different people around the world. That meant designing for the realities of diverse literacy levels, device types, interaction preferences and connectivity constraints.
Language and literacy considerations
While the core content is text-based, we worked closely with ChildFund to ensure language was simplified wherever possible without losing nuance. The educational content had to be:
- Clear enough for younger users and those with lower literacy
- Respectful and non-patronising for older users and adults
- Structurally consistent to support translation into multiple languages
This required close alignment between content strategy, interface design and the underlying non profit website development and app architecture. Text needed to be easily extracted, managed and updated without breaking layouts or interactions.
Device diversity and performance
Swipe Safe was built with a clear understanding that many users would not have access to the latest smartphones. Especially in developing nations in the Asia-Pacific, we had to assume:
- Lower-end devices with limited processing power and memory
- Variable screen sizes across phones and tablets
- Shared devices within families or communities
To address these realities, we:
- Optimised layouts and interactions for a wide range of screen resolutions
- Kept visual assets compact while maintaining visual richness
- Minimised on-device storage requirements through careful asset management
These constraints directly informed the decision to deliver Swipe Safe as a progressive web app.
Building Swipe Safe as a PWA
Delivering Swipe Safe as a PWA was both a technical and a strategic choice. For ChildFund, it meant greater reach and fewer barriers. For users, it meant an app-like experience without the friction and limitations of traditional app store distribution.
Why a PWA made sense for Swipe Safe
By building Swipe Safe as a PWA, we ensured that:
- Users did not need to go through app stores to get started
- No payment was required to access the app
- The experience felt like a native app, with offline-friendly behaviours where possible
- Updates could be deployed quickly and quietly without users having to manually update
The app’s content was carefully optimised to be compact, requiring minimal bandwidth and storage capacity. That, in turn, allowed Swipe Safe to run on low-end devices and in environments where connectivity might be intermittent or costly.
Built for scale on AWS
To ensure Swipe Safe could grow sustainably, we deployed the ecosystem on Amazon Web Services (AWS), with a focus on serverless architecture wherever possible. This included:
- Using Amazon Cognito for user authentication and management
- Leveraging scalable cloud functions and managed services instead of traditional servers
- Separating concerns between the PWA, CMS, API and dashboard for maintainability
Amazon Cognito enabled a secure and scalable user authentication process that could support a growing user base without manual intervention. As uptake expanded across countries and organisations, the infrastructure was already equipped to handle increased load without compromising performance.
Content management and educator-friendly tools
Behind the Swipe Safe experience sits a robust content management system and user management application dashboard. These tools allow ChildFund and partner organisations to:
- Update curriculum content and localisation over time
- Manage cohorts of users, classes or community groups
- Tailor implementation to local contexts without redeploying the core app
For a project of this scale, it was important that the system not depend on developers for every small update. Our experience in non profit website development and platform design helped us create workflows that feel intuitive for ChildFund’s internal teams and partners, not just technical staff.
Making Swipe Safe speak the right language
Language is one of the most powerful tools for accessibility. For Swipe Safe, localisation was not an afterthought; it was a core design requirement. We designed and built the app so that every element – from interface labels to narrative content – could be translated efficiently and accurately.
Multilingual support across regions
The Swipe Safe experience has been translated into multiple languages, including:
- Bahasa Indonesia
- Khmer
- Español
- Vietnamese
- Tetum
This breadth of localisation allows ChildFund to deploy the same core program across diverse regions, adapting language and some contextual elements while maintaining the integrity of the evidence-based curriculum.
Designing for efficient translation
To keep localisation sustainable, we:
- Separated interface strings from narrative content so they could be managed in a structured way
- Designed layouts accommodating longer words or phrases without breaking
- Provided translation-ready content formats that reduce back-and-forth with technical teams
The result is an app that not only supports multiple languages, but can continue to expand to new ones without major redesigns or redevelopment – a critical factor for international programs.
Evidence-based learning at the core
While design and technology are important, at the heart of Swipe Safe is a commitment to evidence-based learning. Our role was to respect, preserve and elevate the original curriculum rather than overshadow it.
Transforming curriculum into a self-guided journey
Child protection experts at ChildFund had already invested years into refining the Swipe Safe curriculum. Our task was to:
- Translate structured lesson plans into interactive modules
- Preserve key learning outcomes in every adaptation
- Support both facilitated and self-directed modes of use
By embedding the curriculum into a narrative-driven, user-led experience, we allowed young people to engage with the material independently. That independence is crucial for scale: Swipe Safe can be used in classrooms, youth groups, community hubs or at home without always needing a trained facilitator present.
Balancing storytelling with pedagogy
The Swipe Safe story and the character of S.A.M. are engaging, but they serve a clear educational purpose. Each encounter, dialogue and decision point is rooted in a learning objective. The design challenge was to:
- Avoid “gamification for its own sake”
- Ensure that moments of fun are also moments of learning and reflection
- Allow young people to see themselves and their real-world digital habits in the narrative
This is where our experience in non profit marketing intersects with educational design. The same storytelling principles that move donors to act can be used, carefully, to help young people connect emotionally with the importance of online safety.
Different contexts, different usage models
One of the fascinating aspects of Swipe Safe is how differently it is used across regions. The core app is the same, but device ownership patterns and cultural contexts change how people interact with it.
Australia: Individual play and personal devices
In Australia, smartphone ownership among young people is high. That allowed us – and ChildFund – to position Swipe Safe more around individual play and self-paced learning. Marketing efforts in Australia could invite:
- Parents to set up accounts and profiles for their children
- Teenagers to explore the app themselves on their own devices
- Donors to see, first-hand, the program they were supporting
For an Australian audience, the Swipe Safe micro-website at swipesafe.org became a key landing page for email campaigns and social promotions. Instead of asking donors simply to “give”, we could invite them into the experience: download the app, explore the world of S.A.M. and feel connected to the cause.
Developing nations: Shared devices and community implementation
In developing nations such as Indonesia and the Philippines, the picture is more varied. Many young people have access to smartphones or tablets, but:
- Devices may be shared among family members
- Internet access may be intermittent or expensive
- Some communities rely on shared devices in schools or community centres
For these contexts, Swipe Safe needed to support:
- Facilitated sessions where groups move through content together
- Offline-friendly behaviours wherever possible
- Simple login and session management via the user dashboard
Our foundations within the app architecture allowed Swipe Safe to flex between these modes without fragmenting into separate products. It’s one core system, adaptable to different roll-out strategies.
Marketing and engagement: Turning donors into participants
Swipe Safe is a learning tool, but it is also a powerful story for ChildFund’s supporters. One of the project’s strengths is how easily it integrates into broader marketing and engagement strategies.
From donation request to digital experience
When ChildFund launched Swipe Safe to Australian donors, they were able to do so with a refreshing message: not just “donate”, but “join in”. A typical campaign could:
- Send donors a newsletter introducing Swipe Safe and S.A.M.
- Drive traffic to the swipesafe.org micro-website for deeper context
- Invite donors to download the app, create accounts and explore
- Frame any financial contribution as a way of expanding access to this experience globally
For donors, this turns online safety education from an abstract cause into a tangible, interactive program they can see and use with their own families.
A digital asset for long-term campaigns
Because Swipe Safe is a living platform – with content updates, localisation and new rollouts – it also serves as an ongoing anchor for non profit websites and campaigns. ChildFund can continue to:
- Share impact stories tied to specific regions or languages
- Highlight how many young people have used the program to date
- Invite partners, schools and NGOs to integrate Swipe Safe into their own work
This kind of digital asset is invaluable for non profits who want to show long-term, programmatic impact rather than one-off activities.
How our non profit digital services came together
SwipeSafe is a strong example of how our different service areas interlock when we partner with a non profit on a complex digital initiative. Strategy, design, development and communications all had to move in step, so the educational vision, technical architecture and brand story supported each other rather than competing for attention.
At the same time, SwipeSafe is a powerful communications asset in its own right. Through thoughtful story framing, clear messaging and careful campaign planning, it gives ChildFund a tangible way to show the impact of its work. Donors and supporters can see and experience the program, parents and caregivers are invited to become part of the solution for their own families, and potential partners get a concrete picture of what scalable, digital-first programming looks like in practice.
By aligning the SwipeSafe experience with broader non profit marketing goals, we helped ensure it is not just effective in classrooms and youth programs, but equally compelling in boardrooms, inboxes and community meetings. It becomes a shared reference point that different stakeholders can rally around, whether they are learning from it, funding it or helping to roll it out in new communities.
Key takeaways from the SwipeSafe project
Digital safety education needs both depth and delight
Young people are used to highly interactive, visually rich digital experiences. For an online safety program to hold their attention, it has to meet that bar without trivialising serious topics. SwipeSafe shows that it is possible to weave deep curriculum into a playful, expressive world that respects young people’s intelligence.
A strong ecosystem matters more than a single app
The success of SwipeSafe lies not only in the app itself, but in the surrounding ecosystem – the micro-website, the content management tools, the infrastructure and the localisation strategy. Together, they form a coherent whole that can adapt to different countries, partners and use cases.
Accessibility starts at the brief, not at the end
By considering literacy levels, device constraints, bandwidth limitations and language diversity from the beginning, we were able to bake accessibility into every layer of SwipeSafe. This is especially critical for non profit websites and programs that aim to serve communities with diverse needs.
Evidence-based content and thoughtful design are complementary
SwipeSafe demonstrates that evidence-based curriculum and ambitious digital design are not at odds. When handled thoughtfully, design and technology can amplify the impact of expert-developed content, making it more engaging, scalable and adaptable.
A model for future non profit digital programs
SwipeSafe stands as a model for how non profits can use modern web technology, thoughtful design and strategic storytelling to extend the reach of their programs. It shows what is possible when:
- Curriculum experts and digital teams collaborate closely
- Accessibility and inclusion are treated as core requirements
- Infrastructure is built for global scale, not just local pilots
For ChildFund, SwipeSafe opens up new ways to engage young people, parents, educators and donors in the conversation about online safety. For us, it is a reminder of the power of combining non profit website design, non profit website development and non profit marketing into one integrated, future-ready ecosystem.