Open Thinkering

Badge Studio is back!

• 3 min read • Open Badges / AI / Open Source
Badge Studio preview image

Back when I worked at Mozilla we did a lot of work on Open Badges that's still relevant over a decade later. One of the things I've always thought was a simple, but super-useful, tool was Andrew Hayward's Badge Studio.

The original Badge Studio uses the Mozilla branding, making it easy to stay within the brand guidelines for community, Mozilla-wide, or team/product badges. Although it's now out of date, at the time, that kind of constraint made it incredibly useful to quickly create the visual element of Open Badges.

Andrew maintained the code in a GitHub repository, so for years I've wanted to strip out the Mozilla branding, update the codebase, and add a 'randomise' button to make it more playful. Thankfully, due to my new-found superpowers with Claude Code, I've done just that.

Screenshot of Badge Studio
Even though WAO is closing, Laura wanted me to add the WAO brand colours!

Give it a go:

🔗 dynamicskillset.com/badge-studio

🧑‍💻 github.com/dynamicskillset/badge-studio

What Badge Studio is good for

As a simple, client-side badge generator running entirely in the browser, it's an easy way to tweak some colours and settings (or hit randomise if you like) and get a downloadable badge image in PNG and SVG formats. These can be used with Open Badges – or anywhere you need a recognition marker.

I think this is helpful in three ways:

  • Keeps badge design light, so you do not need design software, a brand team, or a lengthy review cycle just to prototype a new badge. I'll be using this for the Digital Badges Proof of Concept project I'm working on up in Scotland.
  • Supports rapid iteration, meaning you can sketch a pathway of badges and adjust visuals until they feel coherent.
  • Lowers the barrier for experimentation, so educators, community organisers, and project teams can try new ideas around recognition ideas without committing to a full-blown credentialing platform.

Try it, reuse it, or fork it

If you issue, or are thinking about issuing badges, think about using Badge Studio as a lightweight badge design approach before you commit to anything. Alternatively, you could fork the codebase, add your brand colours, icons, or whatever else you want.

Some next steps:

  • Give it a try, tell me what you think. Do you like the 'random' button?
  • Remix it, show me what you've done with it
  • Hire me so we can work on these kinds of things together 🙂

I'm considering a version which helps build out radar-plot style badges, as I suggested recently. Ideally, this would be done programmatically in response to evidence, but there's no reason why they can't be built in a dedicated tool and issued manually to begin with.