Closed Bug 863934 Opened 11 years ago Closed 11 years ago

Provide graphic design for Webmaker Mentor Badges

Categories

(Webmaker Graveyard :: Badges, defect)

Product:
Webmaker Graveyard
Component:
Badges
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: laura, Assigned: christopher)

References

Details

Attachments

(13 files)

mentor badges
32.02 KB, image/png
Details
extending the tree metaphor + adding concept of nodes and spreading reach.
100.84 KB, image/png
Details
Here's a screenshot of work in progress. Do you guys want to weigh in on the approach before going too far into refinement?
835.83 KB, image/png
Details
Mentor Badges
91.68 KB, image/png
Details
mentor badge 3
153.64 KB, image/png
Details
Mentor in making
101.04 KB, image/png
Details
Mentor
117.29 KB, image/png
Details
Super Mentor
104.70 KB, image/png
Details
Mentor in making 256
98.17 KB, image/png
Details
Mentor 256
101.58 KB, image/png
Details
Super Mentor 256
99.56 KB, image/png
Details
mentor badge v2
29.99 KB, image/png
Details
Super Mentor Badge
44.89 KB, image/png
Details 
It's time! Webmaker Mentor Badges are thought out and we're ready for design. 

TLDR, need designs for:

    1) Mentor-in-Making. Self-identified, automatic. [registered users]

    2) Mentors. Can issue Webmaker badges. [mentor]

    3) Super Mentors. Can issue Webmaker Mentor badges. [mentor]

We are hoping for some sort of visual metaphor that communicates the idea of progression. You start at 1, become 2 and move to 3. Mentor and Super Mentor badges should communicate trust, qualification to offer feedback, the "Mentor in Making" badge should signify that you're on your way to Mentor.

Full text here:
https://teach.etherpad.mozilla.org/badges-mentor
@ Chris: could we get a status update on this when you have a sec?
Summary: Design Webmaker Mentor Badges → Provide graphic design for Webmaker Mentor Badges
The full thread is here for reference: https://app.asana.com/0/search/5370319973768/4832313085529
Hey guys,

Here are the designs for the mentor badges.
I've used to seed to tree metaphor to convey progression and knowledge (qualification).
Let me know what you think!

- Chris
Attached image mentor badges — 

    
    

    
  
* @ Chris: hey Chris -- I think this first iteration is a bit off the mark.
* I'm going to review and update the creative brief for this.
* Let's take a second pass on these for next week

    
    

    
  
@ Chris: here is an updated creative brief:
https://etherpad.mozilla.org/Webmaker-Mentor-badges-creative-brief
@ rest of team: Chris says he can get post an updated iteration by Wed or Thurs

    
    

    
  
@ rest of team: please help us understand the urgency / real deadline here. Seems better to give Chris the time he needs to get it right, as opposed to limiting him with an artificial deadline.

    
    

    
  
I really like the development between the seedling and the full tree here. For the Super Mentor (no hyphen) badge, might we even consider having the leaves expand / "grow" beyond the hexagon, as long as the full shape could be viewed at a scale of 90x90?

I will let Michelle and Laura chime in about whether the organic look works with webmaking or whether we may want to have a more direct digital making feel.

As the MOOC that is associated with Webmaker badges has already begun, today's deadline was intended so that the team could align these badges with the metadata and get them ready to issue to mentors starting early next week. Please know that we do not have a practice of assigning artificial deadlines.

    
    

    
  
* Ok, thanks Emily. Can we live with Wed or Thurs? Or will that break something?
* To be clear: I can't sign off on this creative. It's not good.

    
    

    
  
The Super Mentor badge needs to be ready sooner if possible. I believe the others can wait a few extra days. Michelle and Laura, please provide info per your timeline.

    
    

    
  
so I have to agree with Matt, this metaphor doesn't do it for me. I was under the impression that the seedling to tree thing was just an example. Chris said he was using it Friday, so made sense to give a looksie, buy I'm feeling like the metaphor should be more tied to humans and human activity, trees don't mentor anything, they aren't wise or helpful, they're trees. Our mentor community is our boots on the ground, they're the ones who will be creating a generation of webmakers. We are just the support squad.


Re: the Deadline. Emily is absolutely right, we didn't make an artifical deadline. Next week we release Section 2 to the super mentors. We wanted to do that with a badge. Monday is packed for me, and Tuesday I'm on my way to Toronto, I won't have time to set up the mechanisms to issues these badges until at least Wednesday, and at that point it will be the Super Mentor badge that goes out first.

    
    

    
  
