BGCC Badge Centre

Boys and Girls Clubs of Canada

“Getting the youth all badged up”

It wasn’t easy. Being one of the first to tie in Mozilla Open Badges to a national afterschool program like the Boys and Girls Clubs of Canada, we were up against the challenge of integrating new technology while having to stick close to a list of long-standing corporate guidelines. But it’s always a thrill to jump head-first into a new challenge. And jump we did!

The Story

For more than 100 years, the BGCC has been helping young people discover, develop and achieve their best potential. With a wide range of stakeholders including youth, volunteers, mentors, employees always working hard to develop their core skills and push themselves towards greater learning, BGCC wanted to find a fun and interactive way to formally recognize and verify these achievements; enter Mozilla Open Badges. Open Badges is a new online standard to recognize and verify learning. Companies and institutions create badges for you to earn, and once you’ve earned it, it’s yours forever to boast about in your Open Badges Backpack and across the web.

What we thought: what better way to recognize and encourage BGCC stakeholders than this?

Working with a new Mozilla platform

Our development team really had to roll up their technical sleeves and dig into the Mozilla Open Badges Community to design and configure the experience BGCC wanted its stakeholders to have. Being one of the first to integrate Open Badges for this application, there was little to build from and our time was spent mostly on trials which (thankfully) led to great discoveries! We’re honored to have been able to contribute to such a meaningful concept.

Build it and they will come

BGCC needed a landing page that was unique from their main website, followed their key branding elements, and included all of its Open Badge offerings. In short they wanted everything, but wanted it to be kept simple. Our design team deployed a one-pager that kept everything simple and on point, to create an effective user experience.

Getting it out there

We accomplished the technology and design part. Now how were we going to build awareness? At launch time, we filled the press with news about the BGCC Badge Centre by cross promoting it with Rogers Raising the Grade and George Brown College Badge programs, helping BGCC capture a maximum reach of its intended audience.


  • Adobe Creative Suite
  • HTML5
  • CSS/CSS3
  • JavaScript
  • Third-Party API Integration

The Team

Honrio Cham
Project Lead

Jason Fang
Systems Developer

David To
Front-end Designer and Developer

The Outcome

Nothing beats a project that brings so much positive return to society, and at the same time, enables us to push our tech development envelope. Stay tuned for more badges, as we hear BGCC plans on adding more programs on a regular basis.