ENGAGEMENT: Ship privacy content for MoCo's Privacy Day campaign

[HPaulJohnson]

If we decouple new onboarding work from privacy theme, we still need webmaker.org content/landing page for MoCo's Privacy Day campaign.

As background, one of the primary CTA's in this engagement campaign is "Learn" which will point to webmaker/MoFo content.

Existing teaching kits would appear to have too much information density for the average Firefox user (which is what this campaign will drive to our site) and we don't have clear pathways on those pages for long-term engagement (i.e. create a webmaker account).

Phase: Design / Build / Ship Owner: @HPaulJohnson Decision: @thisandagain Consulted: @LauraHilliger, @edrushka, @DaveSteer, MoCo engagement Lead design: @iamjessklein Lead dev: @gesa Quality: @thisandagain

Thoughts on alternatives that are low-bar and that we'd be able to produce by 1/28?

[HPaulJohnson]

New to github so still figuring out how this works but, @thisandagain @cassiemc @secretrobotron @xmatthewx @edrushka @hannahkane @LauraHilliger would love your thoughts on the above in time to report back to MoCo engagement with a rough plan by Tuesday.

[hannahkane]

I liked @LauraHilliger's ideas from the onboarding thread, so I'm c/p'ing them here.

Of these three ideas, I like the browser privacy one the best, because I think it has the most potential to answer the "but I have nothing to hide" argument. I think some sort of illustration showing that everyone does in fact have certain information they want to keep from certain people (e.g. do you want your boss to see your medical records, your partner to know you've been looking at engagement rings, or, um...your stalker to know your location (probably not that specific example :))).

I know the "learning by making" aspect of Webmaker is pretty well codified, and I'm new to these types of conversations, so forgive me for bringing up what I'm sure is well-trod territory, but is it necessary to always include a Make in every learning experience? In some cases, an interactive experience might be enough to achieve the learning objectives (i.e. when the learning objective is understanding a concept like privacy). The assessment piece might be as simple as adding your own example to the list of privacy scenarios you're concerned about.

Laura's ideas: 1) [honing in on personal privacy] a character in front of a window and outside is flashy lights, billboards and advertisements. The learner pulls down the window blind for the character, we produce a message about how privacy is a personal right.

2) [honing in on passwords] a user holding a mobile device with the security screen on and the "password" says "password. We ask the learner to change the password to be more secure. Once they do, we produce a message about how privacy is about protecting your data from anyone you choose (or personal right, both work well)

3) [honing in on browser privacy] a user types in a holiday gift (or a hilariously low brow, pop culture search). The learner has to delete the browser history (using the Goggles to remix it to have "innocent" content) so no one knows what they're getting for the holidays. Once they do, we produce a msg that says something about how Mozilla cares about privacy across the board.

Potential learning objectives for any of the above: Use X-Ray Goggles to modify text and images on specific web pages Make use of keyboard shortcuts (i.e. for copying and pasting) Demonstrate an interest in personal privacy (this one would require a "learn more" or some other opt in mechanism)

e.g. keep the learning objective simple, simple b/c we can't define an audience or skill level really.

[LauraHilliger]

+1 to those ideas I was playing around with in issue #52 (thx @hannahkane for moving them over). Pinging @iamjessklein too :) On a related note @HPaulJohnson - you're on the thread where the privacy team has asked us to remix a slide show. @dajbelshaw and I were already talking about the Privacy day campaign and expanding Web Lit Basics curriculum to include Privacy. For reference (and so you can file issues against curriculum), we have a curriculum repo

[iamjessklein]

These are all great ideas. I tend to like to start out teaching around privacy by relating it to my personal privacy. It can be a high barrier to go directly to internet privacy because there is general fuzziness around the terminology of "privacy" vs. "security" etc. I like the pieces that are relate-able - like the password idea that @LauraHilliger proposed. I wonder if there is a way for it to be integrated into an actual experience (vs. just an "activity")? What if there was something in the sign up process that revealed all of the steps that we take to protect a user's privacy? (totally thinking outloud here)

@smithisgeneric had some great ideas and a nice entry level kit in the works. She described all of that work here

One more thought ---- is the goal for this to convert in user's joining?to get them to make something? to tweet? to learn something? Depending on the goals, I would optimize the interaction design for that.

cc/ @smithisgeneric @toolness

[toolness]

I was just re-reading the Privacy chapter of Danah Boyd's It's Complicated (PDF) and noticed a few things:

When teens—and, for that matter, most adults—seek privacy, they do so in relation to those who hold power over them. Unlike privacy advocates and more politically conscious adults, teens aren’t typically concerned with governments and corporations. Instead, they’re trying to avoid surveillance from parents, teachers, and other immediate authority figures in their lives.

