>>Project/Request Title: MDN Badge Styleguide >>Project Overview: MDN is going to start awarding open badges for developer activity - on-site activity in the short-term, but also off-site activity (GitHub, StackOverflow, Slideshare, Lanyrd, etc.) in the longer term. The goal is to motivate our MDN audience to engage more deeply with the site - turn bouncers into readers into return visitors into users into contributors. Our objective is to enable MDN stake-holders - devs, writers, evangelists, etc. - to create their own badges and badge sets [1], while fitting and enhancing the overall MDN creative direction and style. [1] https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ApeHsuEebcoRdFZVbER3a0NEbk1hUTBvV2UyM01Ra1E&usp=drive_web#gid=0 >>Creative Specs & Deliverables: We have our eyes on the Chicago Summer of Learning Badge Studio [2] and would love to have an "MDN Badge Styleguide" for it. I.e., 1. Strict background colors, patterns, and/or images for MDN badges 2. Approval of glyphs, scaling, and mask colors for MDN badges 3. Gloss or no gloss for MDN badges [2] http://toolness.github.io/chicago-badge-studio/studio.html >>Launch Date: 2014-02-28 >>Creative Due Date: 2014-02-21 >>Mozilla Goal: 10x contributors >>Points of Contact: ARRAY(0x7f78ba3b6bd8)

Hey Luke. Apologies for the slow response here...my fault. Given the timing, it's going to be hard to meet the 2/21 due date you requested. That said, do you need a proper style guide or would something more informal suffice? For reference, we provided some design direction for badge making in this post - https://blog.mozilla.org/creative/2013/01/23/community-design-mozilla-contributor-badges/ - and could provide some notes specifically around the MDN logo if that would help.

Thanks John. Many of the design directions for badges are encapsulated in the badge studio tool. So if we just had a few extra notes here that should suffice. We will create different badge *sets* on MDN, and it would be nice for every badge to align with MDN creative direction and for badge sets to share some kind of common design element. So maybe just a couple notes about: 1. background: solid colors patterns or images okay? 2. nounproject.com glyphs okay? 2. glossy okay or not?

Got it, thanks Luke. Sean is going to post some comments in here soon.

Hey Luke, So just as a heads up, I'm meeting with the Foundation next week on making an official Mozilla-wide design standard for the badges we issue internally. It's a MoCo + MoFo effort to foster new sets of badges: 1) Mozilla-issued badges (which may map to the 4 pillars), 2) team/product badges, and 3) individual/contributor-designed badges. My suggestion would be to hold off using the design studio and align these with the official Mozilla badge design guidelines which we will be nailing down in the weeks ahead. I know it's not going to hit the deadline of this bug, but for consistency sake I'd hope that could be pushed out and we could keep MDN in mind for the first run of designs with this system. My suggestion would be instead for you to focus on a list of the various badges you'd like to offer and we could use that as an example of what a full set would look like. (As an example of a set, and perhaps close to what the style might look like, here is what we recently did for the desktop team - http://cl.ly/image/2x1h1S0F141K) That sound good?

That's okay with me - I'm personally not hung up on deadlines - but others are more keenly interested in seeing MDN badges land by the end of Q1. :/ Will the new system still enable us to create our own badges within proper creative/visual parameters like this studio does? I just don't want to have to use up your time every time we make a new badge or set of badges. And we plan to let the MDN community create and award their own badges to each other (like badges.mozilla.org), so a badge studio tool is very appealing.

Sean, since we'll be able to update the badge images anytime, can we go ahead and make our first set of badges with this studio and then update the images in-place later when we have the MoFo/MoCo team/product badge guidelines?

Let me look into where they are with their BadgeKit web offering for designing badges online. You shouldn't use that studio you linked as that banner across the badge is very specific to the style of Chicago Summer of Learning. That was made very specifically for that event.

The studio is open-source, so it's easy enough to remove the ribbon from it by deleting 3 lines of js: http://screencast.com/t/zHRyQRzU9X I signed up for BadgeKit updates on the site, but let us know what you find out about BadgeKit availability.

Do we have a style guide for how these should display on MDN yet? Right now we have a very simple look for them: http://screencast.com/t/1bCdzYf9k http://screencast.com/t/XyUkVqDbMw3d Or is that out of the scope of this ticket? If it is within scope, we should move on it soon.

Styling how they're displayed within MDN seems to be a bigger project than this. That'd require a new bug imo. Badges meeting today, will get an update on this, I've created some assets as backup just in case. Luke - if you could get a build going without the ribbon, that'd be great. I can supply some assets if so.

Yup, here's my fork sans ribbon: http://groovecoder.github.io/chicago-badge-studio/studio.html

If you want me to add some assets into this to make it a good MDN badge studio just let me know. Else we'll use this to create some initial images that we can update later when we have proper MDN product badge sets.

