We are all made of stars; designing constellations for mozbadges

A few weeks ago we talked about Alchemy as a metaphor for designing the mozbadges assessment system. Now that we have reached the middle of August and that the perspective of spending a few days away from the big city to enjoy say Mediterranean waters and a sky full of stars, it seems like a good time to write about constellations - as one should. Constellations of badges that is. In specific, I will share in this post some sketches and ideas for what Mozbadges we want to release in the course of the next year- and yes they look like constellations.

Why constellations you might ask? Well aside from being inspired by summer escapades and the fact that I played A LOT of Skyrim this past winter- we always describe web literacies in the Learning team as a system; A system of interconnected and ever-evolving skills. A system with many entrance points and different pathways to mastery. One defined by the learners’ choices and what the community values as important. A system that in my head looks like a constellation of badges.

Skyrim Skills Constellation, Image by Eric Guzman

Enough with the dreamy part of the post and time to get into specifics; we are imagining three release phases for rolling out Mozbadges. In the sketches below I will show some first ideas of how the system will evolve throughout each phase (low, medium and high bar). Then I will guide you through the mozbadges that we are considering for the first “low bar” phase.

So, first thing first; in the “low bar” we are designing a constellation of stealth (automatic) mini badges issued through Thimble & Popcorn, that accumulate to lightweight skill badges like a badge recognizing HTML mastery. Additionally we are suggesting peer badges that can be issued directly from one peer to another via email. The web literacy track that we are assessing through this phase is “Author”. (Check Doug’s post for more on the other tracks)

Below an image illustrating the constellation (click here to see it bigger on Flickr)

For the next phase, what we call “medium bar”, we are designing a constellation of stealth (automatic) mini badges that are issued through Thimble and Popcorn, that accumulate to bigger skill badges recognizing for example CSS & HTML mastery. These badges will accumulate in different levels, will be assessed by peers through endorsements and rubrics and will connect to a big web literacy badge such as the Owl (Authoring) badge (see below) and the Dolphin (Exploring) badge.

Below an image illustrating the constellation (click here to see it bigger on Flickr)

For the last phase, what we call “high bar”, we are designing a system of different constellations made of stealth (automatic) mini badges, peer assessed skill badges  and web literacy badges . Those badges are connected and once a learner obtains a series of them she unlocks new learning pathways. During this phase we will design assessments for all the web-literacy tracks (Authoring, Exploring, Building, Communicating,Protecting).

Below an image illustrating the constellation (click here to see it bigger on Flickr)

Now that you got a glimpse of the big picture for each of these phases, you can also read below to get a better idea for the specific mozbadges that we are considering creating for the “low bar” phase. 

*Alert: these are presented in working format, they are preliminary ideas and names for mozbadges subjected to iteration and community input. Please be oh so kind and leave your feedback in the comments at the end.

MINI BADGES: These are issued through Thimble & Popcorn, to provide the learner with dynamic feedback as they go and have small value in the ecosystem.

In this category, here are some sample mozbadges;
General badges
1) #icanfixstuff
    •    What is it: a badge that recognizes fixing broken code (i.e. Map of Arcade)
    •    How do you get it: a user fixes syntax errors such as open tags etc.and gets this badge on publish/ validation
2) #andanotherthing
    •    What is it: a badge that recognizes adding explanatory comments into a page
    •    How do you get it: a user adds new comments in the page and gets this badge on publish/ validation
3) #icanspeakyourlanguage
    •    What is it: a badge that recognizes adding/editing accessibility content to a page
    •    How do you get it: a user adds/edits tags that ensure accessibility for hearing (transcripts, volume options), vision (descriptive alt text tags, type size), mobility (large links) and gets this badge on publish/ validation


HTML mini badges
4) #imagemaker
    •    What is it: a badge that recognizes adding an image/ using the <img> tag into a page
    •    How do you get it: a user adds a new <img> tag or changes the link within the code
5) #mediamaker
    •    What is it: a badge that recognizes adding/editing an <i frame> into a page
    •    How do you get it: a user adds/edits a new <i frame> tag and gets this badge on  publish/ validation
6) #audiomaker
    •    What is it: a badge that recognizes adding/editing an <audio> tag into a page
    •    How  do you get it: a user adds/edits a new <audio> tag and gets this badge on  publish/ validation
