Make - First Interaction Design

 On the Webmaker community call and on his blog this week, Brett Gaylor presented that we are currently aiming to solve several key design questions for Webmaker. You can read about the challenges and solutions here.

In an effort to move Webmaker into a space where from the moment you come to the site - you are encouraged to make something (what Brett is calling "make - first" interaction design) , I am going to show some prototypes that I have been working on. 

You can see all of them here in larger, more legible form.

Even though the fidelity of my prototypes might seem more polished then usual, as always please note that these are mockups and prototypes designed for the purpose of iteration, so please give me feedback and ideas for things that I should consider when moving forward with the design. 

First, lets take a look at the Landing page. The idea here is that from the moment that you land on Webmaker.org you are given the call to action to tinker and interact with content in a very real way. What you are looking at is actually a meta "Animated webpage" project that is comprised of several types of projects - so in essence the content type becomes a gallery. The page is instantly hackable and as the user, starts tinkering with an x-ray goggle like interaction- they can choose to deep dive and reveal the more advanced editing tools. While this is a mockup for the landing page - you could imagine that it is also a prototype for how a user might be able to pull and view content from the gallery - so the user gets the opportunity to digest a project first as consumable content and then engage with it as a hackable medium. This kind of interaction was deeply inspired by my reading of the work of Mimi Ito - particularly in her book Hanging Out, Messing Around and Geeking Out. Here is what it might look like with some timely content.

The next mockup is a first iteration of what a gallery could look like for us. A user does not have to be logged in to view the gallery, but if they are they will have a more personalized lens as well as the chance to engage with the content creators. 

In this mockup (which admittedly is the most nascent) you see a view of what a user might see if they are clicking on a particular users name - it's a filter of the content that the user made public. This could include their projects, badges or assets. Ideally this page will have some level of hackability - a la MySpace - so maybe the CSS of the page could eventually be modified by the individual users - since in essence this becomes a bit of a portfolio page. To be clear, I'm not saying it should look or feel like MySpace - but there was a certain level or ownership and creativity around that kind of personalization.

Finally, I'd like to share with you the prototype that I hacked up with Atul yesterday. It's a prototype, so you know don't tweet far and wide - but you can check it out to start to see what it would be like to have hackable content on a landing page and remember to click "D" for deep dive to bring that content directly into Thimble. 

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.

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.

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.