Friday, March 9, 2012

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:


A super simple, sweet card. Serif/ handwritten font

a little silly


 customizable (x= area to insert cute image of mom)

I haz the best mom (photo takes up background) a la I haz cheezburger


The timeline on this is super tight- so I will post as much as I can while I'm thinking through and sprinting.