implementing a really simple badge system

I aspired to create a really simple badge system design so a beginner could implement open badges. I had the following restraints to this implementation;

1. creating the badge images needed to be really simple, and saved as .png files.
2. the badge system design was to be a basic hierarchy where three micro-badges lead to a badge.
3. the tasks to earn each badge were to be simple.
4. the badges needed to be hosted and issued from one of the free services currentlly available.
5. the badges had to easily move over to the Mozilla digital backpack for organization and display.

Scenario: the badge to be earned was by making a cup of tea. I know, not a rigorous amount of learning, but I was wanting to keep it simple. To make a cup of tea you need to prove the following three basic skills; boiling water, finding a teabag, and add the boiling water and teabag to a teapot.

Step 1: decide on the hierarchy of badges and their design
I chose to follow my thoughts on the martial arts for coloring my badges. Making hot drinks can become increasingly complicated and I want to be able to add more complicated tea making badges later. I want to become a tea ninja! The next level up could be to make filtered coffee or tea from dried leaves...
Step 2: create the badge images.
These images needed to be quickly created and contain a simple design. I chose visio to create the badges cause it allowed for transparent background, supported the png and svg file types, was *gak* windows based, and had a few basic shapes. There is no reason why you couldn't use windows paint to create a basic square with a couple of words in it as your badge. just remember to save as a png file.
Step 3: use a simple badge issuing site
I wanted to use a simple badge issuing site that integrated well with the Mozilla Open Badges backpack. I ended up using http://badg.us. This site allowed me to easily add badges and issue them. Once the badges were issued they could also be easily claimed via links in the issuing email.
Step 4: move the badges into the mozilla backpack
Once the earner had claimed their badges from within badg.us they could easily move them into their mozilla backpack by selecting the badge within badg.us click the "Add this badge to your Mozilla Badge Backpack" button.

image attribution
tea bag - http://thenounproject.com/kenset/#
kettle - http://thenounproject.com/Simon%20Child/#
teacup - http://thenounproject.com/CrocodileJock/#