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?

Mobile Webmaking Concept : Meeting Makers Where They Are

A few months ago I was at a Hive NYC Summer Code Party pop up at the YMCA. It was the dog days of summer hot and youth came to visit us in the gymnasium to hack on computers after a full day of swimming, running and all sorts of outdoorsy goodness. It struck me that asking them to stop what they were doing and go on computers to learn how to code was a bit counter intuitive - and certainly not meeting youth where they are. If we are going to be engaging the "next generation of webmakers" we need to meet youth where they are,  be flexible and mobile.  As we know--- the web is not just accessed from a single computer- but from many different kinds of devices.

So, long story short- after some additional thought provoking conversations with Mark Surman about the possibilities of mobile- I came up with this concept sketch for what is kind of like a swiss army knife mobile concept that combines Thimble, the X-Ray Goggles and Popcorn functionality in a mobile device.  I'm going to walk you through the concept sketch, but you can also see it on Flickr

 

A user has the option to take a photo, video, audio or text message with their mobile device

 

She has the option to turn the {image} into a webpage

She gets prompted to choose a template from the mobile projects gallery. 

(reference: Webmaker projects) 

 

Now she has the ability to touch page elements

    and edit- just like she would with the X-Ray Goggles

 

She now can share the webpage

 

by clicking on the actual url or sharing directly on the social network sites 

(similar functionality, ui controls etc to Thimble and Popcorn "publish")

Now she has the ability to also edit the webpage (on the phone eventually) but also on the Thimble online web editor.

 

If you have an android phone, you can try out a proof of concept prototype of this by visiting http://tmc.toolness.org

Atul Varma created the working prototype. Be careful though, because this is a prototype the images are set to save for only 24 hours.

What's next?  While this is really only an experiment,  I want to iterate on this a bit so that it can open up the door for more collaborative webmaking--- think: webmaking with friends (a la Words with Friends) where you can collaboratively work on a webpage with a friend all within your mobile device. I would also like to see if I can run a session on this at the next MozFest in London. 

Atul and I previewed this for the first time yesterday at the Mozilla All Hands meet up in Toronto. While I am here, I would love to talk more to the fab Firefox mobile team to pick their brains and see if I can leverage any lessons learned from them.

test

my thesis class voted for this style and to continue with sea monsters.
i am still feeling insecure about it. I'll do some more tests this weekend with it.

backgrounds

style frames

Wireframes, Website and the big picture

I made some wireframes for the project website. Basically the components will be:

* I italicized big deliverables

ABOUT
mission
friends and allies
contact
fact sheet
day of action?

SPREAD THE WORD
tell a friend
logo, banners, video
posters, stickers
social networks


ANIMATION
PSA
GAME AND QUIZZES
fact game bubble game mobile/map game
PARENTS AND TEACHERS
fact sheet printables lesson plans




My thinking behind these two versions of the wireframes is that the visual hierarchy will be:
1. brand
2. what you can do on the site
3. a taste of the content
4. ways to connect through the site

I am not 100% in love with the way either of them look right now. I am going to take a break for a day and come back to it.

Taglines

Coastal Safety Locative Media Campaign
Coastal Safety Locative Media Tools
Coastal Safety Locative Media and Narrative

Beach Safety and Awareness Locative Didactic Media

Map Prototype

View Narrative Prototype in a larger map

Where I am

I haven't really had time to post my thoughts, but I am chugging along. What I have been doing for the past two weeks is clarifying my narrative, talking with my professors at Parsons (Anezka, Dave, Chris, Josh), talking with my contacts in the advocacy groups (mainly Jeanne Dupont) and starting to write and sketch up ideas for the ever-important narrative component. The picture posted here is a screen shot for a prototype that I am working on. I have not even addressed style but this is my 2nd go at making something very vectory. Anyway, I will post that when I make more progress on it and have specific ideas for questions about it.

Style Test

presentation-2nd attempt

Thesis Class Presentation

Summer Reading Review

My thesis writing class is having a quiz on the summer reading today. Since I did the reading in June, I felt that I had to re-read everything. In doing this, I took some notes on the reading, and tried implementing a few of the techniques to my current concept. I found the reading useful and it made me feel more confident about writing and speaking about my idea. I pulled together my ideas into a little slide show while I was writing. Although I did this because I didn't have any note paper around when I was reading, I did find it helpful. I do have a few questions even though the reading packet was VERY thorough. For one, I am unsure how the "iterative writing process" works when I completely change my concept. Do I go back? According to the reading, I don't because that is recursive. Also, I am still a little unclear on how much I need to document in my interviews. I conducted 4 phone interviews the other day. I had a hard time writing every single thing that I said along with the responses down, am I supposed to document every part of this communication?

Where I am

I realize that if you are reading this blog that you have no idea what's really going on with my thesis. This is partially because I have just been using the blog recently to collect sporadic thoughts, meetings, classes and inspirations. Anyway, enough excuses, this is where I am.

I thought about water.
I read a lot about water.
I got mad about the water crisis.
I learned about sustainability vs. resilience.
I thought about thinking global but acting local.
I turned to the NYC waterfront.
I initially learned about watershed and sewage issues.
I read and read, articles and books (which I will talk about in detail another time)
I learned of another issue that is deeply affecting NYC waters.
I learned that every year people are drowning, dying and getting hurt on NYC beaches
I learned of the lack of education support tools for NYC beachgoers
I learned of the lack of an educated beach culture in NYC.
I talked to some people from the parks department
I talked to some lifeguards
I talked to some beachgoers
I talked to some kids
I felt compelled to focus my project on developing needed tools.
I freaked out a bit because this is a big departure from my original concept.
I wrote a survey to get an idea about what kinds of questions I should be asking
I am now trying to get more specific about my design questions and user group.

So, that's where I am. I am letting things resonate in my head right now and am starting to come up with ideas for what kinds of deliverables would be appropriate. I am somewhere between website, psa series, flags, print materials and an interactive map. It's a lot, but at the heart of it all are the PSA ads... so I am going to think about that first. yikes. craziness.

Muir Webs

Yesterday I learned of a data visualization tool known as the Muir Web. (I found the most coherent explanation on the Manahatta Project website). I am not sure how I can use this as a tool, but it certainly speaks to issues of interconnectivity and how the ocean is part of a living dynamic system.

According to my professors Iain Kerr and Petia Morozov from Spurse, these webs need to be heterogeneous, nested, multi-scaled, emergent and multi-modal.

Presentation Notes

My first presentation of my summer work went alright. I think that I could have articulated my ideas a little bit clearer, but perhaps that is just a sign that I need to define my project a little bit more clearly even for myself. I did get some good feedback :

- think about distribution- where will my project live?
- why am I not interested in creating a PSA?
- i need to focus on my craft and jump into prototyping.
- i am interested in creating something that is visually magically and emotionally tangible (not so much feedback but it was really interesting to hear someone describe my interests as such).
- have my thesis question solidified

I know that these are all questions that I have been asking myself, but I think that hearing other people say that outloud was good.

Gaming and my animation

In my story, Mica (the boy) is going to initially be seen playing an interactive game in his room. I have been thinking about everyones great feedback on this blog, but particularly about the fact that my story might give the impression that my thesis point is about computers and technology being evil. Obviously this is not the case (otherwise I will be getting this master's degree as an act of masachism). However, I was thinking that one thing that might be good to do was to integrate his skills that he gains from technology (for example choice making and navigation) to help him through the garden in the later part of the story. I could possibly have a "game vision" sequence where the scene looks like a video game from Mica's perspective.

Thoughts? I think this might help shorten my story as well because I could take out other parts that aren't as necessary- maybe the part when Mica learns to garden (although I personally love it) because Mica will have a similar sensory experience when he touches the pond water.

Character/Concept Art

Since I have been mainly focusing on the story and script for the past 2 weeks, the drawings that I have done are mostly sketches on the subway. I did a few with color. I do feel that I am getting somewhere with the protagonist- boy character. Here are some sketches that I did. They are mostly the boy and the mother. They are from my sketchbook so the paper is a bit see- through.

You spin me right round....

Today I did a ton of sketches which I will scan in tomorrow am. But the quick and dirty vector version of what I am dealing with is below. Basically I am practicing drawing frontal, 3/4, side and all the hot mess of in betweens. I also quickly colored one of my sketches- it's a colored-in version of a low res crappy scan, but I wanted to get an idea to see if I should pursue this girl any further. Any thoughts?

Character Design

I have been slowly revising my concept for my thesis. Long story short - I want to do an animation that deals with the issue of losing touch with authentic experiences due to the digital world. I am coming up with a concept for a story but it's not quite clear in my head yet. I do have a character evolving in my head and I did many sketches today trying to figure out where I am taking it. I also tried digitally inking one of them. This is the first time that I did that- it could use a lot more finessing and I think that the issue I had with this one is how I scanned it in, but other than that I am optimistic about this technique. The line quality was greatly compromised here- and I can go on and on about what went wrong with the inking process, but it's definitely a "first attempt".