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

Beta Testing Kitchen Tables

Imagine sitting in the kitchen with your friends, hanging out, chilling and making some cool stuff on the web. That's the idea behind the Kitchen Table event type that Mozilla is in the process of Beta testing for release in conjunction with the Summer Campaign.   This past week, I did my dogfoodin' and  Beta tested the Kitchen Tables event type with my family.

The Beta testing was scheduled for a two week window, that really coincided with Passover, so I decided to take this as a positive thing and do a "Hacking the Holidays" themed kitchen table. I had done that concept as a Hack jam with Mouse, but this was more challenging because it was with- the parentals.

THE INVITE:
I asked my parents if they would be up for spending some time and making some things online with me when I visited. I created a little url based on some discussions I had with other user testers to send out as an invite. I said it would only take 30 minutes and we could have tea while we were doing it. This was a difficult sell. My parents, both retired teachers, and honestly very supportive of the work that I do and are the first people on the soapbox about teaching youth to learn to code, were very resistant. My mother, who is a web and computer enthusiast agreed to do it, and my dad said he would watch and asked if there was anything with paper that he could do. I followed all of the steps in the wiki, but I frankly think that a lot of Mozilla's efforts do not reach this older audience. In fact, I would go so far as to say that Mozilla appeals to 30 somethings - teens but does not really reach out to 40 + users. I think that my sell only worked because I forced my parents to do it.

THE KITCHEN TABLE:
So, as I said, this was pre- Passover. My parents sat with me and Adrian (the boyfriend) and I took them to my kitchen table website and decide to teach them how to hack that. It was a bit crazy because I had to move fast to keep them focused. They really weren't super into it- particularly my dad. I don't think that there was a real value add for him in terms of hanging out and doing this, other than spending some time with me. Perhaps if he had a grandchild to do this with -- ahem, not suggesting ANYTHING! -- he would be more willing because it would be an activity that they could do together. We slowly lost him and just ended up with my mom.

 

The session went alright, we essentially made a goal of hacking the "kitchen table" website to be a Passover table. The hardest concept for my mom and Adrian was to understand that every piece of content needed to be on the web to  show up. For example, they needed to put images up on flickr, or pull from an existing website. My mom really wanted to just upload an image to the editor and be done with it. This is a really important concept that I think that we need to do a better job communicating.

After about 25 minutes of tinkering and joking- my Mom came up with this:

 

All in all- it was a success! My mom shared her link with friends and family. My dad, asked if I had something for him to read with, but I have a hunch my Mom will convince him to try it out on their own time. 

WHAT WOULD I DO DIFFERENT/ NEXT STEPS:

• I would have a better ask
• I would pitch the activity more casually while I was already spending time with them
• I would bring another laptop- I forgot that my parents only had one
• I would find webpages/ things that they are already interested in and hook them there
• I would give my dad something with paper to do- already in the works for the Missions project
• I am going to send out my Mom's website to her temple community and suggest that we do a bigger meet up to teach others how they can make their own webpages

Mission: Fun

The past few weeks I have been working closely with the Mozilla learning team to brainstorm, conceptualize and design what we are currently calling missions. The idea behind this is that anyone can play or make their own mission, or webmaking design challenge.

This was a bit challenging to conceptualize because we currently do not have a platform in place to layer on the content, however this is going to be designed and implemented by this Summer. In fact, after doing several sketches and collaborating with the special ops unit of "Team Mission" I came to the realization that I could essentially repurpose a lot of my thinking around the lovebomb interface that I had been designing for the now defunct Mother's Day campaign.

Members of "Team Mission": me, Erin Knight ,  Chloe Varelidi, Laura Hilliger, Michelle Levesque, Mozillian community members, Hive NYC and Carla Casilli


Mozilla is working on creating a Webmaker Tool, which essentially will combine a bunch of components from tools that Atul Varma and I had developed over the past year, as well as integrate some new and useful things to really help anyone become a webmaker, that is - make some stuff on the web.  Let me give you a little taste of what we are thinking about for this Summer.

Imagine coming to a webpage kinda like this:
(note: this is a wireframe- nothing here is look and feel)

 

Immediately, you will have the chance to decide if you want to take on a mission in the gallery or design one yourself. If you choose to "play" a mission- you move on to the next screen, which looks something like this:

 

Here you are presented with the mission and given some tips on how to accomplish the project using a two pane editor. (The editor itself might look different- this is just me repurposing wireframes a bit).

 Then you tinker and complete the mission and move on to share your work, which might look something like this:

 

(This might even be a modal window) Here you will have several options for sharing your work, including linking or downloading all the code. 

In terms of the "Make Your Own Mission" hackable template, I haven't really gotten super far in my thinking on this, mainly because I want to see what the team comes up with as a group in terms of possible kinds of missions, however I suspect that there will be a landing page for this that is somewhat similar to the Webmaker landing. This will be a more curated experience that asks users to choose what kind of mission they want to make. Based on this weeks conversations with the team as well as The Hive, I suspect that at a minimum there will be an HTML/ CSS template (the editor), a Popcorn template, and at least one analog type template. Kind of like this:

 

In this mock up I actually put in 4 template types- 2 Analog ones, I'm not really sure about this. The idea is that "DIY recipe" is kind of like a step by step guide- something like you might see on Instructables or Make.  The "Activity" template is for a physical event or something that you have to do in person. These might be folded into the same category at some point. I am  just trying out some ideas to move the project forward. 

What's next? Well, we are working on creating a series of mini game missions for the Summer in terms of learning content. We are thinking of this as a "Web Arcade." Through the experience of prototyping and user testing the Web Arcade missions,  we will be able to iterate and define the make your own mission section of the site. Throughout all of this we will be embedding various kinds of assessment and badges.  We have developed a production schedule that will allow us to launch the project in a series of phases and have a nice cycle of concepting, prototyping, usertesting and iterating.

You can read more about the plans for this by checking out our design brief or joining our Learning Community calls. Additionally, we have created a Flickr group for the learning layer of the project. I will be updating on the blog as the project develops.

What's in a designer 's bookbag?

From left to right: Reading materials, Grow a Game, Grapes, Laptop, Wacom tablette, laptop cleaners, pens, makers, pencils, dice, pencil case, scissors, sketchbooks, dongles, surge protector, ipod shuffle, index cards

At a recent workshop that I gave for a bunch of teenagers,  I was asked "what does a designer have in their bookbag?" by one of the participants. At first I thought it was a funny question and thought - obviously... metrocards, wallet etc. But after a little bit of  discussion, I dumped out my bookbag and watched the teens dissect my stuff.

The first things that they grabbed for (in order) were: my sketchbooks, my Wacom, my laptop, my books.

Although this was a casual interaction , it got me to thinking about a few things:

I am not just Jess, I am "Jess the Designer" 

This might be a silly point, but I realize that I represent some level of a career path that a teen could choose to take. So when they ask to see what's inside a designers bag, they are asking what it's really like to be a designer. They are curious about what putting on that "hat" or in this case, wearing that bag, would really be like.

Tools are personal

Everyone is intrigued by gadgets, but tools are personal. I found it intriguing that these teens who are passionate about technology first grabbed for my sketchbooks. They knew what they were going to find in there, my scribbles- plain ordinary books but they went for it. I think that like me, they crave something tangible. I like having accessible tools- since I design with community members and for participation, I try to have with me things that anyone can just pick up and use- that's why I have index cards, hello kitty markers, dice and paper. The teens asked me if everyone uses macs, or androids (my phone-  not pictured) and I told them that it was just what I used. I've talked about this before, but I am pretty agnostic about my tools: I use Adobe Photoshop and Aviary, I use a little of everything- and I like it that way.

Showing your bag is an extension of showing your process

At Mozilla, and just in general- the way that I work is called, "working in the open." I share the majority of my process- from sketches to interactive final deliverables. I think that sharing what you work with and how you work is just as valuable as the end product. Why? I value the experience and the craft of making something. Much of my stuff is made for the web, but that doesn't mean that I make it all on and with the web, I take my real-life personal and local world and experiences and bring that into my work.

What do YOU have in your bag? How do you share your process with your community?

How One Girl is Changing the Web

Zainab says it best:

"The Mozilla Hackasaurus workshop was a once in a lifetime experience."

From X-ray Goggles to Hack Jams, Mozilla is giving kids the tools to remix and shape the Web — moving them away from consuming what already exists and toward shaping and building a more awesome Web — and I'm thrilled to be a part of it!

Projects like Hackasaurus are helping to create a generation of Webmakers — and today I want to introduce you to Zainab Oni, an extraordinary 15-year-old who is not just remixing the Web, but is teaching other kids how to remake it into anything they want it to be.

Zainab is a sophomore at Hudson High School of Learning Technologies in New York, where she serves on the school's MOUSE Squad — a student-led technical support team that's part of a national program to help improve technology literacy skills. She's also a rising star in the world of hacking — something she recently discovered meant a whole lot more than just "snooping around."

Through a project led by Mozilla's Hive Learning Network in New York, we held some Hackasaurus workshops at MOUSE headquarters, and it was there that Zainab's understanding of the Web began to transform. Hackasaurus opened the door to a whole new way of thinking about the Web for Zainab, simply by exposing her to how she could create and change it. Now, as a Mozilla Youth Ambassador, she'll be taking everything she's learned to help facilitate Hack Jams with her peers at after-school programs later this year using Mozilla tools.

Take a minute and check out Hackasaurus to find out why it's changing the way Zainab thinks about the Web.

The online experience presented to most kids today is one that is delivered in a shiny, fixed package — but Mozilla is changing that. Just ask Zainab:

"We were introduced to Hackasaurus, a tool that makes it easy to mash up and change any website with the use of X-ray Goggles. You can remix any website and change it up to become your own...it was new and exciting."

When we launched Hackasaurus in beta, I saw kids eagerly interacting with the tools — and challenging each other in "Hack Battles," a super cool prototype we developed at last year's Mozilla festival — and I knew we had to grow this project and get it into the hands of even more kids.

And thanks to Mozillians like you, we are developing a summer campaign around learning and making. We'll be reaching out to folks of all ages and inviting them to take part in creating really cool stuff on the Web. And they'll get the opportunity to see what others are making across the globe and even the chance to hack each other's coded creations.

We're still putting the finishing touches on our summer plans — but you can sign up here and we'll keep you updated.

Giving everyone the power to remix, make, and share the Web is something we are committed to. Thank you for being a part of it.

Iterating on the Bombs

Love bomb Mock Ups

Here are some mock ups I've made for the Mother's Day lovebomb. All of the copy, of course needs writing.. but this is the general idea.

Landing page- I am not sure about this graphic.... or any of the copy. I think that I might revisit the graphic and possibly include a kid or something holding a "webpage" like a card. 

Step one: here's the templates. I cut it down to 6. (These templates might not actually be the final contenders) I tried to make the "steps" pages feel really clean so that if needed, in the future, this  could be re-purposed.

Step two- here the fun begins! I added in a mini browser view so that users can see that this is actually something that happens on a webpage. This mockup is as if a user has clicked on the text block and a widget will pop up to allow for editing. The widget is tabbed here so that a user can remix both the text as well as the color.

If you click on the html tags- (here the paragraph  tag) the whole page will ghost and the hacktionary definition will pop up.

Step 3: share page. The icons are for : twitter, mail, the url and grabbing the html code- I'm not actually sure if those are the right options- need to check in with the Engagement team on that one. As I look at the mock up here... I think that I need to move the graphic of the website up a few pixels- and also move the phat footer down a few pixels. I am trying to keep this page as simple as possible. I am wondering if there's some pre-determined text that mozilla can create for the tweets... and the emails.

First stab. A lot of iteration already is going on here, which you can see if you check out my Flickr stream.

but wait, there's MORE!

Here are a few more generic templates for the lovebomb project. A call to action, A fist bump- slightly revised and the masked lover- slightly revised from previous iterations.

Lovebomb templates

I'm working on some Mother's Day themed templates for lovebomb. Here's what I've got so far: