Demo: Getting Badges in to Thimble

Lately we've been preoccupied with getting a working proof of concept prototype for issuing badges in the Thimble and Popcorn editors. As I've talked about before, badges give you the opportunity to gain embedded assessment and real time feedback during your web making activity.  Our goal is to get badges into Thimble by the Mozilla Festival, so we really needed a proof of concept as a jumping off point for us to move forward with iterating. Here is a demo of that prototype made by myself and Atul Varma:

You can check out the actual prototype:  here: http://thimble-badges-movie.toolness.org/

The prototype doesn't represent the look and feel or the user experience design, however it does explore all of the different components of getting a badge within the editor and allows us to see what the touchpoints are for the end user.

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.

Badges, Assessment and Webmaker+

I am going to talk to you about some of my thinking around badges, assessment and the often talked about, but never before explained concept of Webmaker+.  

When we talk about the tools and resources that we are building at Mozilla we often contextualize them as learning experiences. So, for example, you might go to Webmaker.org - find a project- make and publish that project and along the way gain some basic HTML skills. However, in our current model, you could very well walk away after publishing your project and have no realization that you just learned something. And- because of that, you might not be able to level up your tinkering to craftsmenship.  Check out the vidcast to hear more:

(and based on the unexpected fanclub I've gained from my singing on the last vidcast, I have some special singing action here for you today)

In the vidcast, I showed 4 wireframe iterations for incorporating badges and embedded assessment into Thimble.

Iteration #1:

I started to imagine the badges appearing as you accomplish various things, taking a cue from the Cheevos system. It would look something like this ^^ Cons: the badge is super intrusive and could be distruptive to the learners experience. Pros: the actual "ingredients" displayed in the badge

Iteration #2:

 

 

Imagine the orange tab subtly popping up almost as if it is coming out of the toolbar. You then have the ability to transition to the next slide where you can add the badge to your backpack and share via social media. But is this too subtle?

Iteration #3

 

badge icon in toolbar wiggle when you receive badges (nothing pops up till you click it)

 

on click, you can see your badges- so if you have earned 4 badges- it will appear as a slide show 

Iteration #4: Webmaker +

As you see here, we could add a nav bar that gives a user the ability to opt in to the community, once they join, they are essentially signing in to be part of the game. It then becomes almost like an exclusive layer that sits on top of the software- which by the way could be thimble and popcorn but also community designed tools. The badge here could actually reflect data that is unique to the user. So for example, if they indicated that they were trying to achieve the goal of learning HTML and earning the uber HTML basics badge, then the badge could reflect that progress as well.

Extra Iteration:

With Webmaker+, the badge backpack gets transformed into a user dashboard, where they could see their progress, but also control it- so they can set goals, join challenges, and add badges. 

This is an initial brainstorm. To get a better understand of what we are thinking about specifically at Mozilla in relationship to the badges that we issue, head over to Chloe Varelidi's blog ( Chloe, did the map I featured in the video). We have been talking about this webmaker+ layer for quite a while and have been letting the ideas percolate. 

In terms of feedback, I would love to hear from your thoughts, but specifically:

1.  If we were to implement the pink iteration (webmaker +) would the "dashboard" (last image above)  be something that lives uniquely on the webmaker site and leverages the Mozilla webmaker community, or would it be a more open ended tool that anyone, anywhere could tap into that gets featured and promoted through the Mozilla Webmaker site?

2.If you had the ability to curate your online learning and making - what kinds of stats would want to track?

Productionalize, Maybe

This blogpost is brought to you by myself + Atul Varma.

This week, I am working to streamline the process for contribution to webmaker Projects. Currently, that means fixing the process so it works internally, and then setting the stage for larger community involvement. I  pulled together some of my thoughts on the current process and a strawman to get things rolling in the vidcast below.

(WARNING: there is some Jess Klein singing action goin' on)

 

Note: I made Chloe look less skilled than she actually is for the purpose of highlighting some flaws in our current process.  Chloe is an uber talented designer and educator, and as I have said many times- there is so much more to the design process than code (ideation, asset creation, designing learning experiences etc.)!

So while making the vidcast, Atul and I talked about the areas of concern and he came up with an interesting solution prototype. Essentially, he took the idea of the form and put it INSIDE the actual project (this is using Thimble as an example). So check it out:

Here is a popcorn project "diy recipe" being made, using Thimble- although this process could be used to make any kind of project (Thimble and Popcorn included). The difference is that if it's a Thimble project, the project page needs to link to the Thimble project... because the project page contains the metadata for the Thimble project. If you take on look on the left panel, you are coding in all of the form fields.... which you then click publish and get: 

You see? It's a thimble page, crazy. Obviously- a bunch more work needs to go into this and we still need to resolve the majority of the questions that my vidcast posed, but I think that it's starting to get us moving into a good direction with some creative solutions.

Building the Next Generation of Web- Craftsmen

I was reading this article this morning in the NY Times by Louis Uchitelle about the American workforce and how we are losing our value of craftsmanship, and it got me thinking about the word "craft." 

Photo by Michael Falco of the NYTimes

We are at a stage where we are building up the contents of our "toolbox" at Mozilla, figuring out ways to sharpen those tools. We have Popcorn, X-Ray Goggles and Thimble- as well as learning projects that can accompany those tools within the context of the tool or in the form of a D.I.Y. recipe.  I am wondering, however, in the long run- how are we going to turn web-hobbyists into web-craftsmen (women, girls and boys)?  We are designing badge systems and trajectories, for our learning content at Mozilla,  which will reveal to our users pathways for further exploration, but in project based learning, I wonder what that extra secret ingredient is that will empower someone to go above and beyond and refine their work to the point that it is a craft.

Implicit in the word craft is some understanding of design, whether that be design of the system, the tool or the concept. In fact, the American Craft Museum (my former employer) has now changed their name to the Museum of Arts & Design. To some degree, the name change was because the term "craft" has lost its relevance in our society- people think of old women crochetting doilies when they hear craft. However, more and more I hear people reclaiming the word and using it as a brand advantage- something that was made by hand. The Renegade Craft Fair,  encourage local artisans to connect with eachother and show (and sell) their wares. Two key takeaways that I have from being a participant in their events is 1) a emphasis on hand- made design and 2) a celebration of community. I believe, these might be the two ingredients required for craftsmenship.

