Stars, Shapes, and Numbers... Oh my!

After last week’s meeting, I came away with a lot of different design thoughts about badges. The general consensus was that people liked the colors, but thought that there needed to be some indication of progression and levels. I spent a portion of this week playing with (even more!) ways to visualize badges. See the end of this post for the five different choices.

I also had a nice long discussion with Jordana about what exactly it is that we want on the badges info page. She made a really good point regarding what should be included. Although there are lots of things that would be really neat to include, (badge-specific help, user-specific feedback about why they didn’t earn a particular badge), for now we should contain ourselves to the resources that we currently have on hand.

We also talked about how best to tell the user what a particular skill was. For most of them, it should suffice to offer a breadcrumbs direction to where it is in the IDE and a brief description. The user can take advantage of Kyle’s tutorials and badge challenges to answer any further questions about implementation. However, not all skill fall into that box. (For instance, you can remix a world to figure out how to open a challenge). I will devote time in the near future to looking at each skill and figuring out if we need to offer the user additional explanation (like one of Jordana’s videos) about how to achieve it.

Be on the lookout next week for some sketches of the badge info page. In the meantime, feel free to peruse the badge designs.


1. Size
An easy way to think about progression is by the size of the object. Bigger is better. A concern with this design is that the different sized badges might look awkward when put side by side. I’m indifferent about this design. I don’t love it, I don’t hate it.

2. Shape
Kevin mentioned that a nice geometric representation of levels might be triangle > diamond > four point star > five point star. I tried that out, however my immediate reaction is that it looked a little like the geometric toys favored by pre-schoolers. To me, the design seems a little elementary for this age range.

3. Life Cycle
Another idea that was proposed at the meeting was each level be represented as the stages of a life cycle (egg > caterpillar > cocoon > butterfly). I played around with drawings of this, but, once again, it didn’t feel like it was a good fit for this age range. Moreover, it felt too academic/science camp-like for a software we’re trying to make as fun as possible. (Not that science isn’t fun, mind...)

4. Stars
This design is simple and clean. It was inspired by Dennis’s comment about military rankings. As a result, the design does give off a military vibe.  I don’t know quite how I feel about that.

5. Numbers
I really like this design for its simplicity. After all, what says progression more than numbers? The more curved version of this idea could possibly leave room for adding in a category-specific design.

Thoughts? Preferences?