Case study

Gamifying life-saving skills for youth

Making award-winning first aid education fun, engaging, and impactful with gamification

Client: St John Ambulance Sector: Education
Highlights
100,000

learning minutes spent

8,500

completed badges

12-16

year olds completing the badges

The brief

St. John Ambulance aimed to extend their in-person first aid training to a broader audience, particularly targeting young people aged 12-18 who might not engage with traditional training methods. The challenge was to balance educational content with engaging, gamified elements to make learning both fun and impactful.

In collaboration with iDEA, micro-learning was chosen as the ideal approach. This allowed us to break down essential first aid skills into bite-sized, interactive modules that could be easily accessed and completed by young learners.  

What we did
  • Storyboarding
  • Sessions with young people from St Johns ambulance group
  • Illustrations

Visit the website
Walkthrough of a module of the First Aid Badge on mobile

The solution

To start, we focused on creating detailed storyboards and wireframes to outline the user journey and ensure a seamless, intuitive learning experience. These visual aids helped us map out each step of the digital badge, from introducing first aid concepts to interactive assessments. We then conducted several interactive sessions with young members of the St John Ambulance groups. Their feedback was invaluable, offering real-world insights into how the content could be made more engaging and relevant. This direct engagement with the target audience ensured that the final product would resonate well with the intended demographic.

In addition, we developed a series of vibrant and engaging illustrations to enhance the learning experience. These illustrations were designed not only to explain first aid concepts clearly but also to make the learning process visually appealing and enjoyable. By integrating these elements into the badge, we aimed to create a more immersive and interactive experience that would keep young learners engaged. This approach ensured that the educational content was both accessible and appealing, effectively balancing serious learning with elements of fun and engagement.

What we did

  • Accessibility: The badge can be accessed on any device, including smartphones, tablets, and computers, ensuring that learners can engage with the content from anywhere in the world.
  • Gamification: By incorporating gamification elements, such as interactive scenarios and quizzes, we made the learning process engaging and motivating for young learners.
  • Scalability: The platform is designed to handle a large number of users simultaneously, ensuring a smooth experience even as the user base grows.

The tech behind the solution

When considering our approach to the build, we took into account the need for different question styles to ensure that as young people progressed through the game, they were absorbing the necessary skills to provide first aid.

We decided to build the game using a JavaScript front-end framework that would create a ‘single page’ experience and allow for complex state management. We chose Alpine JS, which allowed us to provide a mix of multiple-choice questions, image selections, ordering questions, and more, meeting the requirement of it being a gold badge on the iDEA website. This also allowed users to leave the game and return later, picking up where they left off.

Once the solution was complete, we used an API to connect to the iDEA platform and integrate the game into other parts of the system, such as the user account.

Technology we used
  • Development using AplineJS
  • Intergration with the idea platform and APIs
iDEA logo on a blue background
We are very grateful to the Digital Wonderlab team who were so generous with their time and creativity whilst helping us to bring St John Ambulance First Aid training to life, shaping it into a fun and informative bite-sized module for iDEA.org.uk learners everywhere to enjoy for free.
Polly Morgan , CEO
iDEA

The impact

By empowering young individuals with the knowledge to act in emergencies, we are not only equipping them with the skills to save lives but also instilling a sense of responsibility and civic duty. Our collaboration with St. John Ambulance ensures that the content is medically accurate and up-to-date, while our partnership with iDEA guarantees that the delivery is at the cutting edge of digital education technology. Don't just take our word for it—the badge was awarded Best User Experience at the TBE Awards, showcasing the success of this collaboration.

 

Conclusion

This badge represents more than just an educational tool; it is a beacon of how technology can be harnessed to foster a safer, more prepared society. We believe that by inspiring young people to learn these crucial skills, we are contributing to a culture of care and readiness that transcends individual communities and impacts global well-being.