Do not call Atul Varma a codemonkey!

Design is a concept that extends far beyond "coding" when we talk about it in the context of webmaking. When someone creates a webpage, for example, a lot more goes into it than just implementing it- there is the concepting phase- where you brainstorm and make decisions on what and why of your page, the asset creation stage and finally the implementation stage.  It's the big picture.  The developers who I work with at Mozilla understand this. In fact, Atul, my thought partner at Mozilla, and co-developer of Hackasaurus hates it when people refer to him as a "code monkey" (someone who only inputs code)- and while I would only ever say that expression in jest,  the reason he gets so offended is that he is a craftsman. He researches, he tinkers, he looks for a community and ultimately, shares his work within that community. In short, he designs, develops and contributes to a community.

Learn about how much character (get it?) is inside your browser!

In the article, the author mentions how people know how to use their computers but they don't know how to build them- which got me starting to think about what the appropriate analogy is for the work that we do- because yes I could force teens to take apart their computers - but I think that doesn't resonate in the same way that it did for us in the 80s/90s. I think that the canvas for today is not the computer, but the browser- and I feel that deconstructing that browser will help learners understand what is possible- and why it is important to refine your craft to the point that your work is not just digestible data, but beautiful content that is accessible. Atul and I started to dabble with this idea using the Navigator badge concept- but I would love to push that further, and not think about the assessment, but the lessons here.

Hive NYC has developed a community of practice amongst professionals and learners

The community piece is a bit tricky because there are so many ways for us to engage communities. One way, is to build communities of practice with professionals and youth at like minded organizations- which is what we are doing with Hive NYC at Mozilla.  Another way would be to meet youth where they already are, which is kind of the beauty of modular concepts like Open Badges- because it wouldn't matter what circle a learner is based in, because they would be able to show their skill through an understood social currency that is backed up by a portfolio of work. Then again, there are other ways, like imagine mixing the making piece within the context of a community of online practice- like hacking facebook to be the best facebook within facebook- with your facebook peers (oh yeah, that sounded like Inception!)

