Evolving Webmaker in 2013

"Allow events to change you. You have to be willing to grow. Growth is different from something that happens to you. You produce it. You live it. The prerequisites for growth: the openness to experience events and the willingness to be changed by them." - Bruce Mau from Incomplete Manifesto for Growth

2012 was a full year for us at the Mozilla Foundation - we released Thimble, a universal navigation MVP, soft launched badges, refined and launched Popcorn 1.0 and became an active voice for Web Literacy values in the community. So where does that leave us for 2013? As Bruce Mau's beautiful sentiment here reflects, now is the time for us to live in the moment and to be strong enough to allow ourselves to be changed or affected - by users, by people who do unexpectedly amazing things with our tools, and by people who are standing next to us in the crowd and trying to get their own voice heard.

2013 is full of a lot of opportunity.  For Webmaker that means evolving our design to be a real - world learning experience. By that, I mean that we need to focus on collaborative webmaking.  At our hack jams, community calls and festivals we have seen the value and success of peer to peer learning and we need to leverage the experiences of those events and have them inform our design.

We have laid the ground work for this in 2012 by introducing badges into our ecosystem. Badges are naturally equated with skills, however they need to have a level of social value in an ecosystem to have any meaning.  That's the problem- badges for the sake of badges leave you feeling pretty flat, so you need the entire ecosystem to live and breathe as a social, collaborative environment where you have supportive peers who are invested in the skills, but also - importantly - what it takes to earn those skills. That's our mission: create an environment where making = learning. Concretely that means that our website is going to shift from a site to a platform and our suite of tools are going to evolve into a more unified experience.

Over the past few weeks, a bunch of us on the Webmaker team took some time to do the blue sky thinking that needs to happen to take a design concept to the next level. We came up with some ideas and prototypes and I am going to share a few here.  Each prototype represents a concept that we want to explore in the New Year.

1. Your Creative Cloud - We want to make it easy to collect, share and remix content from your world - and this means everywhere that you are going- whether that be collecting content from your mobile device or browser and adding that directly to a project to remix on Webmaker . Maybe in the future that means remixing Webmaker content that you have clipped or saved from your cloud on to some sort of media clipping gallery -- remixing that on the web in a more distributed manner.  Click here to see the enlarged mockup. 
 

We feel that this is one area that Mozilla can lead as we are uniquely suited to be effective here because of the precedent of bookmarking in browser in Firefox as well as with our work directly around identity in conjunction with Persona. To be clear, we don't need or want to lock you in to a uniquely browser based experience - but the opportunities for this association and leveraging of the Mozilla brand and design values are quite large. We know this is a win for us, because our colleagues over at Firefox are in- line with our thinking and we are starting discuss opportunities for us to collaborate on this piece of the puzzle.

2. Collaboration as learning is a big theme for us, not just in the mockup I am showing but it is going to be a consistent and fluid theme within our tools and platform.  In the mockup above you are looking at system for using to revision history as a way to document process. Here, just like in etherpad, you are able to record your Webmaking sessions and replay them at different points in your timeline. You can see the work that you have done and how you constructed a project,  as well as how a peer who is helping to hack your project made the changes that she did. This allows for asymmetrical as well as symetrical collaboration experiences.

3. Making our tools speak the same language. We are trying to make the experience for an average user easier- this means putting some controls in place so that the user starts to recognize conventions and see how the Webmaker properties relate to eachother.  As you can see in this mockup, I am starting to experiment with building a more unified experience- which includes: having a unified (and single) login for Webmaker, building out common terminology, controls and User Interface - and incorporating the tools into the same experience. To be clear- this does not mean that Thimble goes away, it just means that we figure out a way for our tools to speak more clearly to the end user.

 

4.  Creating opportunitites for Community of Craft - working with peers and mentors to build the web in a social, real way. I demo-ed this prototype at the Webmaker community call and Bobby Richter helped me present it:

Imagine that you logged into webmaker.org and landed on the above gallery page.The view that you are looking at- is as if you have followed several other Webmaker users who have posted projects that they made as well as "themes" that you might have followed- for example- video projects or projects about activism. Any of these projects are remixable. You also are seeing badge graphics which, when you click on them, open up to a sub-gallery of sets of projects connected to various skills. For the moment, imagine that you are Secretrobotron going on to this page, you see a cool project by your friend and you click the green remix button which opens it directly in the editor. 

These are examples of some of the things that we have been thinking about. And this is exactly how we want to be working--- putting out crazy ideas, testing them out, seeing what sticks and iterating. Shout outs to Chris, Kate, Bobby, Atul , Brett, Chris, Erin and everyone who has been on Webmaker community calls in 2013. As I said earlier, this is an evolution of our thinking so all these ideas came out of lots of ground work, user testing , hive pop ups and festivals.

That last prototype was built in a period of 48 hours by Bobby, myself and Chris Appleton- so if all it takes is 48 hours to get some collaborative Webmaking action - imagine what we can make happen in 2013!

Reference: Check out this great post by Bobby on the prototype implementation.

Rethinking the Architecture of Webmaker

A few weeks back a bunch of us at Mozilla  had a design sprint to begin thinking through what it would mean for someone to come to Webmaker.org and experience it as user-not a visitor. We started to come up with a few ideas that push forward our thinking on Webmaker as a product. Some of this thinking is building off our work on Designing the Platform to teach the next generation of webmakers. Here are some takeaways from our latest conversations:

In order for us to convert visitors to users, a few things need to happen:

1. The information architecture of the overall site needs to be revisited
We can't think of webmaker.org as a regular website: we need to develop a strategy for people to immediately engage with making something on the web. This will require us to significantly rethink how we are framing our tools and content. The broad strokes view of this here is that overall, there needs to be less of a focus on tools and more movement towards the opportunity to make something.

The current architecture:

The drafty future sitemap:

click for a legible view!

So the key takeaways here are 1) we are moving away from challenging the user to choose between tool and project- they are at webmaker to make cool stuff- and learn while they are doing that- so let's make it easy for them and 2) overall this is a more personalized experience- there are user profiles, dashboards, content that is unique to the user based on their webmaking history, etc.  You can check out the etherpad where we are working through the details here.


2. Single sign on needs to be implemented 
In order to implement a lot of our vision for Webmaker, we need a single sign on- and a built in value for that sign on. Right now the singular value proposition for signing in to Thimble is badges. Yeah, it's more than just a gaming point, it's embedded assessment- but we could be doing so much more - users could get analytics on their webmaking-what are their trends? The kinds of things that they make on a regular basis-only Popcorn projects?, what kind of code do they prefer? JS, pure HTML? How many remixes have they made? The sign on can happen at several different touchpoints- the landing page- or via a button in the universal navigation.

So the landing page might end up looking more like this:

 or this:

 

This will affect users in several ways, the least of which---they can actually be "users" of webmaker.org- save and share their work, but it also takes me directly to #3:

3. The universal navigation needs to be implemented across all properties

We currently have a version of what could become the universal navigation implemented in Thimble:

 

Eventually, this is going to live across all webmaker properties and  transform into a more dynamic navigation/dashboard/ toolbar. So for example, instead of just linking to "Projects" it can link to "My Projects"

 
4. More user- centric content needs to be prioritized 

User centric content will live across Webmaker, so that it becomes a more social platform- and importantly, taps into the social platforms and places that people are already inhabiting on the web outside of webmaker.

One thought is to make a dashboard- that offers users a conceirge to help them figure out what they want to do, but also provides them data about their work, suggestions of things to make based on their usage habits.

 

Another thought it to build out the gallery to be more social and user friendly- so that might mean that a user can follow other users, or recommend peers for badges, create working groups or collaborative hacking sessions. But for starters---we need a gallery, one that integrates user generated content and mozilla starter projects. It will need to be curated but this can also be done dynamically based on user preferences and interactive filters.

