School Cents Online Modules

Boys and Girls Club of Canada and Social Research and Demonstration Corporation

“School Cents: Know your dough so you can go!”

In partnership with the SRDC, BGCC came to us with a mission: to create online financial literacy resources in an engaging fashion for at-risk youth. Our answer to this challenge? Use storytelling, design it with linear modules so that information is read in sequence, while using some of the latest browser technology.

The Story

When BGCC approached us with this project, we had an “Aha!” moment–we could visualize exactly how technology could be used to deliver an engaging experience for our youth audience.The School Cents Online Modules aim to test the effectiveness of new, online financial literacy resources related to postsecondary education.

Fully loaded to fully engage

The project required us to take a great deal of information and make it exciting. Our approach was to create characters that youth could relate to as their peers and develop an engaging digital experience. Built using WordPress, Bootstrap, AngularJS and subtle parallax effects, we were able to give SRDC and BGCC a flexible platform for delivering various interactive content. Initial feedback from our youth focus groups have confirmed that we are on target.

Keeping content digestible

We knew that the financial literacy resources were the key factor in this project. Alongside our visual design, we worked with SRDC to ensure that the content was kept bite-sized and digestible. As the user learns through the site, new resources are unlocked making their experience advance in a linear progression.

Made to measure

A key requirement for the project was accountability. The ability for SRDC to obtain user feedback and reports was critical. We used an array of methods including video, calculators, surveys, facts, and drag and drop actions to entice youth to participate throughout the modules.


  • Adobe Creative Suite
  • WordPress
  • HTML5
  • CSS/CSS3
  • PHP
  • MySQL
  • JavaScript
  • AngularJS
  • Third-Party API Integration

The Team

Honrio Cham
Project Lead

Zhibin Huang
Systems Developer

Adrian Luo
Front-end Designer & Developer

Chantal D'Silva
Graphic Designer

James Rodgers
Quality Assurance

The Outcome

We always believe that content is king and should drive our implementations. In this case, we found that the delivery of our subject matter was equally important. We leaned on the experience and expertise of our development and design teams to use technology to bring the content to life. It’s a joy for our team to be involved in creating materials that help to better our future generations.