I often say that the web is a handcrafted community and medium- one that was created by individual people who work to make it reflect of our own local interests. If we are to elevate the level of innovation and representation within the web, we need to develop a community of web- craftsmen. That means providing tangible learning tools and projects, trajectories that implicitly incorporate design thinking and integrating with communities of practice. 

Inspiration, History and a Challenge

Today kicks off Mozilla's Summer Code Party, and coincidentally, also would have been Alan Turing's 100th birthday. io9 wrote a nice piece on Remembering Alan Turing and the BBC has produced a series of essays that memorialize him as a hero, intellectual and innovator. Turing helped to pioneer key concepts that not only changed the face of Computer Science as a field, but to some extent invent it. He is known for formalizing the concept of an algorithm as well as creating the "Turing Machine" which is seen as a pre-cursor to the modern day computer.

Photo via the BCC

What is an algorithm? Essentially, an algorithm is like a recipe- a step by step method in the form of a list that helps you to perform some kind of function. Algorithms are crucial to the way that computers process data. This is because to be successful in remixing content using a computer, you need to rely on systems thinking. I know, more jargon, but hear me out- systems thinking is how things influence one another in relationship to the whole or the "big picture". So, for example, when you are building your first webpage- as many people will be doing today in conjunction with the Summer Code Party, while at first you might focus on the single thing that you want a webpage to say, sooner or later you are going to realize that a webpage is not about one asset, but about how all of the different components connect to one another within the page, within the system of pages and within the larger world wide web.

 

Make your first web page with the Thimble 

While much of Turing's history is entwined with the history of war and of our country, his history is also crucial to the history of our internet and the way that we go about not just computing but learning about computation. Just like the concept of the algorithm, Turing's contributions did not just affect the field of computer science, but it changed the way that we think of science as well as how the everyman relates to data. As we take some time this summer to take courses or just appeal to the local geek for tech support, or maybe go to webmaker.org to improve our various skills and web literacy, I challenge us to learn a bit about our history and how we got to where we are with computing.

This is the branding for the Mozilla Summer Code Party- pretty fantastic, right? Get together, make something and learn while you are doing it.

When you say that you work within the Technology or Internet field, people assume that you are working on something that is "state of the art" or brand new, which frankly, is true to some extent because due to the very definition of how the web is created- you are making something. You are not just a consumer of another persons work. However, what we are doing is building upon one anothers work, and I mean that in a very literal sense- in that we are hacking templates and remixing snippets of code. However, we are also being inspired by one another and the history of makers and innovators that have come out and created the field. So take a second, and learn about historical figures and designers- who masterminded the blueprint for how we navigate the world and communicate with one another. Perhaps you will be inspired, or maybe just motivated enough to make your own small mark on the web.

Here are some resources:

Alan Turing, on the BBC
Mozilla Webmakers site
NYTimes Technology section
The Computer History Museum

There are so so so many more, if you have a resource, please share.

Revised UI/UX for the app formerly known as Webpage Maker

Over the past couple of weeks we have been user testing the Webpage Maker tool as well as some of the learning projects associated directly with it. As a result of this, I see that there are several touchpoints within the interface as well as the overall user experience that need to be modified. I pulled together my thoughts and revised mockups (created by myself and Chris Appleton) and created this screencast. Since I last wrote about it, the project has been renamed "Thimble." You will see that name being used throughout this screencast. Take a look at it, enjoy, let me know what you think ;)

Curate your Learning through Webmaker Projects

Have you tried to learn how to code, and signed up to get weekly instructionals? Did you stick with it? Ok, did you stick with it past week four? If you did stick with it-are you proud with what you made? And, finally-if you are proud of what you made, could you show a friend how to make that web project?

In my totally unscientific poll of asking everyone who comes into my walking distance-I have learned that the answer to the majority of these questions is no. I guess that the reason that I was even motivated to ask these questions is that from my years of trying to learn how to code, I pretty much made it through the first few weeks on pure wanting-to-be-a-geek desire alone, but then lost that spark when things got complicated because I had no personal interest in the projects assigned to me and let's just say my work ethic fizzed out.

There are tons of things that you can make with the web

This got me to thinking about projects-what would be interesting to learn? In almost every class (whether it be graphic or web design) I've taken I have been asked to make the logo, business card, stationary, portfolio site suite. Frankly, since I was learning, they sucked. Doubly frankly, when I left school I had no diversity in my portfolio- but I did have a pretty damn good set of outmoded designs to send out with my resume.  But what would I have wanted to make? What would have be better for me to learn to expand my skillset. Because there are many solutions to this question-at Mozilla we are working on compiling a suite of projects to help webmakers and future webmakers sink their teeth into projects that they find interesting. In turn, the learner can curate their own making experience.

Sometimes you need a project to help you get started

A project is a useful way to frame your webmaking because it helps you to:

• Come up with ideas
• Learn something new
• Find a like-minded community
• Get motivated

So what does this mean for Mozilla? Well, in the past I have talked about the Webpagemaker-a two paned editor that will give you responsive feedback on your coding. Projects are learning challenges presented as hackable webpages that can be tinkered with inside the Webpagemaker tool.

Note: in previous blogposts I referred to projects as missions- we changed the name for many reasons, but ultimately to be in sync with other Mozilla initiates that are launching at a similar time.

In conjunction with the Summer campaign we will be launching 5 "Mozilla" projects-themed under the umbrella of Web Arcade. These are going to be game like projects that teach you the basics of html and css while you are making actual things.

Chloe Varelidi has been posting some of her brainstorms around the Web Arcade Projects.

Here is one project that we have been working on, mocked up by Chloe called Internet Famous. The idea is that a user can learn how to make their own internet meme, such as serious cat, pictured above.

Laura Hilliger wrote about one of the projects that she is developing for the Web Arcade here, the idea behind this is that you are remixing a webpage that is stuck in the 90s.

Members of Hive NYC will be working on several projects to launch in conjunction with the Summer Code Party, including Writing a Chapter of Inanimate Alice by using the X-Ray Goggles to hack a story. This will be a D.I.Y style project.

In addition to Mozilla projects, we will be working with some partners for the Summer Code Party to make their own projects. So, for example one project will be "How to customize your Tumblr" theme and another might include how to make animated gif like imagery only using HTML and CSS.

As I mentioned in an earlier post, we are also creating a pathway so that users can make their own projects and submit them to the project listing.

Yes, this is not a brand new idea, sites like Make and Instructables do it well, but the reason that Mozilla is doing it is that we have an amazing diversity of people who are working together to build a community of practice around webmaking. While that might translate to remixing, tinkering and hacking things up, it's that Nike spirit of just do it that motivates people to go, to learn and to bring a little piece of their local world into this handcrafted community and canvas that is the web.

Webpagemaker, Missions and Wireframes

Last week I shared some sneak peeks into the "Missions" project. Over the course of the week I have worked with my team and gained some clarity around the scope of the project- and surprise surprise have a ton more questions. In an effort to gain this clarity I worked closely with Michelle Levesque and sketched out some wireframes and mockups. I am going to try to walk through them here.

However, before I can do that, I would like to start this post with a fail. I made this mockup here trying to combine the "WebpageMaker" tool with the "Missions" concept and mocked that up using the openbadges.org template and came up with this:

 

After mocking it up, I showed it to people and realized that I couldn't communicate the idea simply and the feedback proved it. I was conflating two distinct things: a tool and a project/ learning experience.  So, that got me back to the drawing board (literally, I just drew this on some big paper): 

 Note: this is best viewed on my Flickr feed because I added notes so you can see what things say and mean.

This wireframe shows two separate pages: a tool page and a projects page. Let's start by going down the "Tool" page trajectory. You start off by landing on the Webpage Maker tool page. It looks like this:

 

 The main button here takes you directly to the 2 pane editor.  The features talk about features for the tool, which for the purpose of the mock up, I made up. (note all graphics are placeholder). So, you click on the editor button and get a modal window, like this:

 

You are asked if you want to start from scratch or use a template. If you choose make from scratch you go straight to the editor and get a bare bones webpage. If you choose use a template you get taken to a Mission that asks you to build a webpage by using a template, more on that in a bit.  So, you then go to the editor:

 

 (it will look sorta like this. Basically the two pane editor and two buttons: share and save. Save will give you a link to the url and when you return to that url you will get the page in the editor, Share will give you this:

 

Now, let's say you just come from the Projects page (aka Missions). You start out here:

 

You have 2 options: Play or Make a mission. Let's start with playing (btw this needs copywriting). You click the "play a mission" button and get this:

 

Here you can decide which mission you want to take/make. You choose one. You either get the mission loaded into the 2 pane editor or something that is more like a recipe, like this:

 

This gives you an option to tweet your completed mission to a gallery, but it's a pretty static page with information. If you had chosen "use a template" to make your webpage from the tools page, you will get that mission loaded into the editor.  Okay, back now to the "Make a mission" button that you might have clicked on the Missions landing page. You click that and get a page like this:

 

I kept this image x-large because this feature is important. It takes users step by step through making a mission for someone else. After a user answers a question, the next step is revealed. I only mocked up a few steps here- and need to finish, but the idea is that either the user is going to get a template to hack for the editor or a form to complete for the steps and then they get their mission. Then, the user has the option to share that like they would any other site or submit it to the gallery to be remixed.  For the summer campaign, this is submitting a form and will have to be manually accepted.

 

So, if you are still with me, which you deserve some sort of badge for just hanging in here, I have some questions. The whole right side of my wireframe, seems like it is something that could actually live as part of the Make site. Essentially all the missions link off to other places, for now that's either the webpagemaker or wherever a user is directed via the DIY recipes- in the future it could also include popcorn maker. I need to figure out where this "lives" or just who owns it. Another thing you might be wondering about is badges:

 

A user will have the opportunity to get a badge at the point when they are "sharing" their project. For the summer campaign we are going to offer a Participation Badge. This badge will celebrate your involvement in the Summer Code Party. The goal is that for the Summer Code After Party we will issue evidence based and community/peer assessment badges.

So that's where I've landed for now. Tomorrow I will be meeting with the Make website team, the Learning Missions team and the Engineer team so I suspect there will be some level of iteration going on, which of course I will report back on.

Keep Calm and Code On

I love running.  That said, I am often frustrated that I am only a beginner and I have days where I just suck or moments where I can't even get motivated to get out the door.  In these moments, I often look to my community of peers for support. Sometimes, and this is possibly a running nerd confession of some sort- I look to Pinterest.  There's a plethora of inspirational quotes, photos, posters etc for runners- and runners constantly are posting this kind of stuff around them to get inspired. Things like:

 

 

Yes, they are a bit cheesy- but in a very real way they are motivating me to go out and run. I think part of it is that a poster on some level is a form of establishing your identity. I put a running poster up- all of a sudden, I'm the real deal- someone who cares about running. On another level, it truly is a constant reminder to stay focused and not lose faith in what I want to do.

I got to thinking a bit about how this same motivational strategy could be applied to webmaking and people who are learning code. Frankly, I made this connection because despite what I say, learning how to design and program for the web is new and can be hard to do. Sometimes, you just need that little dose of inspiration. I wonder, what motivational sayings we could dish out to the newbie webmaker, to keep them motivated while simultaneously allowing them to self identify as webmakers:

or....

Obviously I'm joking around on some level- but I do think that this relates to the work that we are doing on integrating badges into projects like the Missions that I wrote about earlier. I think that we need to develop a community of webmakers, and doing this means elevating role models who users can identify with,  establishing a language around the work that we do- Keep calm and code on, and as always, integrate play into our programs and initiatives.

* note: thanks to Charley Miller for wordsmithing the Keep Calm Code On poster