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:

 

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.

Am I bombing on this prototype?

A few weeks back, I wrote about the "love bomb" experiment that Atul and I were working on. In many ways, I think that this project has more potential for impact than anything else that I have created while I have been working for Mozilla. It is the learning experience that we aspire to create- where someone is so completely motivated by their desire to make something, that they are compelled to learn or teach themselves something new along the way. Because of this desire to create an authentic hands-on learning project as well as the clear accessibility of the project, my colleagues at Mozilla asked Atul and myself to think about re-skinning the project as a potential campaign around Valentines Day.

In general, I like this idea. I like the thought of someone getting so excited about the thought of hand coding a valentine for their loved one.  I immediately drafted a few concepts:

1. A DIY love letter

 

version 1

 

version 2

2. A Love Generator- kind of the closest to an e- card maker

 

3. Magnetic Attraction- based on the concept of magnetic refrigerator poetry.

 

Immediately we had a positive response, particularly towards the "Magnetic Attraction" prototype. I showed this to several people in the Mozilla community and did some at - home field testing (re: my mother understood the project). I played a bit with the actual format for the interaction. The concern here was that the current X-Ray Goggles tool and/ or the Web Page Maker prototypes might be too high level for say, the audience who receives the Firefox newsletter. So I went to work trying to focus on how to communicate that something has "html" or "css" underneath it's hood. 

 

 step 1: select a template

 

step 2: select an asset on the template and drag and drop the magnets to remix the html.

As you can see from the mockup, I really limited where you can click with your mouse.

 

 step 3: voila. share through social network buttons

Looks good, right? Sure we would need to iterate on this, but this is a workable prototype.

Not so much- the problem that I am having with this, is that although it is accessible, and people who have some innate fear of html will be able to really just dive in- ultimately, they aren't tinkering or experimenting with a markup language. At the end of the day, a user is really just editing fields, as if this was a form. I suppose that if someone hovers over a

tag, then an explanation could pop up linking to some database like the MDN which could explain what that little strange object on a page means. But, I think that our goal at Mozilla is not to hide code, or to break it down to a level that is so obscure that you aren't even given the opportunity to experiment. That said, I'm not really sure where the starting point is at the moment.


My colleague Michelle Levesque, is working on figuring out appropriate "Web Literacy Skills" for Mozilla to support and develop around. The very first category of skills that she writes about is "Exploring". I think that this really hits the nail on the head in terms of why this prototype might not be worth pursuing- we are limiting exploration by curating what elements can be edited and how a user should try to edit them.

Of course, I am flip flopping on this topic and keep thinking about how we need certain parameters so that a learner can feel like they have learned something, even if it is a very small skill in the big picture that is webmaking.

On Inspiration and lovebombs

Mari Moreshead is awesome. She works at the Mozilla Foundation as the grease (wo)man, the person you go to when you need to get things done- and done well. She has personally helped me a whole lot- particularly during this one trip that I had to make while I was in Berlin with the flu, having to present Hackasaurus localization. Having a trustworthy, reliable and sassy co-worker is not only helpful, but it is needed in order to be a successful worker. Atul Varma and I were talking about her and thinking about how we wanted to thank her.

" We should make her an e-card."
" No we should make her an html5 lovebomb"
"Wouldn't it be cool to make a lovebomb maker that uses the Hackasaurus tools?"
"We could send lovebombs to all our co-workers who do small great things"

And so, we made lovebomb.me It started out as a simple sketch- and turned into this experiment in love and code. The idea is that you can send someone a lovebomb- or love note/ nod of appreciation and while you are doing it, you learn a little bit of html and css along the way. Here is one of the first mockups I made....



What was kind of fun and happenstance- was that I was running a bunch of workshops for teenagers at the exact time that we were tinkering with the idea. Atul had whipped up a prototype of what we are calling the Webpage Maker- a tool that will help users go from hackers to webmakers. I tested that tool with youth- and while iterating on both tools at the same time, somehow the two combined and became the current version of the lovebomb.


Designing the lovebomb has been a lot of fun for me- and it's rewarding because people immediately pick it up and want to just express joy or love or something happy. People smile using the tool.

I created a few templates, but I want to talk about one of them. It features a character, loosely - ahem- based on my colleague Chris Lawrence. Chris has a love of weird hats, masks and accessories in general (think- viking hats and gold sunglasses). I made this e-card in his honor, because he is another colleague of mine at Mozilla who is doing amazing work every single day. He isn't just working on one project - but possibly 30 at any given time. So, this is my way of giving him some "big ups."
Next steps- well Atul and I are working on a more polished iteration of the lovebombs - I hope to post some of my mock ups in the next few days. I see that this is a great opportunity to teach someone something because there is ultimately a huge DESIRE to make the end product. So I am trying to build out the mock ups and keep true to some of the core learning objectives for Hackasaurus. But at the end of the day, it comes down to this: when you are inspired - you will make things that are challenging and difficult to make-despite yourself. I am just lucky enough to have amazingly inspiring co-workers surrounding me.

Oh and Mari- here is your lovebomb.