There will also be places for people to store their work, collect assets from across the web and initiate collaborative webmaking.

5. Identify touchpoints for "teaching" or peer mentoring.

This one is a little bit less defined than the others, mainly because we need to work with the Learning/ Hacktivators/Hive/ Community teams to identify the need and opportunity here. In general since we see webmaker as a self directed, online experience similar to physical events like the Mozilla Festival-we want people to be able to share lessons learned easily with their peers.  This probably won't mean one section roped off for educators, but an embedded experience, perhaps when a user makes something-they can share a video documenting their process with a friend--- maybe on publish you are giving a hacktivity kit - there is a lot of interest here, and a chance to be innovative.

So that's the general direction of our thoughts over from the UX camp. It's a lot and it's messy but it's all good. Would love feedback. This week I will be working on building out the Webmaker Product vision. Much of this might morph into something else- but I want to document it so we can trace our thinking. I will post on the vision next week.

Lot's of good thinking is happening all around, however, I recommend reading these posts by Chris Appleton that focus on how we might approach Projects, and User Accounts:

Project Discovery

Workshops - a Space to Create

Redesigning Webmaker

The Value of Showcasing Craft

Lately I've thinking been about how we can value the craft of webmaking within the context of Webmaker.org. The topic is fresh on my mind because we are starting to seriously think about how to develop out a gallery presence for the platform that is true to the spirit of our community. This got me to researching a bit about how other web properties highlight this stage in the design process.

Threadless does a nice job of surfacing the process of individual t-shirt designers on their site. Very simply, they have a curated section of blogposts featuring designers going into detail about how they made the product.

First they profile the user, and then they show great process shots like this one below by Joshua Kemble:

Additionally, they have a critique section of their site, where users can rate in-progress shirts and provide feedback via commenting. Again, super simple and effective. There are so many reasons to do this kind of highlighting of process, but for Threadless, it serves three functions well: 1) as an educational resource that isn't in your face "here is how it is made," but in fact offers many ways to make similar things and 2) as a way to elevate their product- they highlight masters who have done cool work, and show you how to do that too and 3) as a way to build community.

Sketchpad.cc highlights process but in a very different way. In their gallery, instead of just showing the end product, they include the code which can be seen as a video replay. I find it compelling because it allows you to see the different decisions that the creator made when designing the animation. In turn the entire process is treated as a journey. I've seen other sites do similar things, and in a less organic way, a lot of cooking websites do this with their video documentation of their step-by-step tutorials, but I like that it's not really a tutorial- that the verb - or the action is actually an appreciated part of the design- possibly even elevated higher than the end product.

So we have two forms of process documentation so far, and my last site that I am going to talk about is so documentation heavy- that it might blow your mind: Github. Like other version or bug trackers, here you find a community of people who are collaboratively crafting documentation for their project. I like this as an example because you can see the history and different phases of the project.  So on an incremental level you can see how the project was built up, who forked what code, who hacked what - and from time to time, particularly with their "Issues" section of the app- you can see conversations about how decisions were made.

It seems like there is some awesome formula for success here- like 1 part documentation plus 2 parts social plus 1/8 part inspiration, 2 tsps of process and 4 cups design thinking = craft. 
Right now we are still in the research phase of the gallery for Webmaker- but what's clear to me is that it needs to accomplish a few things: it needs to be social, inspiring, educational, live across the web, and very importantly - have some level of showcasing the craft of making things on the web.

Building and Protecting My Community

During my day job, I am a designer at Mozilla and I advocate for learning how to understand, contribute and code the web so that you can protect it. I often talk about how the web is a hand crafted community that can only represent the world that we live in when individuals build webpages, so that they can make their mark and be part of the conversation. Two weeks ago, when Hurricane Sandy hit New York, it devastated- and in many ways destroyed the community that I grew up in- Rockaway Beach, New York. I went to my neighborhood and saw that people could not communicate with eachother or the world outside Rockaway- no cell phones, no internet, no power. When I returned home I built a small website- rockawayhelp.com just to give people the information they needed and to provide a way for families of locals to feel more connected. It was this act of webmaking that launched my participation in protecting and rebuilding my physical community.

I feel that the work that I do in the open source community and the open educational resource community prepared me to take on this small bit of leadership. Rockawayhelp.com to date has a minimum of 6,000 hits a day. Our facebook account has 8,873 users and our twitter account has 450 users- not ground breaking, but it's something. We put up a small volunteer form and in the first day got 600 volunteers. We put up a help request form and got 150 requests. We have active conversations on our social media channels and have a real active presence on the physical streets of our community- going into houses, cleaning out basements, connecting people who don't know where their family members are and working with the vets at Team Rubicon and the software developers at Palantir.  Here are 5 lessons that I learned as a designer- that helped translate into community engagement and activism:

Lesson 1: Working in the Open- Creates Community
When I was sitting at home worrying if my parents survived the hurricane- I went online and connected with friends and other Rockaway residents who were watching the local news and having panic attacks about their homes and families. We shared information, brainstormed ideas and gave each other the confidence to venture back into our community when the storm ended. I was scared, but knew that I had an online community. This is something that I learned while working at Mozilla- if you work in the open, you can share information and connect to a like- minded community. We do this daily with our Webmaker activities, starting with Hackasaurus two years ago- at first it was just some geeky librarians, Atul and myself- but then it expanded into this massive OER that people immediately responded to because we blogged, shared free resources and created content as a group- failing publicly and then iterating and improving publicly.

Lesson 2:  Leverage the Expertise of Others
So this one was a no- brainer, but in a disaster like this a lot of things needed to be done- and quickly I saw that I was not good at everything. Just for the website effort- we leveraged Blue State Digital who kindly volunteered with us and helped us to set up a database- an effort lead by Matt Kelley. Additionally, we had some who were good at blogging and others who were on the ground and could give us up to the minute info to communicate out. And when we got those volunteers--- and saw we couldn't figure out how to efficiently organize 1000 + people in one day- we partnered with Team Rubicon who had systems in place and a plan. This is commonplace in tech, you can start a project on git, and then get a collaborator to take on parts and be your wing-man.

Lesson 3: Put out Rough Prototypes- and Iterate
Doing software design- I usually throw out an idea that is crap,  then user test it- figure out what part of it works, and then build on that idea to make a new prototype. It's messy- but it works because you get your concept out there in the hands of real users. We are constantly doing this at Rockawayhelp. We really have never dealt with any of this before- so we have to be alright with trying things out, failing a little, and building a more efficient way of doing things. A simple example of this was that we first were standing in front of the local church and collecting addresses for people who needed help and then assigned them to crews of volunteers. We quickly learned that this wasn't the best way to go about things because we were too few people to get everything done- so we streamlined the system by creating forms.

Lesson 4: Peer Mentoring =  Best way to Learn a new skill
For the past few days I have been working with Palantir on mapping needs and getting help out to the community. I learned their system pretty fast by getting mentoring from Alec and Dave, who are experts in the software. There are also a ton of things that I had no clue how to do- like how to break up concrete or the best way to lift heavy furniture- that we have to do over and over and over- so I ask people who look like they know what they are doing to teach me and then I try it out myself. It's just like a hackjam- where I am learning how to code something by sitting near a code ninja.


Lesson 5: Show Up, Be Present- Get Social Karma
Every good hacker knows that they need street cred- whether that is just being at conferences or making yourself known through some form of social currency (like badges) and that holds true for community activism. You need to walk the walk- pick up a shovel, be authentic and ultimately make an effort to proactively rebuild and empower your community.

Just like the web and open source world, your community and neighborhood is hand crafted and it can only be protected if you learn the inner-workings of it and geek out a little by making it all that it could be.

rockawayhelp.com is up

 

A bunch of my colleagues at Mozilla and I worked with the office of State Assemblyman Phil Goldfeder to get up rockawayhelp.com for residents of Rockaway to get accurate- up to date information. We are still working to figure out how to set up some sort of SMS system to help people as they have little- to - no access to wifi but have some ability to do text messages.

Rockaway after Sandy

I really am very upset right now and can't yet put into words what it feels like to see your community taken over by the ocean, so for the moment I am just posting some images of what I saw today.

Photos by Adrian Fraser and myself

Designing the Platform to Teach the Next Generation of Webmakers

Mark wrote about vision, then Erin wrote about product definition, and then Chris wrote about the engineering and so now, I will give you the fourth chapter in the Webmaker epic: how we are designing Webmaker.

Several weeks back I gave a lightning talk at the Mozilla all hands in Toronto on this very topic. Here is a screencast of that (slowed down to human speed- so it's longer than 3 minutes)

Concretely, what does this mean we are doing?

1. Evolve the brochure site into a platform
By evolving the architecture of Webmaker to be focused on the maker (learner) we will shift from a brochure site into a platfrom. We will be designing an experience for a user who is coming to Webmaker to make something. At Mozilla we are super successful at activating users to take action at physical events and meetups like MozFest - we want to harness that grassroots spirit and concretely mobilize users to feel empowered to come to Webmaker and make things. This will mean right from the start giving the user simple calls to action to make, meet and learn.

Above is a sketch of what the future webmaker.org could look like.
The focus will be on things that you can make and users will be able to open projects within or be directed to the appropriate tool to make that project.


2. Unify the user experience
In order to evolve the site we are going to focus on unifying the Webmaker user experience and interface. This means:

• designing a unified login
• establishing common terminology, controls and user interface
• incorporating the tools into the same experience
• designing learning pathways that could span multiple tools and projects
• defining calls to action focused on making something
• creating opportunities for self organizing and personalized curation of learning
• empowering the user by giving them the ability to set goals, receive data and feedback on their making and learning activities
• evolving the branding so that the language and visual vocabulary focus on making

One aspect of this will be implementing a universal navigation (wireframed above- click to see more exploratory images). This is a navigation that we will be implemented across all properties in Webmaker, and allow the user at any given moment to tap in to their projects, learning dashboard and community. At first we will be implementing a version of this in Thimble and as we iterate, we will roll it out across Webmaker- apps and web properties. The idea is that it will be a personalized navigation- so it will speak to your unique Webmaker experience.

 interactive filter (sketch)

projects based on your interests

When you log in to Webmaker through Persona, you will be able to access a dynamically generated set of projects that are catered to your specific interests - through some kind of interactive filter. In conjunction with the projects, the personalization will extend throughout the site - you will see events in your region, people who have similar interest, skills that you can improve upon etc. Some of the specifics of this are still being brainstormed by our Learning and Engineering teams, however this is just a rough sketch of what will be possible in the future.

3. Design with learners, iterate, release- rinse- repeat.
Our m.o. here is to design not just a user experience- but a learning experience. We will be designing with learners and those hacktivators who are in the position to teach or empower learners so that we are constantly testing, iterating and improving our product.  We have a fantastic community of learners and hacktivators in the Hive - in New York, London, Berlin, and beyond. Additionally we have a large extended community of individuals passionate about contributing to an open source and open educational resource project. We are going to work with this community as a lab- where we can launch early and often, user test and develop this platform out to be a tool that they will use.

Image credit: Hive NYC- check out the blogpost here

There's a lot of work described here and we aren't going to being rolling it out all at once. Our next major milestone will be in November. We are going to be releasing a bunch of half baked and fully baked ideas at the Mozilla Festival. It is a great chance for us to user test concepts, incubate ideas and elevate great ideas into our products.  It's going to be a fantastic few days where our designers will be out in the field doing what we do best- making stuff in the open, with passionate community members. To continue to be part of the conversation, please join the Webmaker mailing list or come to our weekly calls.

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?