I think this doesn't just extend to teens; for instance, victims of domestic abuse may be seeking privacy from their spouse. There isn't a lot of obvious overlap between this need for privacy and someone's desire to be left alone by the government, or to control the kinds of data corporations have about them.

As Boyd's book explains, people use a variety of ingenious technical and social strategies to achieve this, e.g. whitewalling, social steganography, deactivating social media accounts while offline, changing social norms to make it clear that technically accessible content is off-limits, and so on.

In the spirit of "meeting users where they are", I think it could be useful and relevant to educate people about these kinds of things, even if they don't necessarily have much to do with the browser per se. Because when it comes down to it, privacy is a lot bigger than just your browser.

This suggests that there might be lots of offline activities folks can do to learn about privacy, e.g. talking with the authority figures in one's life and establishing ground rules, et cetera.

Regarding passwords, it might be useful to take into account the social customs surrounding them, e.g. couples sharing them as a sign of trust. For instance, rather than simply saying "never share passwords with anyone", which people are likely to ignore, it might be useful to either recommend alternatives that maintain the social custom while minimizing potential fallout, or at least provide rationale for why sharing passwords with even your most trusted partners may be a bad idea in the long-term.

(That said, aren't passwords kind of 2010? Most vital services provide two-factor auth these days and it seems useful to educate folks on its benefits.)

[xmatthewx]

+1million @toolness

[iamjessklein]

Great reference @toolness , ultimately this comes down to understanding what we mean when we say "privacy" and that people need to have an awareness of privacy issues regardless of medium (analog or digital). I particularly like the approach that you are taking here:

For instance, rather than simply saying "never share passwords with anyone", which people are likely to ignore, it might be useful to either recommend alternatives that maintain the social custom while minimizing potential fallout, or at least provide rationale for why sharing passwords with even your most trusted partners may be a bad idea in the long-term.

I like the idea of framing the conversation/lesson/activity in a positive and proactive lens that doesn't leave the end user feeling like they should live in fear. I recently was looking at a review for the movie Citizenfour in Variety stating that "The movie that did for cell phones and laptops what “Psycho” did for showers" - I think that is the exact opposite result of what we want. We don't want people walking away from an activity feeling helpless - which can happen if you just surface information without given instruction about what to practically do with it.

After the hurricane hit New York in 2012, many people were concerned about their privacy when they were using public wifi hotspots (the only internet available to them). Were the forms that they were filling out with all of their financial information secure on government websites like FEMA? I wonder if a topic like this might fall into the category of everyday privacy. I could imagine us building a campaign activity around #everydayprivacy that we continue to develop out with practical information and community response as people, users etc. voice their privacy questions.

Another area of privacy concern that affected communities post-Sandy include data and file storage - particularly with music files and image files on sites like iTunes and Dropbox. What does it mean when I put my stuff on the "cloud"?

[HPaulJohnson]

Lots of good stuff here, thanks all.

To answer the question re: the goal for this campaign, the primary objectives are to 1) Teach the user something about privacy (to "payoff" the "learn" call to action in the main campaign) AND 2) convert these users into webmaker accounts so that we can develop a relationship and teach them more things over time.

I'm trying to understand what's feasible within the time frame, what's the most low-bar and what could best meet our two objectives.

I like @LauraHilliger idea but wondering if any of them could be built in the needed timeline? Would be ideal to have them integrated into the actual experience as @iamjessklein suggested but, again, unclear to me if that's at all possible on this schedule.

If not, perhaps our best best is to develop @smithisgeneric ideas on an entry level kit?

I defer on what's the best content as long as it's low-bar (think first time WM users from Firefox) and can incorporate sometype of long-term engagement CTA (signup for account, publish, share, etc).

[HPaulJohnson]

So. many. good. ideas. So. little. time.

There's a lot here that I think we can campaign around in the future so let's come back to it. But given we got pulled into this campaign late by MoCo need a quick solution.

@edrushka reminds me of this great page we created for the Fall campaign: https://webmaker.org/en-US/private-eye. It fits most of our objectives: simple, fairly low-bar and, via privacy badge, has a create an account mechanism.

Erika and I will do a quick audit of those pages and recommend any tweaks necessary to make it work for this campaign. May require some dev support but should be very light-weight. @thisandagain I'll touch base with you shortly to make sure this works from a product perspective.

[OpenMatt]

Next step: Paul is going to update this thread based on conversation with TPS group today

[cassiemc]

We need a RACI for this ticket, too. /cc @OpenMatt @HPaulJohnson

[HPaulJohnson]

