EYE Witness News: Promotional Content on Webmaker

On January 28th Mozilla will be celebrating Data Privacy Day. This is an international effort centered on "Respecting Privacy, Safeguarding Data and Enabling Trust." There will be content on Mozilla, Webmaker and Mozilla Advocacy. The Webmaker team had previously developed privacy content with the Private Eye activity (featuring the Lightbeam add-on), so the primary challenge here was how to promote that content via the Webmaker splash page. This is actually a two - fold design opportunity:

1. micro: how might we promote the unique Privacy Day content on the splash page for the 28th?

2. macro: how might we incorporate promotional interest-based content into the real estate on the Webmaker splash page on an ongoing basis?

Constraints: needs to be conceived, designed and implemented within 2 weeks.

Start from the beginning 

I took a look at the current splash page. The content that we are promoting is directly connected to the Mozilla mission, so I identified a sliver of space directly above the section where we state the project's values. My thinking here is that we are creating a three tier hierarchy of values on the page: 1) we are webmaker - we are all about making - and this is what you can do right this second to get started, 2) we are deeply concerned about [privacy] - and this what you can do right now to dive into that topic and 3)we are more than just making + [privacy] - here are all the things that we value.

I SEE what you did there

That sliver was great, but it was below the non-existent but deeply considered fold of the page. If this was a painting I would create a repoussoir element to bring the users attention to the core content  by framing the edge. In the painting below you can see that tree branch that directs your attention directly into the heart of the composition.

Jacob Isaaksz. van Ruisdael, The Jewish Cemetery (1655-60)

Building off of my thinking from designing the Mozilla snippet and the onboarding ux,  I wanted to make this repoussoir element something that a user might find quirky, whimsical or relateable. All of the other elements on the page were expected and kind of standard elements for a webpage. I needed to create something that would be subtle yet attention grabbing.  Looking at subject of privacy, I immediately had associations with corporations and individuals big- brothering me as I visited web pages. I realized that the activity we were directing users to was called private eye - and this led me to create a small asset that features an eyeball that follows your cursor around as you explore the splash page. On hover it will flip and direct you to the activity.This worked for desktop, but for mobile we would have to simulate the action by having a simple CSS eyeball animation center aligned on the sliver. Major props here go out to Aki who had to invoke the pythagorean theorem to get the eye to follow the cursor without leaving the sclera.

  I did a study of eyeballs on redpen and immediately got a ton of community and staff feedback - which told me two things: 1. it was a conversation topic and 2. people liked the very first eyeball that I drew. 

My javascript now has a variable called ‘pythagoras’. HAHAHA TAKE THAT, MATH.
— Social Justice Mage (@gesa) January 14, 2015

Let me give you a walk through

From Mozilla's perspective, we are testing:

• whimsy vs. traditional promotional placement 

• mission driven content 

• how many people are we getting to engage with Webmaker and sign up for new accounts

What's Next Up:

• This will be deployed on staging on Monday and then our goal is to go live on January 28th, which is Privacy Day!

• Now that we have a promotional framework, figuring out how to incorporate a richer learning experience around mission - based content.

• Users can opt into enrolling in a sustained challenge - based Webmaker activity. Almost as if it's a virtual Webmaker club.
  
  
  Shout outs to the team that made this possible: Aki, Andrew, Erika, Paul, Dave

Virtual Hackjam: Emergency Hack Lab

It's almost a year. A whole year - since the day that my life changed when Hurricane Sandy came and hit my hometown of Rockaway Beach, New York. I'm pretty emotional about it, but as I always say - the best form of revenge is iteration.

Last year, when the hurricane hit, I scrambled with local hackers and friends to pull together emergency web resources. It wasn't an easy task because we had amazing constraints: no power or wifi in the Rockaways, limited ability to travel to and from the area, and little news presence (among many other things).Things that we did: created paper prototypes for forms and interactions between locals in need and volunteers, and then we made digital tools to solve the problem. We even had a hackjam a few months ago in conjunction with the National Day of Civic Hacking to start thinking about this. We made it through, and eventually emergency response turned into rebuilding and life started to kinda feel like a new normal.

Then something happened - in Oklahoma. Tornadoes.  In a funny twist of fate, I got contacted by Luke Crouch who works at Mozilla with me (although I didn't actually know him until this moment). Luke reached out to me because he was basically doing the same stuff that we were doing in Rockaway several months before him and wanted advice. Then, I was contacted about another Mozillian - Stormy Peters - from Colorado, where there were massive floods. She also wanted advice and us Rockawayites knew all about flooding so we were able to give her more info than she ever would have wanted. I'm sure that you are seeing the theme here: emergency + hackers = emergency hack lab.

This Thursday - Saturday I am going to be hosting a virtual hackjam in conjunction with the Mozilla Festival. At the Festival I am going to be running what's called a scrumboard session on designing an Emergency Hack Lab. This means that I am giving a 10 minute talk on civic hacking and I will announce the goal to create an Emergency HackLab kit for people to pick up and use when an emergency strikes in their community. Then asynchronously we have a list of subtasks that people can complete to accomplish the overall goal.

You can check out the scrum tasks here. Feel free to add to the board and/or pick up a sub-task.

Right now we will be having virtual contributions from Rockaway to Oklahoma to Nairobi - it would be really great to get some local civic hacking action going on in your community. Join us, this is going to be a global hacking party!

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.

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.