Designing BadgeKit

After several months of hard work by the Open Badges team, we are announcing that BadgeKit is  available for access to Private Beta. This means that BadgeKit is now available in two forms:  a hosted version of Mozilla BadgeKit available in private beta for select partner organizations that meet specific technical requirements, and anyone can download the code from GitHub and implement it on their own servers. 

BadgeKit is a set of open, foundational tools to make the badging process easy. It includes tools to support the entire process, including badge design, creation, assessment and issuing, remixable badge templates, milestone badges to support leveling up, and much more. The tools are open source and have common interfaces to make  it easy to build additional tools or customizations on top of the  standard core, or to plug in other tools or systems.

From a design perspective, this milestone represents refinements in user research and testing, user experience, user interface and branding. 

We did user testing with members of the Hive in Brooklyn.

In preparation for this release, we conducted extensive user research to define the needs and goals for badge issuers. This work, led by Emily Goligoski, helped to define requirements for the BadgeKit offering as well as inform the user experience. The research was done using a variety of methodologies, however, it is worth noting that all of this work was done in the open. Emily organized distributed user testing in key markets such as New York, Chicago and Toronto to do everything from needs analysis to accessibility and functionality testing. The Open Badges weekly community calls were leveraged to pull in input from the highly motivated research and practitioner cohorts. Much of the work is documented both on her blog and in github. We paired every implementation milestone with some form of user testing and iteration. While this may sound obvious, it was a new way of working for our team, and I can unequivocally say that the product is better because of this practice. User research and testing did not happen in a bubble, but rather it became completed integrated with our design and implementation cycle. As a result, developers and designers became comfortable making informed iterations on the offering, as developers, designers and team researchers all participated in some form of user testing over the past three months. 

As a direct result of the extensive research and testing, the user experience for the entire BadgeKit offering was deeply refined. This work, led by Matthew Willse introduced some new features, such as badge “templates” which give the ability for any badge issuer to clone a badge template and remix it. This gives us the unique ability to offer template packages based on common badge requests from the community, as well as eventually to empower the large Open Badges ecosystem to develop badge templates of their own (and perhaps explicitly state how they are comfortable with their content being shared and remixed). One component of this work that evolved as a direct result of testing, was the increased attention to copy. Sue Smith led this work, which entailed everything from tool tip development and a glossary to API documentation. Considering that BadgeKit takes an issuer from badge definition

and  visual design

 to assessment and issuing,

designing the user experience was no small effort and the attention to detail combined with designing in the open - proved to be a solid approach for the team. 

Perhaps the most obvious design component of this release is the user interface design and brand definition. Adil Kim kicked off this work with an exploration of the brand identity. BadgeKit is under the parent brand of OpenBadges, which sits under the even larger parent brand of Mozilla - which gave us the constraints of designing within the brand guidelines. After exploring options to represent the visual metaphor for this modular system, here is the new logo:

The logo is meant to evoke the imagery of both a badge as well as a tool in one glance. For the untrained craftsperson (ahem) - while gazing into the mark - you will see a bolt . This connotes that BadgeKit is a tool, something that allows you to dive into the details and construct a badge, and a system for your community. The logo incorporates the palette from Mozilla Open Badges, in a playful mobius - at once implying that while this is a handcrafted experience, it is also a seamless one. This logo nicely fits into the larger brand family while reading on it’s own, as if to say, “hey, BadgeKit is the offering for badge MAKERS, dive in and get your hands dirty!” 

The brand is in turn extended to user interface design. The overall art direction here was that this needs to be clean, yet approachable. We know that many organizations will not be using all of the components in the interface directly on badgekit.org, however, the design needs to take into account that everything needs to be accessible and read as remixable. Some details to note here are the simplified navigation, the palette and subtle details like the ability to zoom on hover over thumbnails. 

It’s worth noting that while Emily, Matthew, Sue and Adil , as well as Carla, Meg, Erin, Jade, Sabrina Ng, Chloe and Sunny were invested in much of this design work, there was an intentional yet organic partnership with the developers (Zahra, Erik, Andrew, Chris, Mavis Ou, Mike and Brian + many, many community contributors) who were doing the implementation. We had weekly critiques of the work and often engaged in conversation about design as well as implementation on github. 

Another component of this work is looking ahead towards future features. Chloe Varelidi lead work here thinking through the potential for badge and skill discovery. Under a grant from The Bill & Melinda Gates Foundation, Chloe and her team are thinking through ways to represent earner pathways. This eventually will be leveled up into the core BadgeKit offering, but you can start to dip your toes into those features by checking out the work here.

And the good news is that design never ends! Design isn’t just a destination, it’s an invitation to a conversation. Check it out, let us know what’s working and importantly, what’s not.

Brainstorming on Dashboards

During the summer, I spent some time thinking about badge directories and dashboards. The general idea was to prototype a tool for badge earners to make sense of the larger badge ecosystem and in turn to create an integrated dashboard that would help them to collect, maintain and analyze their personal data on their learning, goals and skill acquisition.

Initially I had come up with a few ideas for this dashboard:

a. focusing and personalizing skill search. Here, the user might type in skills that are of interest to them and then popular badges would appear. I like exploring the interaction of incorporating some narrative elements into this framework. Here, instead of just a search box - you have a statement of intent. 

 

