Of mushrooms and gears

After creating the storytelling badges as a whole last week, this week was all about defining the details and drawing designs.

I spent some time parsing out what the individual skills would be required to pass each level and which skills would be optional. (e.g. for the bronze level Animating Characters Badge, you have to get a point and either turn or roll it). I also went through each level and tried to come up with a simple sentence that would explain to the user what they would get out of the level without overly confusing them. Some of my sentence are more successful at this than others. As I went through each level, I made sure that all of the skills that we are requiring users to accomplish actually work in Looking Glass. Unfortunately, not all of them do, so I compiled a list of things to fix in order to get badges going.

I used the rest of this short week to rethink my website designs. I was able to use some of the things I already had from before, although having a solid understanding of the different badges definitely helped the whole process.

This is the design for the main badges page. There is a short explanation on the upper right of badges and in the middle is a flow chart of how to earn them. If you remix a level, you get a ring in that color around the badge. If you do it on your own, the whole badge changes color. Once you have earned a badge through platinum, the next badges you can earn will turn color. (In this depiction, the mushroom turns red). If you hover over the badge, you will see a short, descriptive sentence telling you what you can do if you earn that badge. (e.g. “You can teach characters new actions”)

This is the design for a badge info page. It has the levels laid out with the skills you need to pass the level. As with the main badge page, a border indicates remix and fully colored in indicates doing it on your own. Each level also has a descriptor that tells the user what that can get with the level. On the bottom as helpful worlds and all worlds with the badge. The helpful worlds are worlds that have just earned that badge at that level and nothing else. I was a little worried that the user may be confused about what the skills like “Do Together” and “Local Array” mean. Hopefully, the helpful worlds will be able to provide clean examples for the users.

This is a design for the user’s page. Since there are a limited number of badges, it seemed like overkill to give badges its own separate page on the user profile. So, I tried to find a place for them with the activity. I think the ideal location for the badges is on the right hand side bar. That way, it will follow the user throughout the profile. However, in order to avoid having badges too far down, I condensed the “about” section. When you click on on the badges, a box slides out of the bottom of the badges board and gives you a short description of the badge and offers links to see the user’s worlds with that badge, see all badges, etc.

The badges placement on the worlds show page is a little different from the previous designs. In this one, the badge name is listed next to gears that indicate what level(s) the world has. This will hopefully allow for the user to quickly evaluate if this world is useful to her when earning her badge.

My main question now is, what do badges look like? Since the profile pictures will have a small circle with the number of full badges the user has earned, badges need to all be circular. However, I’m not quite sure if they should all look the same, either. The community badges don’t have remixes or sample worlds or badge challenges because they are tied to worlds. Do you think that requires a visual distinction to indicate that those badges are of a different type than the others?