Still confirming with MoCo engagement but tentative plan for Privacy Day campaign on 1/28 is:

• Promo on webmaker.org
• Featured privacy-themed learning activity using existing content: https://webmaker.org/en-US/private-eye
• Promo via blog and social channels
• Engagement email to 10K webmaker contributors

[simonwex]

Moving RACI to issue description

[LauraHilliger]

@simonwex add me as a C on that thar RACI?

@HPaulJohnson Stacy got permission from SpiderOak to remix this however we like (you were CC'd, but the email is from pre-break so I'm not sure if you've talked to her since?) Not sure if we have time/bandwidth, but thought I'd throw it in the issue.

http://zeroknowledgeprivacy.org/library/why-privacy-matters/

[simonwex]

@LauraHilliger done!

[DaveSteer]

@simonwex can you add me to the RACI? Probably as a C. Thanks!

@HPaulJohnson and I are also thinking about a potential OpEd on 'Learning Privacy'. Let me know if anyone is interested in contributing. I'm going to get started on a draft this week. We're also collaborating with the MoCo engagement and policy teams on a Twitter Chat on data privacy day.

[HPaulJohnson]

Added to RACI. Scheduling kickoff shortly.

[dajbelshaw]

@DaveSteer @HPaulJohnson I'm happy to help with the OpEd if you'd like my input. :-)

This slidedeck from last year may be of some use: http://www.slideshare.net/dajbelshaw/privacy-getting-beyond-meh

[HPaulJohnson]

@LauraHilliger RE: zeroknowledgeprivacy content, MoCo was leaning towards dropping it as they thought it was too dense for their campaign/audience. Their preference is the to use the "private eye" content as it's more "low-bar." Confirming today at their weekly check-in.

[HPaulJohnson]

Update on deliverables for privacy day campaign on webmaker.org from kickoff meeting:

• Create promotional space on main splash page featuring a privacy-themed CTA, likely above "our values" section and below primary webmaker CTA. Note: this space will be designed for future re-use in other engagement and marketing campaigns.
• Create small promotional space on subpages for reinforcing campaigns throughout site, likely below main nav. Again, this will be reusable space for future campaigns.
• Use "Private Eye" make as primary content/landing page for campaign. Modify existing page to remove "claim a badge" CTA at the bottom and replace with a signup for Webmaker CTA.

[OpenMatt]

• This all sounds good to me.
• Just wanted to note that there's additional privacy-focused content here, if needed: https://webmaker.org/en-US/resources/literacy/weblit-Privacy

[LauraHilliger]