Chris, please let us know your thoughts on timing to review another round (with the priority being on the Super Mentor badge). Laura, I can try to help with tech implementation while you're traveling.

    
    

    
  
+1 Matt and Laura
specifically with direct visual tie-in to making, webmaker and human connection that the mentors provide. I like the growth metaphor but agree we want to think super, mega, fantastic and inspiring people creating webmakers.

    
    

    
  
Hey all,
Happy to take another pass on the concept but I want to make sure we're all clear on the approach moving forward. There's a lot of metaphorical language being used in the thread, and since there are so many angles we could take on this thing, we run the risk of saying nothing, by trying to say everything.

So far we've got:

humans
human activity
human connection
boots on ground

making
webmaker

super
superman S

mega
fantastic
growth
inspiring

locking
unlocking
level up

seal of approval
trust
backing

deputized
noble knights

solve problems
helping others
service

The thing I liked about the tree concept was that it was a simple and straightforward metaphor for knowledge while also fitting the growth and progression narrative nicely. While it is a tad cliche, we could ascribe meaning to it through its context and use.

Is it safe to say that you guys are more comfortable with something that takes a more literal approach? (e.g. two people on a computer, people talking to each other, teaching tools) Or do we want to explore more metaphorical concepts (how about an owl wearing a web maker t-shirt -- for real, everyone loves owls)

-Chris

    
    

    
  
While a little cheesy, maybe a way to adapt the tree metaphor would be: 

* one person node
* one person node + 3 spokes
* one person node + 3 spokes that each have 3 more spokes

So that we're showing the difference between the levels is teaching someone how to teach someone.

Maybe like this in structure, but obviously cooler looking with a Cappleton touch: :-)

http://image.shutterstock.com/display_pic_with_logo/618832/618832,1314093750,1/stock-photo-people-network-83294830.jpg

    
    

    
  
@Michelle: very cool idea! Perhaps something like this?

Also, if you guys don't like this approach, I'm still thinking the owl in a t-shirt is a strong candidate. Thoughts?

-Chris

    
    

    
  
* Lots of good ideas here. Chris, thanks for listing: need to narrow and focus them down into an updated creative brief, prioritizing the key values:
https://etherpad.mozilla.org/Webmaker-Mentor-badges-creative-brief
* @ Chris: the TWO primary values in the ones you listed are:
1) service. helping others.
2) Mozilla Webmaker. making. 
* That's partly why this existing badge stood out as an example from our "moodboard": https://diy.org/skills/clubmaker Connotes service and helping others.

    
    

    
  
* "Owl in a t-shirt" does speak to those two key design values.
* Chris: can you proceed with whatever you think is best, based on the updated design brief?
* maybe you can just produce one badge, then post here for testing with our Super Mentors etc before proceeding to all three
* one note about owls: will need to test for localization. those symbols can mean different things in different locales.

    
    

    
  
My main feedback is that we want to keep the owl from looking too cartoon-ish (as the primary Super Mentor audience, to my understanding, is adult professionals who will be sharing this badge on personal and job networks). Others? Thanks!

    
    

    
  
@ Chris: I like it. It's a little unusual, but there's something playful about it I think people will like
* @ Michelle / Laura / Lainie: would you be able to informally test this out with some mentors / Super Mentors? Want to make sure this localizes well. 
* e.g., in some cultures, the owl symbolizes wisdom -- but in others it may connote something else. want to ensure this metaphor translates across cultures well.

    
    

    
  
@Chris
I think this is too cute for adults. (And I'm a big fan of the Porter Panda) I think like the Webmaker logo should be front and center, not buried on the coveralls. 
Keep thinking Webmaker as the protective shield that the super-mentor wears.
Cute as it is, I think of a wise owls as being aged.

    
    

    
  
@leah, sounds a bit like Captain America. Noble knights have also been mentioned. Are we sending these guys into battle? Might be a bit combative. On the other hand, could be awesome. Do we want to go the hero route? Maybe something minimal / epic like: http://www.materialicious.com/2012/04/superhero-silhouette-art.html

    
    

    
  
* looks like we're killing the owl concept
* @ Chris the hero concept makes sense in terms of a) service and b) incorporating the brand
* @ Leah: can this group deputize you to take point on providing feedback and working with Chris to take this past the finish line going forward?

    
    

    
  