Sean, we're discussing 3 options for our badges here at our DevRel off-site: 1. Wait unknown(?) time for the MoFo/MoCo BadgeKit before we launch any badges 2. Ask you and/or creative contractor to design our badges until #1 is done 3. Customize and use a fork of Chicago Badge Studio [1] to create our badge visuals Is there another option we're missing? And/or which one sounds best for you? We're worried about #1 since we have high-profile projects and goals tied to badges. Same concern with #2 and we would hate to pester you for too much time. I can tell(?) you're uncomfortable with #3, but would you be more comfortable with the understanding that we may have to replace/update our badge visuals later when you want us to? [1] http://groovecoder.github.io/chicago-badge-studio/studio.html

Hey guys - what's the status of this project?

I've been working with Foundation on creating the new official Mozilla Open Badges tiered visual system and it is complete now, so we can nail down MDN badges! It would be good to get a list of the first round of badges wanted/needed so we could discuss the glyphs for the first round if we want to get them out the door prior to the BadgeKit site going live. Could we look into that list?

+jswisher for sanity-check. In Paris we went thru our spreadsheet of all badges [1] and picked the first 3: https://devengage.etherpad.mozilla.org/devrel-workweek-2014-first-mdn-badges tl;dr: 1. We manually award "Sherlock" badge to recognize MDN users who found and filed a Kuma bug 2. We automatically award "New Contributor" badge to recognize and thank users who make their first edit to the MDN wiki 3. We automatically award "Editor" badge to recognize users who edit 5 different documents on the MDN wiki [1] https://docs.google.com/a/mozilla.com/spreadsheet/ccc?key=0ApeHsuEebcoRdFZVbER3a0NEbk1hUTBvV2UyM01Ra1E&usp=drive_web#gid=1 Sean - we'd really like to get into a self-service mode for MDN badges so that we - i.e., DevRel - can create and award new badges without asking you to make every badge image. We also plan to let MDN users create and award new badges to each other. So, will we create the "MDN Badge Styleguide" as we discuss the first round so that we can scale your style up and out to the community?

BadgeKit makes it so that a style guide is not needed. It'll be a system for creating the badges - MDN will have a set badge style, but you will be able to pick glyphs from our library to create badges. Once in place, anyone from your community can go in and create an official MDN badge. You can see an overview of the system here - http://cl.ly/image/231E0l1L0s1E I won't be creating a style guide as the color combo for MDN will be locked down and the only thing customizable will be the glyph on the inside. I'm locking down a set background style using two blues and a watermark graph grid similar to on the site. No other team at Mozilla will be allowed to use that combo in the system. We're setting it this way so teams can all have their own unique style in the official Mozilla badge system. What we can do for you in Creative is create/set the first x glyphs in your set so you can get some out prior to BadgeKit being finalized, then going forward you can use the keyword-tagged glyph library in BadgeKit to make your badges or upload community-created glyphs to use on the badges. I'll mock up some initial examples with those first 3 choices. Sound good?

That sounds good to me - mock-ups would be great! Will we have to get approval for all the badges' glyphs?

I don't remember the details of the decisions, but I trust that the documents have not been subverted, and therefore reflect what we decided.

It WOULD be nice to pass them by us. As Creative, we don't have to make them, but we like at least like seeing anything that is being added to a branded piece. There will be lots of pre-made glyphs you can use - hundreds even - so creating custom glyphs on your own will be extra work on your end. Think of it like code review/QA when you pass art by us. It's not a waste of our/your time, it's QA. :)

Oh, and you wont have to pass badge designs by us if you use the library of pre-approved glyphs in the system! :) Another bonus.

Hundreds of glyphs should be fine. Thanks!

Sean, what about the texture mask element? Will there be a single texture mask per site, or could we vary the texture mask for different categories of badges on MDN? So something like: * 1 Color Selection & Detail Overlay to match MDN colors for Developer Community * Pre-approved texture masks to match categories of contribution - i.e., code, docs, demos, events, etc. * Pre-approved glyphs to match contributions - i.e., doc edit, doc translation, event attended, event presented, code forked, code merged, etc. We could still require glyphs to be unique across all categories, but a couple of texture masks might break some monotony as we award and recognize new categories of contribution.

There will be one style and texture mask for MDN badges and it'll be based on the new brand. Mockups soon.

Here's an example of the style (the glyphs used here are FPO): http://cl.ly/image/0V2r2M3S3z3e We'd be locking in the [Fx light blue, white, fx blue] combo in the three tier badge system exclusive for MDN. Added the subtle MDN grid pattern as an extra brand element. As for the 3 glyphs required to start, should we create a new bug for their creation, if going with custom glyphs we'd need to produce? Or will you be waiting to use those default in BadgeKit system?

As much as possible, we'd like to use a pre-approved library of glyphs so we don't need custom work for each one. We're going to use our django-badger code on MDN, so we won't use the BadgeKit API. But will BadgeKit contain a pre-approved set of glyphs? And when? :)