+1 sounds great (sorry I couldn't make the kickoff). Working on credibility at the moment, but if we have time to get a simple, simple privacy module for club leaders out the door pre-Privacy Day, we'll update this bug. Not for inclusion on main CTA, but in other posts/comms or in promotional spaces on subpages.

[iamjessklein]

I just want to check: if I complete the design by next Tuesday - is that enough time for development? cc/ @gesa

[iamjessklein]

Just updated redpen with two mockups that show the touchpoints:

where we can insert the promo space on webmaker:

where we can input the prompt for Webmaker join on the Privacy Splash:

(please put comments on mockups in redpen)

[DaveSteer]

Cool! Just a quick messaging thought -- can we say that 'every day is privacy day'? I'm just worried that, for most people, 'Data Privacy Day' doesn't really mean anything. Plus, broadening the message gives this more of a shelf life. Thoughts?

[smithisgeneric]

Hive Toronto curriculum on privacy is in draft (text form).

If there is any outstanding interest in having a new activity or two to profile on Jan. 28th I can put the Data Trail Timeline and/or Coach activities into Webmaker activity templates (without any associated badges)

[iamjessklein]

Just doing a quick once over on Webmaker, there are actually a few touchpoints for promo content that we could leverage.

• landing page = the sliver of space in between the onboarding section and the values section , also almost like product placement in the messaging on the onboarding section
• explore page = featured content in the top row of cards
• events page = listed as a top level event
• teach page = flyout

All of these assets could have some kind of brand harmony for the promo. In terms of the heartbeat, I suspect that we could essentially brand some of the content that @smithisgeneric is currently developing.

Thoughts @thisandagain @HPaulJohnson

[gesa]

Hey @iamjessklein! Lots of great ideas! but they also leave me with a whole bunch of questions =/

what is the "privacy splash" that you redpenned? where does it live? does it already exist? (like, are we talking /privacy-makes ?)

As far as promo touchpoints are concerned:

• landing page as in the page we call "splash" or "home"? big :+1:
• explore page if you're referring to the gallery of makes, I'm not sure we can influence it like that
• events page also not totally sure what you mean here. Is there an actual event created already for privacy day? if so, I'm not 100% confident I can wedge it in to the top of the list. that list uses the API to list events based on date. I have to look in to it (and/or bug @gvn about it)
• teach page what do you mean by flyout? traditionally that's like a dropdown menu, but i'm not sure where it would go on /mentor (which is currently the teach page)

[iamjessklein]

Hey @gesa thanks for the questions.

• landing page cool. will mock up once i get the assets from @HPaulJohnson
• explore page - yes, it seems like there are a handful of privacy related makes - is there no way to force certain content to the top 1 or 4 makes?
• events page - again, my thought was that if there was an event created - based on timing it could be on the top - and potentially stylized. Is that not possible?
• teach page this could be something either like a ribbon, banner, stamp some kind of sticky. Depending how this is done, it could be on every page

[HPaulJohnson]

Waiting to hear back from MoCo about an official graphic for this campaign to incorporate into these promos. In the meantime, I'll draft messaging but want to understand all the places we need copy for. Based on the above mockups, I'll come up with copy for:

• Small banner at top of webmaker.org below nav
• Horizontal "sliver" on webmaker.org homepage below main splash page CTA.
• Generic horizontal "ribbon" to be used on other subpages: explore, events and teach

If this isn't right, let me know.

[iamjessklein]

@HPaulJohnson :+1:

Depending on how we do it - the small banner could be the ribbon - I quickly mocked this up - but it's an early stage mockup.

[thisandagain]

Solid start @iamjessklein!

[iamjessklein]

New eyeballs. Drop comments in redpen.

[iamjessklein]

Also updated some options for placement of the eye. Drop comments in redpen

[iamjessklein]

Updates on redpen drop comments

• the final 3 eyes
• hover state
• private eye tweak

[iamjessklein]

Update: I am going to do a final UI pass today on the Webmaker landing and mock up how this will look on mobile.

[HPaulJohnson]

@iamjessklein just wanted to make sure you have the final copy for this: https://etherpad.mozilla.org/privacydaycontent (lines 3-16 are for splash page).

[iamjessklein]

Thanks @HPaulJohnson yes, I've incorporated it - but had to tweak the eyeball text a little to fit in that small space. Take a look at the redpen.

cc @gesa

[iamjessklein]

Added two implementation tickets to complete this issue:

• [ ] Update footer in private eye (#196)
• [ ] Add the promo content to the home 3 splash and to the new onboarding splash(#197)

[secretrobotron]

Implementation note: It looks like we have a winning splash page variant from last week's Optimizely testing. We'll be leaving that up on webmaker.org, along-side a new on-boarding experience (#60). Optimizely will continue to flip between them to measure impact.

For this Privacy Day work, that means the winning splash page variant and the new on-boarding experience need the changes described in this bug.

/cc @gesa

[iamjessklein]

animated gif options for mobile only (redpen is making them static):

*note: these are on a gray background here but will appear on the red hexagon.

[edrushka]

Amazing, creepy and wonderful all at once!

[dajbelshaw]

ewwww....

(small issue with coloured bit of eye 'jumping' back to the middle at the end of the animation, but I think it looks great!)

[cassiemc]

Really cool Jess! A couple of things – they are a little choppy, and I wonder if we can smooth out the animation a bit by adding extra frames or shortening the time on each frame. Also, I wouldn't put the pupil right up against the edge of the white circle, as visually it kind of looks like the pupil is popping out of the eyeball. Love the blink.

[thisandagain]

:+1: on @cassiemc 's comments above. I prefer the first execution. :smile:

[secretrobotron]

Is the eye-ball following the mouse in the desktop version still? Could be easier to use a CSS animation for mobile then.

[iamjessklein]

yes, it is.

thoughts @gesa ?

[gesa]

Totally accomplish-able. It's been a minute since I've done anything involving keyframes, so might take me a little longer than desirable to pull it off. But it's definitely something I can do.

[gesa]

How does this look for a CSS animation? Should be good for mobile and as a fallback for the svg following the mouse: http://codepen.io/gesa/full/WbpxjY

(note: this eye color is off. this is a proof of concept.)

[iamjessklein]

I was looking here: http://sleepy-ravine-9799.herokuapp.com/en-US/home-3

• In Firefox (desktop)the tracking feels a little off. It doesn't seem to track my actual mouse position. The flip looks great.
• In Chrome the animation doesn't work but the flip does. It also has a weird flashing effect when I am a certain distance away from the image.In Chrome mobile - the animation works great, however, the sclera is a square (no radius showing).
• In Safari the tracking is also not working. The flip works however there is a bit of a delay for the eyeball. In Safari mobile - the animation works great, however, the sclera is a square (no radius showing).