I agree with Matt that it makes sense to have one voice for feedback and nominate Laura as she's been largely leading the charge on these badges. (No offense Leah, and please let me know if that makes sense as we get into the home stretch.) Thanks all.

    
    

    
  
FYI - I'll be in Toronto this evening, tomorrow at the office. Maybe we can circle up then.

Couple things:
-I like the new tree node thingie based on Michelle's comment. A distinction I think is important (that this design can perhaps integrate by making the "nodes" different colors or symbols):
A Webmaker Mentor spreads webmaking to anyone.
A Webmaker SUPER Mentor spreads webmaking to anyone, but *especially* people who want to become Webmaker Mentors. There's an element of Train the Trainer, professional development, network theory at work here.

-I agree with Emily & Leah on the Owl front

-I wouldn't be opposed to the Knight or Super Hero route. Definitely minimal, shouldn't be combative at all, friendly - Batman Adam West style, not Christian Bale style.

-Google revealed that Minecraft has a Super Mentor badge: http://www.massivelyminecraft.net/awards/wp-content/uploads/2012/02/2012Badge5.png

    
    

    
  
@everyone>> Laura will be in TO and is already deputized

@Chris > Mentors are not lone super-heroes. Group of awesomeness who spreads knowledge, helps/trains others. It's not noble, just something extra that they do. 
My only concern with the lone super-hero is that it doesn't give us the diversity of a global crew 

+1 Michele's graphic that gets us closer to spread of knowledge to slightly different people vs. clones?

    
    

    
  
Super/mega inspiration could be achieved through treatment of the logo. So Webmaker logo seems special no matter what the context:

@Michelle's > Tree/node spreading structure idea (http://image.shutterstock.com/display_pic_with_logo/618832/618832,1314093750,1/stock-photo-people-network-83294830.jpg)
+
-logo/wordmark treatment that pops and has some dimensionality (as if emblazoned):
-http://thumbs.dreamstime.com/z/patriot-shield-17595626.jpg
-http://renfairshoppe.com/images/bv05111.jpg
-http://thumb10.shutterstock.com/thumb_large/90549/90549,1178740198,1/stock-photo-old-templar-shield-with-red-cross-3263256.jpg

    
    

    
  
* Ok thanks guys. Was worried that we were overwhelming poor Chris with too many cooks. 
* @ Laura: looks like you're the deputy. :) Hoping you and Chris can take this past the finish line with what's here now.

    
    

    
  
Hows aboot:

(the following is meant to be read in an old-timey news reporter voice):

"3 silhouettes fly across the night's sky.
Arms outstretched, they soar over the city.
Off in the distance, a spotlight shines against the dark clouds, illuminating the 'webmaker m'.
This looks like a job for... the Super Mentors!"

Could be drawn in an old school comic book style, with 'networky' details worked in.


I think we've got a lot of good ideas in this thread, but most important thing now is deciding on the direction to commit to. In order to actually make this thing, I'll need a bit of lead time , and since its a tight deadline, don't want to waste too many cycles refining an idea that is off the mark.

@Laura: from the ideas listed above, is there anything you're comfortable signing off on? Do we need another concept before we can execute on it, or do you feel some of these are close enough that we can just go ahead and then work to refine the execution and details from there, to get us to the finish line?

Let me know! Thanks!

-Chris

    
    

    
  
Update: Chris and I have talked about the superhero approach and he has some kick ass sketches. There will be no lone superheroes :) and aspects of networks, global scale and progression will be worked in. 

More soon!

    
    

    
  
Rock on team.

    
    

    
  

      
      
      
      

        Attached image
          
        Mentor Badges
        — 
      

    


  
Hey All,

Here's what I'm thinking for the mentor badge.
We've gone with the super hero treatment, responding to the call of the webmaker spotlight.
I've kept it as a single character, as it reads much better this way at small sizes.
I've used some networky graphics in the background to hint at some of the other concepts we've discussed (network, connections, global) but I've kept these as a secondary piece, so that the emphasis is on our hero (which speaks to service, helping, etc).

-Chris

    
    

    
  
Cute! Like how the mask reminds you of geeky glasses.

Will the other two badges use the same kind of imagery? From Clark Kent > Hero > Super Hero? :-)

    
    

    
  

      
      
      
      

        Attached image
          
        mentor badge 3
        — 
      

    


  
Also for consideration -- there was some concern that the previous version might be too cute, and that this new approach might be closer to the mark.

    
    

    
  
