The Alchemy of a Badge

We have been rolling out a gazillion things in the past month here at Mozilla, with the Summer Code Party campaign kicking off and it has been a while since I blogged here. Well this week it was time for a retreat as I traveled up to Maine to work with Erin on badges and assessments.

We took as a basis all the wonderful web literacy work Doug Belshaw and Michelle Levesque have been doing, as well as everything that  we have learned so far from people around the world using our tools. What we tried to do is develop an assessment system that will allow us to issue badges within the next months across our tools.

The process involved a lot of post-it and marker alchemy and for that reason I have named this post “The Alchemy of a Badge”. (which is probably me being biased as a game designer and somewhat inspired by playing too much of Magic The Gathering and Skyrim.)

In plain English that means I will cover some first ideas about assessment.

The Alchemy of a Badge

Alchemy is an art similar to chemistry or cooking, that involves mixing elements together to create potions. These potions might even result to some kind of inner revelation or even an enlightenment of some sort.

I have similarly imagined the art of creating a badge; There are many different elements you include in making a badge , many different ways you mix them all together and at the same time the whole process is part of something bigger, a system of other badges if you will. At the end you have discovered something new about yourself.

In this way badges become meaningful and valuable objects that demonstrate a rich learning experience and are worth pursuing and showcasing.

Poetic thoughts aside, it is time to directly dive into the types of assessments we are considering to create the alchemy of a badge.

1) Granular Skills Badges; These badges are assessed within tools and connect to specific skills i.e. in Thimble a learner can replace existing code, for example change the links or text within the following <img> tag, to get the Image Wrangler Badge.

The goal here is to get feedback as you go and keep you motivated. The metaphor we used with Erin when discussing this type of badge was linked to running, (it was no accident that we were actually running while we were having this discussion). Often when you run, you might feel the need to get cheered up when you have passed a high hill or you are half way to the end line. Well imagine these badges acting in a similar fashion. They are there to make sure you know what you are doing each step of the way and that you push forward.

Here are some ideas for granular badges, based on the embedded assessments we want to build in Thimble (names are placeholders).

  • edit <iframe>, <audio> (Media Wrangler)
  • edit  <p>, <h1, h2, h3…> (Text Wrangler / HTML Editor)
  • edit  <a> (Hyperlinker / Link Wrangler) (src = Attributer)
  • edit  <style> positioning (CSS Positioner)
  • edit <style> hex numbers/color (CSS Rainbow Bright)
  • edit  <style> fonts/sizes (CSS Texter)

2) Peer badges: For this first phase these badges are assessed by mentors and peers who give endorsements, ratings against rubrics and provide suggestions for improvements. For the second phase we are imagining granular badges being part of peer badges, for example when unlocking the Image, Text and Media Wrangler from above you can pledge for a bigger badge such as the HTML Tycoon.

A key element for the success of peer badges is to have mentorship baked in our platform, a great example being Army of Awesome. (this is something that I plan on writing more about soon.)

Below are some ideas for peer badges, based on Doug Belshaw’s latest list as it can be found here. (names are placeholders)

  • HTML Tycoon
  • CSS Super Styler
  • Remixer
  • Licensee
  • Storyteller

3) Webmaker badges A combination of peer, self and granular skill assessments, these badges aim to highlight mastery in key Webmaker skills such as authoring, exploring and protecting. Meanwhile they provide the opportunity for learners to take on identities and discover new learning pathways. The goal for them being to ultimately understand more about themselves and become self directed learners.

Below are some ideas for Webmaker badges, again this is based on Doug Belshaw’s latest list as it can be found here and they are listed in the order that we plan to roll them out. ( we also experimented with animal names, was it the wild life of Maine? keep in mind that those are placeholders for now)


  • Being expressive, creative and constructive on the Web.
  • Participating in the global, digital exchange of methods and resources with a respect for the creative work of others.
  • Navigating and understand the community, culture and digital life the Web offers.
  • Using various digital spaces to learn about, question and evaluate human perceptions and actions.

  • Safely and securely participating in self-expression and civic duties.
  • Protecting the Web as a free and open public resource is a civic responsibility.
  • Claiming solidarity for protective actions.
  • Communicating about and participating in digital life in a respectful manner.
  • Recognising and adhering to the ethics or code of practice of one or more online communities.
  • Confidently and creatively attempting to solve technical and social problems through incremental and iterative approaches.
  • Thinking on multiple levels of abstraction and modularization.
The Future:
We also envisioned an ultimate version of this where one could simply select different percentages of assessments (as well as having self assessment be a more critical part of the process).  For example a Webmaker badge could be composed by 70% peer assessed badges, 12% granular skill badges and 18% could be self-assessment badges. Essentially, the community could tweak these percentages based on the evolution of the assessment and what they would think is important to be assessed.
In conclusion, this is just the beginning of us designing badges and assessments for our webmaker initiatives, so there is going to be a lot of iteration happening and we are looking *so* forward to comments and suggestions.
Comments powered by Disqus