ok, sounds good re: glyphs. Will you still be going into BadgeKit to create the badges, even if using the django-badger code? The MDN badge template will be included in BadgeKit - we're putting all the Mozilla team templates in there - since that's the best way we can track who has used what glyphs, etc + within that system the glyphs will be keyword tagged for appropriate usage. As long as you still use BadgeKit to make the badges, we're good. Being off the easy creation library/database will make this harder for you to implement, imo. As for when, I don't know the timing for that. Emily would have a better idea.

So, we'll use BadgeKit to make the badges [1], and then take those visual assets over into our django-badger system. Q: It looks like the "Visual" tab of the tool isn't finished? [1] https://badgekit.org/directory/addBadge?category=draft

Adding Erik. The visual studio is still being completed and Mozilla templates will be added this summer. Thanks Luke and Sean.

Luke - we can finalize some for you before then for sure. We can look at glyphs in fontawesome and the noun project for ones that fit your needs as we'll most likely implement both those libraries into the system. I can offer suggestions - or you can have a go at looking at those sets - and we can get some badges produced in SVG for you to implement, then they can be baked into the system later.

Can Ali & Janet just look thru Font Awesome and Noun Project to pick glyph options for our first 3 badges? And then show the options here for your approval?

I think that's a great way to proceed. We can also use this doc as a place to review glyph options: https://docs.google.com/spreadsheets/d/19HTUPv8yWTnngFyp6IlVB6xdqrJhPEqrABO8TRDLbBo/edit?usp=sharing

needinfo? Ali + Janet to scan Font Awesome icons [1] and the NounProject [2] for options for Sherlock, New Contributor, and Editor badges. [3] [1] https://fortawesome.github.io/Font-Awesome/icons/ [2] http://thenounproject.com/ [3] https://bugzilla.mozilla.org/show_bug.cgi?id=968386#c16

Axe the noun project - they're not open source glyphs and have put up a paywall. We'll look for more.

Some general criteria: I'd prefer to avoid glyphs that include body parts, for cross-cultural use. I'd prefer to avoid generic "yay!" glyphs, and find glyphs that are specific as possible to the meaning of the badge (given the limited set available in font-awesome). 1. "Sherlock": manual badge to recognize MDN users who found and filed a Kuma bug http://fortawesome.github.io/Font-Awesome/icon/bug/ 2. "New Contributor": automatic badge to users who make their first edit to the MDN wiki http://fortawesome.github.io/Font-Awesome/icon/check-square-o/ or http://fortawesome.github.io/Font-Awesome/icon/pencil/ Each of these is visually consistent in different ways with my choice for the Editor badge glyph. 3. "Editor": automatic badge to users who edit 5 different documents on the MDN wiki http://fortawesome.github.io/Font-Awesome/icon/pencil-square-o/

I agree with the above choices. Unless Sean has a different choice, I'd vote for "New Contributor": http://fortawesome.github.io/Font-Awesome/icon/check-square-o/ Sean, can we move forward?

I'll finalize the badges in PNG and SVG today and hand off the artwork. Beyond that, you'll have to work with the Open badges team to integrate them into the BadgeKit system once that goes live.

Thanks all. Erik can help with badge issuance, and we're working towards having these templates available in the badge studio in the future (https://github.com/mozilla/openbadges-badgekit/issues/418).

We're just using BadgeKit to create the visuals for these MDN badges. We will use django-badger to issue the badges from MDN code. An MDN template in BadgeKit will help us self-service so we don't have to ask Sean for badge visuals every time.

Luke: Ah right, yes. Here are the initial 3 badges for MDN - http://cl.ly/1b34213C3s2E - EPS, SVG and PNGs (512x512) within the ZIP. Easy to create any new ones in between this time and when BadgeKit goes live, so just let me know if you need any more before then. Enjoy!

Thanks Sean! I'm going to re-purpose this into a bug to add an MDN template into BadgeKit studio per Comment 38. Since we have our first visual from Sean, we won't block our first MDN badges on it. Erik, what's a rough estimate - i.e., days, weeks, or months for having an MDN template in BadgeKit.org?

Emily, to which bugzilla product & component should we move this bug?

Apologies for being late to this conversation, all. We're thinking on the order of weeks for this (targeting mid/late June), although that estimate was assuming we would add the visual designer to badges.mozilla.org (via django-badger). That would avoid the awkward step of having to use badgekit just to create a badge image. That said, if it would be useful to have the badgekit solution in the meantime, that could probably be done by the beginning of June.

Erik - yeah, if you're adding the visual designer to badges.mozilla.org and django-badger, that could be an even better fit for MDN. But are you doing that just for MDN's sake, or were you planning to do it that way anyway?

This is something we're planning to do as part of the general mozilla badge systems overall, so no, it isn't just for MDN's sake.

Closing this out, as the design piece of it is complete. Thanks!