Getting closer! Michelle, Leah and I still think the networking piece shouldn't be as secondary as the image makes it. Maybe adding a glow or something that makes that less like a texture and more like a "thing"?

I also think turning that frown upside down(ish) and making the webmaker logo fit better as an emblem will help it feel more like a single graphic. Skewing it a little. 

I, personally, like this direction much more!

Rock on!

    
    

    
  
Hey all,

Given the tight timeline, I thought it best to move forward with the design of all the badges, so that we can better judge them as a collection, with a clear narrative arc.

Together, they work to tell the story as follows:

1. Mentor-in-making: Our hero receives the call to action
2. Mentor: Our hero leaps into action
3. Super-mentor: Our hero stands tall with the global network of super mentors

I think as a concept these 3 work pretty well together and tell a nice story that reflects and amplifies the user's own journey throughout their experience with mentorship. I think these designs speak to the aspirational nature of being a strong mentor, and the altruistic nature of helping others. As a metaphor the superhero works quite nicely -- reflecting the best parts of ourselves and standing for making positive change in the world. I think this is a concept that would resonate with our audience.

I've included networky diagrams as a piece of texture, and to hint at the concepts of global network etc. While I think these are interesting concepts, I think we might be more excited than the audience about it. Since we have that macro view of the whole network -- and since we had a part in mobilizing that network, its a very interesting piece for us. I also think many of the mentors would be equally excited about it -- but if I had to make a bet, it would be the more aspirational qualities (associated with the superhero) that would resonate best with them. 

Since we're pretty constrained for space (these have to work at small scale too) and I would recommend choosing one concept and executing on it strongly. The more we try to fit into that space, the less effective they'll be.

Let me know if you guys like this direction -- If we need to do another round, I'm happy to do it, but know that there's a time crunch to get these shipped.

    
    

    
  

      
      
      
      

        Attached image
          
        Mentor in making
        — 
      

    


  

    
    

    
  

      
      
      
      

        Attached image
          
        Mentor
        — 
      

    


  

    
    

    
  

      
      
      
      

        Attached image
          
        Super Mentor
        — 
      

    


  

    
    

    
  
My main feedback across these three (and I'll try to limit it as the Hive team knows best what is needed) is that the "M" for Mozilla should be larger across the badges to help them convey Mozilla when viewed at small sizes.

    
    

    
  
I like the style and direction. But conceptually I'm torn between broadcasting the aspect of connectedness (which, by the way, is a large reason we're funded. See: MacArthur) and Chris' points that we might be over thinking it and that people will care about the aspirational qualities more. I disagree that our macro view isn't shared by those closest to the community. Just look at Mozilla Reps – that's macro with pride. Plus there's the local network aspect to consider.

There are ways we might push the community thing a bit more using this metaphor. Something about the interaction the hero goes through. Instead of:

1. Mentor-in-making: Our hero receives the call to action (individualistic)
2. Mentor: Our hero leaps into action (individualistic)
3. Super-mentor: Our hero stands tall with the global network of super mentors (pluralistic)

could be:
1. Our hero is learning to fight (pluralistic, someone is teaching him – probably some sort of really old guy sensei or something. Long beard, folded hands :P
2. our hero is teaching a sidekick how to fight (sidekick is smaller and still has baby fat ;) (pluralistic)
3. Our hero teaching three heroes who are teaching three more each (the network node image where the “node” is a person?) (pluralistic)

OR what about the mentor-in-making guy reaching out and igniting one of the nodes, the mentor badge igniting a series of nodes (the first on several strands) and the 3 super mentors with all nodes ignited? <---easier probably, but I don't know if it will look good.

Finally, can we get some gender balance? Since they're silhouettes we can do much about race, but some of the figures should be ladies ;)

@Chris – you are so patient and awesome. Thank you. We're almost there.

I vote for one final iteration and then Fuck it. Ship it.

    
    

    
  
Hey Laura,

To clarify, I do think the community finds the network interesting and valuable -- although its more about what the network affords them (to reach people and make a difference), not the network as an end in itself.

The story you outlined sounds interesting, but again, given that these have to work at 90px, its quite a bit of detail to try to fit in, and still communicate effectively.

The fact that this is a badge that will be shared and earned by many people across a network is probably enough in terms of creating a sense of solidarity throughout. 

Also, the character on the left is female.

I'd suggest using what we have here -- but if you're set on this other option we'll need to have more of a talk around a realistic deadline for executing on that.

-Chris

    
    

    
  
+1 to Chris' superhuman patience and skillfulness. 

I'd vote to just ship these: let them be a beta-trial, see how people respond, and if there's a need to revise the design, we can revisit. 

In the meantime, let's ship these good looking designs and get literally thousands of folks badged as Webmaker Mentor. :-)

Huge thanks to Laura for being the voice of the mentor team and helping get these launched.

    
    

    
  
Ship it, share it and let's get some user feedback!

Thanks Chris for your superhuman patience. 

Really like the trajectory from one maker to many...

    
    

    
  
Thanks guys!
That works for me, especially given the timeline and Maker Party stuff coming up. Let's see how these go over with the mentors and circle back once we get some feedback.

Here are the exports at 256px wide.

Let me know if you need anything else to help with getting these implemented.

-Chris

    
    

    
  

      
      
      
      

        Attached image
          
        Mentor in making 256
        — 
      

    


  

    
    

    
  

      
      
      
      

        Attached image
          
        Mentor 256
        — 
      

    


  

    
    

    
  

      
      
      
      

        Attached image
          
        Super Mentor 256
        — 
      

    


  

    
    

    
  
@ Chris: hey amigo. We're going to reopen this ticket. Let's talk later when you have a sec. :)
Status: NEW → ASSIGNED

    
    

    
  

      
      
      
      

        Attached image
          
        mentor badge v2
        — 
      

    


  
