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. 

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.