7) #editor
    •    What is it: a badge that recognises adding/editing an <p>, <h1> into a page
    •    How do you get it: a user adds/edits a new <p>, <h1> tag and gets this badge on  publish/ validation
8) #hyperlinker
    •    What is it: a badge that recognizes adding/editing a <a href> into a page
    •    How do you get it: a user adds/edits a new <a href> tag and gets this badge on  publish/ validation
9) #todoer
    •    What is it: a badge that recognises adding/editing <ul>, <ol> and <li> into their code
    •    How do you get it: a user adds/edits a list and gets this badge on  publish/ validation

CSS mini badges
10)#superstylin
    •    What is it: a badge that recognizes adding/editing the <style> section of a page
    •    How do you get it: A user gets this when they change one or more of the following; the positioning values, hex numbers/color, fonts/sizes.

11) #codecontainer
    •    What is it: a badge that recognizes adding/editing a <div> into their code
    •    How do you get it: a user adds/edits a <div> and gets this badge on  publish/ validation
12)#firstclass
    •    What is it: a badge that recognizes adding/editing a <class> into their code
    •    How do you get it: a user adds/edits a new <class> and gets this badge on  publish/ validation

Popcorn mini badges
13) #mediaaggregator

  • What is it: a badge that recognizes using media elements in Popcorn
  • How do you get it: user adds x media elements to their timeline

Achievement mini badges
14) #Imadeathimbleproject
    •    What it is: a badge that recognizes publishing a Thimble project
    •    How do you get it: A user gets this when they publish a project. The badge could be associated to a specific project i.e. #mememaker #bakerybasher

15) #Imadeapopcornproject
    •    What it is: a badge that recognizes publishing a popcorn project
    •    How do you get it: A user gets it when they publish a project in popcorn

CUMULATIVE BADGES; These are stealth (automatic) accumulative badges issued through Thimble & Popcorn. They hold higher value in the constellation.

In this category, here are some sample mozbadges;


1) HTML Basic
    •    What  is it: a badge that recognizes understanding of various HTML tags and syntax.
    •    How do you get it; A user gets this when they have received a combination of X number of the HTML mini badges above.

2) CSS Basic
    •    What  is it: a badge that recognizes understanding of CSS syntax.
    •    How do you get it; A user gets this when they have received a combination of X number CSS mini badges.

3) Storytelling
    •    What  is it: a badge that recognizes understanding of telling a story through video.
    •    How do you get it; A user gets this when they have received a combination of X number of the Popcorn mini badges.

4)#Iamawebmaker
    •    What  is it: a badge that recognizes publishing x projects
    •    How do you get it: OpenBadger tracks the achievement mini badges you’ve gotten and once you’ve earned x #, you are issued the #iamawebmaker badge.
  
PARTICIPATION/ CONTRIBUTION BADGES: These are manually issued badges through OpenBadger recognizing participation and contribution in the community.

1) #mozpartylegend
    •    What is it: badge for being part of the community
    •    How do you get it: Mozilla issues through OpenBadger based on email address (manual), you claim through OpenBadger with claim code

2) #mozpartymaker
    •    What is it: badge for participating in a SCP or other webmaker event
    •    How do you get it: Mozilla issues through OpenBadger based on email address (manual), then you claim it through OpenBadger with claim code.

3) #mozpartyhost
    •    What is it: badge for being part of the community
    •    How do you get it: Mozilla issues through OpenBadger based on email address (manual), then you claim it through OpenBadger with claim code

======================================================
Meanwhile, if you want to get a full on blast presentation, Erin and team will be guiding you through the mozbadges plan in tomorrow’s Mozilla Webmaker Community Call. You should also most DEFINITELY check Jess’s post including a brilliant cover of Lionel Richie’s “Hello” explaining how this is going to work in Thimble as well as how it fits in the grand Open Badges scheme. 

So- if you made it thus far in the post, you deserve the theme song for today performed by Moby, a favorite choice for a starry summer night.


ps. A special dance of thank you goes to Carla for taking a first stab at wordsmithing the badge names above as well as Sean Martell for letting us use his badge artwork.

Comments powered by Disqus