b. pathways focused -  This mock up lays out skills you already have and then upon click/hover you can see where your skills could lead you. This is personalized approach, so once you log in, it will display a visualization of skills that relate to your data. However, if you are not logged in, it could display popular or trending skills or even .. geolocate badges based on your location.

 

c. Toggle vision - this gives you the chance to explore what is available in the ecosystem as well as in your personal badge library - as a list, as a visual display, and on a map.

 

d. Whimsical Exploration - still playing with the theme of exploration, discovery and happenstance - this is kind of like a wheel of fortune. Each node coming out of the circle lists skills and then if you are logged in and in fact have the skill, it will be notated. There is a natural progression from this view to a more sophisticated learning pathways exploration. 

 

e. Your (data) garden - This one is a little crazy - but imagine that all of the trees below represent your skills at different stages of growth. You can have "community" gardens as well as "secret gardens" - giving you the ability to curate what data you are in fact sharing. Here you can also set goals, be informed about your "garden health" - which might just equate to giving feedback on various goals that you have set up for yourself - and tool tips - which could be mentorship or coaching based on your goals. There's a lot of metaphor going on here and it probably would be a brain game to figure out how to design it .... but this is just a sketch, so wha ha ha haaaa.

 

So - the Summer came and went and I thought about these prototypets a little bit more. More specifically, I started to consider what a dashboard and a discovery feature would mean in the context of something like BadgeKit. The goals of the dashboard, by nature would change to accommodate an issuer (as opposed to an earner). I think that these explorations are still totally valid and even hackable to modify for this new lens. Some of the goals for the user might include:

• keeping track of the badges that they are offering
• getting notifications regarding badge assessment needs
• analyzing trends for badge earners. 
• sharing rights for admin functionality. 

While I push forward on the thinking some more - I was reminded of the video, the Powers of Ten, when thinking about the display of badge data and badge ecosystem information. Upon first glance, a user might want a 1000 ft view of their world, but perhaps they want the ability to easily navigate back and forth through the level of detail that their data could be providing. Maybe an issuer only wants to view their goals, or their assessments - but perhaps they want to see trends, data about individual badges, and individual users. Maybe an issuer wants to connect their data to algorithms... the possibilities are endless!   Will update as we start to think about this more.

BadgeKit: An Invitation to Innovation

Have you ever read an article, listened to a podcast or heard a speech that motivated you to perform some kind of action - only to realize that action was really difficult to accomplish? Well, that's kinda what's been going on for many people who try to implement a badge system or even something as basic as attempt to issue a badge to a single person. Often times, people are so inspired by the movement of badges that they take the next step and attempt to do something in their community to make badging real. This is fantastic - because Open Badges is both a social and technological movement. However, if the barrier to entry is so high - then we are making it difficult for those movers and shakers to, well you know, move. This common user experience helped us to identify an opportunity to design tools that make it easy as pie to dive into badging. The response to this is what we are calling BadgeKit. 

We are even making these postcards to announce this.

An Invitation to Innovation

BadgeKit will not only make it simple to get started with badging, but it also will provide lightweight, modular and open options for the community of badgemakers. So now that I have your curiosity, I want to gain your attention. We are framing badgekit around a set of action verbs. Each verb represents an invitation to innovation around defining and refining the user experience for the particular action that the user is attempting to do.  Here are the verbs: Build, Assess, Issue, Collect, Share, Discover and Use. You can read what Sunny Lee wrote more about the verbs here.

BadgeKit evolved out of several years of work in this field as well as LOTS of user testing and research. Our initial goal will be to develop proofs of concept for experiences for each of the actions. In order to develop a vision for this work, I looked at the work that we have been doing for the Chicago Summer of Learning, the Connected Educators Month and for the Mozilla Summit. Each project helped us to produce some great open source solutions for distinct badging experience ranging in size from one badge to thousands of badges being issued. With each project, we user tested, got feedback and iterated - so just think of BadgeKit as our next big iteration on our offering. If you are familiar with the tools that we currently offer through openbadges.org - it might be easier for you to digest this information through recipes.

Click here to see all the recipes

What makes something "Badgeriffic"?

So now you know - what we are building and a little bit of why - but let me tell you a bit about how we are building it.  As a team of Mozilla and community designers, developers and people who have tried spinning up our own instance of badges - we have been trying to find our voice. Specifically, we asked ourselves "What makes something Badgeriffic?" Over the years we've had a hunch about what the answer is and over the past few weeks, I've done a bunch of initial exercises to help us to start to identify what our design values are. Even as I write this post, I don't have a definitive answer, but I am going to share with you our current thinking and ask you to give me some feedback and thoughts about what you value. 

We kicked this off with a virtual sticky note activity:

After people filled in what they thought made something "Badgeriffic," we clustered like-minded notes and came up with overall statements that we are calling values. Values give us a chance to say, "we did all of these things so we feel that ethically and aesthetically, this is a product that we can stand behind".  So, what I am starting to believe is that our values are aligning perfectly with the
Firefox Design Values

This makes sense because well, we are one Mozilla - and behind all of our work we have that heart connection that motivates us to work for a non-profit and we want to build things that make the web better.  On a high level, the BadgeKit offering will help to shape environments, build products, empower communities as well as teach and learn: the four pillars of our work at Mozilla that our Chief Lizard Wrangler Mitchell Baker recently presented at the Mozilla Summit.

In the next few weeks there will be an announcement about this work and we will be working on the action verbs proof of concept. In the meantime,  I would like your help: what do you value and what makes something "Badgeriffic" to you?