@ Matt: Building off the ideas of global community and knowledge sharing, here's another pass at the design that aims to capture those. Also, ties into the graphics on /teach. Let me know what you think!

    
    

    
  
* Thanks Chris. Let's go with this.
* Can you provide the source file so folks can re-size as needed?

    
    

    
  
Source can be grabbed here: https://www.dropbox.com/s/w8lduon4rmmfhdt/mentorbadge.ai

    
    

    
  
@Matt: Also need Super Mentor badge and Teach the Web MOOC badge v2(formerly Mentor-in-Making)

    
    

    
  
@All: Sounds like making a new badge (Teach the Web MOOC) will add complexity.  

Let's just ship the designs for the three badges now, and we can debate the naming in parallel. With just a few days to go, we need something out there. 

@Chris: do you have everything you need to push the three designs across the finish line? 

Thanks!

    
    

    
  
@Chris: when can you have v2 of additional badges?
Super Mentor is top priority

@Michelle: We re-opened ticket to create v2 of Mentor badge. So we have one badge ready to ship as opposed to three. 
Web draft copy here: http://blog.webmaker.org/mentor


Updated tech doc here: https://etherpad.mozilla.org/Mentor-Badges-technical-documentation

    
    

    
  
Hey all,

I'm a bit unclear how 'Teach the Web MOOC' differs from the mentor badge?
Is this just a participation badge for the #teachtheweb MOOC, or is it credentialing someone to be a teacher of the MOOC?

Is there criteria captured for this badge? 
That would help make sure the design supports the right ideas.


-Chris

    
    

    
  
Hi Chris,

The Super-Mentor badge v2 is top of the queue right now. 

Yes, #teachtheweb MOOC is a participation badge. It does not give permission to teach anything. Since the MOOC is almost over, the title Mentor-in-Making is no longer relevant and can no longer be easily dispersed via MOOC sign-up and claim code. 

Since Matt is on PTO I will update the technical documentation with this information.

    
    

    
  

      
      
      
      

        Attached image
          
        Super Mentor Badge
        — 
      

    


  
Thanks Leah,

Here's what I'm thinking for the Super Mentor badge.
It incorporates the visual language from /teach (which is also on the mentor badge), and levels it up by including the webmaker logo, signifying the recipients have been endorsed by us and meet a high level of quality assurance.

Let me know what you think! 

Thanks,

-Chris

    
    

    
  
@Chris- Yes! 
Looks great.

    
    

    
  
@Leah - are the criteria finished? Matt's away, but: https://bugzilla.mozilla.org/show_bug.cgi?id=874927

If yes, we could start issuing the mentor badge.

    
    

    
  
@Leah - good stuff, thanks!

-Chris

    
    

    
  
(In reply to laura from comment #62)
> @Leah - are the criteria finished? Matt's away, but:
> https://bugzilla.mozilla.org/show_bug.cgi?id=874927
> 
> If yes, we could start issuing the mentor badge.

@Laura:
does this work for you?
http://blog.webmaker.org/mentor

    
    

    
  
@Leah - nope. Switching back to this other bug. My bad, shouldn't have asked that Q in the design bug...
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: