JESS KLEIN: Yo Momma is da Bomb

So, I am back on working on the Mother's Day campaign for the lovebomb. I originally didn't want to work on this project because I felt that the project had too little learning involved and that we were essentially starting the user off in a sandboxed environment. We made some changes and I think that now it might be an acceptable low hanging fruit way to get started with playing around with HTML. Here's the low down:

CONCEPT
The concept is to create a tool for individual and collaborative letter sharing and storytelling. The project is entirely web-based, in which participants remix templates to express their love and sentiments for mothers and friends, in turn learning some very basic HTML and CSS in the process.

WHAT IS IT?

A method of building webpages from templates
A narrative experience
A publishing platform combined with broadcasting capabilities
A learning tool- like bumper bowling for making simple webpages

WHY?

1) Provide an approachable, fun on-ramp into our learning offerings

2) Teach a little bit of code, without being too intimidating for a n00b

3) Grow our base of supporters

4) Create a unique method of narrative discourse

PRECEDENTS

Lovebomb.me - obviously this is the first iteration of the tool.
What's working: emotional design, people immediately "got it", Fun templates
What's not: not enough guiding, you need to enter the tool with a certain comfort level with code.

Webpage Maker- this was actually a pre-cursor to the lovebomb. The idea behind this was to provide a stepping stone for users who excelled in Remixing webpages to move closer to more concrete webmaking.
What's working: Simple design, templates, split screen view
What's not: No instructional overlay or any hints in the templates html/ css to guide users

E-card sites: Jib Jab, Blue Mountain cards, etc.
What's working: Some level of remixing, personalization and sharing
What's not: Not truly collaborative, and not digging into how the web page was made.

2 panel editors: jsbin, jsfiddle htmlpad etc.
What's working: super clean design, easy to see what you write vs. what's goin on the web
What's not: no specific projects that are coming out of it or element of learning

DESIGN QUESTIONS

What kind of learning experience is a user gaining by being subtly being introduced to writing code this way?
How is the tool given new meaning by layering on Mother's Day content?
How can this experience feel authentic while being embedded in an engagement initiative?
What approach is required for on-boarding a non-coder into engaging with the underpinnings of the web?

AUDIENCE

This is a tool for non- coders. People who came to the site either through Join Mozilla or other engagement channels. I am designing this tool in such a way that it can be used by adults or youth. Unlike Hackasaurus tools, youth are not the primary target.

MOCK UPS

I haven't picked up from where I last left off on the tool mockups, but I did sketch a few ideas for templates: