Design interstitial experience for Surveillance snippet campaign

[edrushka]

Master ticket is here:

RACI:

Driver: @edrushka Design: @cassiemc Decision Maker: @valianttry (who will also act as liaison for MoCo signoffs)

Milestones: Design finalized: Friday April 24

• [x] UX
• [x] UI direction
• [x] Interactions / different states
• [x] Final illustrations and svg assets
• [x] Design review

Note: Snippet style updates have moved to https://github.com/MozillaFoundation/movement-building/issues/44)

[edrushka]

Details:

Step 1: The Snippet Moving eyeball icon with the text ‘Do you believe that mass surveillance is an infringement on your civil liberties? Get smart on surveillance: [LINK TO INTERSTITIAL PAGE]’

Notes: We will test "Get smart on" language e.g. Individuals’ security and privacy on the Internet are fundamental and must not be treated as optional. Is mass surveillance a violation?

Step 2: The Interaction A simple interstitial page that poses 3 questions: "If I'm not under investigation: Should government monitor my phone calls? Should the government be able to read my emails and see the photos I send? Should the government know what I'm surfing the Internet for?"

Under each question, a way for users to express where they’re at on the issue e.g. A sliding scale from 'No, stay outta my bidness' to 'Sure, go ahead'; True/False checkboxes, Happy, Sad, Meh faces etc. This is where we need some design vision.

Step 3: The reveal After the user has answered the final question, it is revealed through graphic or animation that the government is, indeed doing all of these things e.g. fun, fuirky ideas: an arm labelled Patriot Act could pull all the slider bars to the “I’m fine with this” setting. A stamp could stamp a big red X all the checkboxes, indicating the person is ok with it, regardless of what they checked. e.g informative ideas: questions & answers flip around around to reveal text about what is actually happening. The design solution should be in between quirky and informative/boring.

Step 4: Appropriate CTA There are two different CTAs, depending on how the user answered:

If user answered Not OK to 0 or 1 questions, a popup (or the reveal) reads: "Right now US Congress is rethinking mass surveillance. Learn more: https://blog.mozilla.org/netpolicy/2015/04/14/stop-mass-surveillance-under-the-patriot-act/"

If user answered Not OK to 2 or 3 questions, a popup (or the reveal) reads: "Right now US Congress is rethinking mass surveillance. Help make sure civil liberties are an important part of the conversation. Sign this petition: [https://sendto.mozilla.org/page/s/section-215-petition]"

[ScottDowne]

@edrushka If there are any copy changes to the snippet or anything we want to AB test we should probably update https://bugzilla.mozilla.org/show_bug.cgi?id=1152133 with that info.

Snippets can be a little time consuming to update so the sooner we get it locked down the better I'll feel :)

[ScottDowne]

Step 3 worries me a bit. Thought:

Can we do an MVP for this, with simple fade transitions as the reveal, and have that done a week sooner? I'm probably more concerned about the page layout than the transitions. If the page layout can be done I can get started while the reveal is still being designed.

Is there a revel after each question or one big one at the end of all three?

[edrushka]

@ScottDowne - can you join the kickoff meeting today so we can raise these questions with the design team? Agree we should define MVP and nice to have.

[cassiemc]

@flukeout Can you put together a quick diagram of the flow for this before our kickoff?

[flukeout]

Yep!

[edrushka]

This is super, @flukeout. We originally envisioned the Continue button taking you to directly petition or the blog, and not another page. What do you think is the best UX?

[flukeout]

@edrushka Okay - will update the diagram! I think if we just have the one page then the fold-out transition might make it too tall, maybe the second option for revealing the info would be more appropriate. Stay tuned!

[cassiemc]

I like the reduced number of steps. Feels like there still needs to be a final message above the 'continue' button though, to give some sort of context to the cta / next step. So maybe just a header or short message there above the button that could appear after all 3 questions are answered.

[flukeout]

@cassiemc Def.

[edrushka]

Agree. Just saying "continue" doesn't let people who care know that they can actually do something. @ScottDowne is it possible to display one of two different messages before the continue button, depending on how people have answered? 1) Right now US Congress is rethinking mass surveillance. Read the blog to learn more. [continue] 2) Right now US Congress is rethinking mass surveillance. Sign this petition to help make sure civil liberties are an important part of the conversation. [continue]

[flukeout]

[ScottDowne]

@edrushka Yeah, displaying a message based on what they answered is easy.

[cassiemc]

Having 'continue' at the very bottom feels risky and easily missed. Maybe we can play with different placements / adjustments, ie. having all the other panels close when the continue button/panel appears, or auto-scrolling you down to that section. Thoughts @flukeout @ScottDowne?

[flukeout]

The continue will appear appear after interacting with the last question in the survey, so I think it might be okay. Since we're revealing some information about the third question right after the user answers it, we shouldn't immediately hide that content or auto-scroll away. We could play with the treatment or placement of the continue message and button. I'll try some things out.

[flukeout]

Update to previous concept, with CTA more closely tied to the content:

[edrushka]

This works for me.

[cassiemc]

Update: I'm working on UI for this now based on @flukeout's latest.

[flukeout]

Here's my idea for incorporating the eyeball in the CTA:

[edrushka]

Heee! I love it! I like having a visual link to the snippet. What happens when the 2nd and 3rd questions pop up? 3 eyes?!

[edrushka]

Oh wait, it's on the CTA. To me it actually makes more sense on the question(s) rather than the CTA. We don't want people to be scared to press continue!!!

[cassiemc]

+1 about the fear association with the continue button in the CTA. I think I'd rather it incorporated into the header somehow so it is somewhat peripheral and not as tied to an interaction.

[cassiemc]

I'm going to take a break from this but will post a design tonight / first thing tomorrow.

[cassiemc]

Looking for quite general feedback at this point. Here are two different layouts. I started with side-by-side panels then moved to a horizontal layout to better match @flukeout's wireframes. The vertical panel iteration could still be useful for mobile layout. Thoughts on general direction @flukeout @edrushka @valianttry @ScottDowne? I'd like to add a lot more detail and finesse. Actually reminds me a lot of this 'battle for the net' graphic which I just saw this morning: https://www.battleforthenet.com/internetvote/images/share1.png

[flukeout]

@cassiemc Nice work! I prefer the first option - I think it's easier to read each section as one chunk when they're laid out that way. However, I think it would be good to still incorporate the envelope icon in the middle section for consistency.

[davidascher]

UX: The first layout feels like a set of three alternative choices, and I expect some response after the first choice is made. The second layout feels like three sequential choices, and I expect a response after I've made all three choices.

Words: (Missing "The" before "Government" in the first column, first layout).

The bigger question I have is around emotional impact and voice. The stark red/black layout feels oppressive & Orwellian (I expect, on purpose!), and this feels fairly "pissed off" + libertarian, not reasoned + educational, which I understood was the purpose of the interstitial.

[ScottDowne]

Some tests with what the black and white eye would look like in the snippet:

http://scottdowne.github.io/eoy-snippets/eyeball-snippet-bw-center/ http://scottdowne.github.io/eoy-snippets/eyeball-snippet-bw-outline/ http://scottdowne.github.io/eoy-snippets/eyeball-snippet-bw-nooutline/

[davidascher]

@scottdowne: would be good to force a position-eye-relative-to-cursor on page load, not wait for first mousemove. Otherwise the eye is centered, and the centered eyeball in particular doesn't look like an eye if it's smack in the middle. Or just decenter it on initial load.

[cassiemc]

@davidascher yes, next step is to dial it back a bit! Thanks for the feedback. We are leaning toward the better usability of the horizontal panels (second layout)

[cassiemc]

@ScottDowne The black eyelid is cool. A couple things:

• I think we could lose the drop shadow around the eye. depending on the final styles of the interstitial page, we might want to add a bkg color or shape to tie it even more closely. I can design that after I finalize this page.
• would like to see what a thicker outline on the outer eye looks like (the inner pupil outline can stay as-is)
• unfortunately with the b/w version we're losing the dilation effect, which was really neat. Could we make the dilated pupil (the smallest size of the pupil) a bit larger so that the glare isn't obscuring the pupil?

[davidascher]

The outline of the glare on the outline version sometimes leaves the pupil, and it seems to me that breaks the illusion (because glares don't have outlines):

[ScottDowne]

@davidascher I made the eye default to wander.

Previously it would wander after three seconds of no mouse move (mostly for mobile)

Seems strange that it waits three seconds before doing this, default should be wander.

Maybe we should move eye related concerns into another ticket?

[ScottDowne]

Moving snippet eye related issues to: https://github.com/MozillaFoundation/movement-building/issues/44

[cassiemc]

Here's an updated design. Still not final but a step in the right direction. Got some good feedback at today's standup and will iterate (gist was that the color / openness / cleanness are feeling more onbrand; the icons need to be modernized, and need to get away from slightly western feel). Overall my strategy is to: clean up, simplify, modernize. And design the interactive states as well once this style is finalized.

[flukeout]

@cassiemc This is looking cool! Some feedback:

• Ditch the little eye lines? I think it's distracting that they overlap like that.
• Lighten the corners on the white area, I think they draw the eye away from the middle a bit
• Soften the "OR" boxes? They're chunkier than the radio buttons visually.

Looks great!

[cassiemc]

Thanks for the feedback @flukeout. I think I'm finally at the point where I can start finessing the element hierarchy, and your comments help. Here's where I currently am before beginning the night session. cc/ @edrushka @valianttry

[cassiemc]

Played with a lot of things but still felt too vintage, so in the end just simplified things a lot. Here's the in-between version:

And where I ended up:

I think we can do some cool things with the interactions, @ScottDowne.

[cassiemc]

Here's the page with an open panel. The answer they selected slides over into the middle of the righthand panel and an x appears in case they want to choose a different answer. If they hit x, the black explanation panel should not disappear or change, since that content is the same no matter what you've answered. We could add a small 'next' link to the black panel which would slide you down to the next question. I'll try that in the next iteration.

Question for @valianttry: Does the user need to answer all three questions before viewing the CTA? Should there be some other sort of default link at the bottom in case they don't answer anything?

Putting things in redpen now as well, would love feedback @flukeout @edrushka @valianttry @ScottDowne @davidascher: https://redpen.io/p/wf5197457dc9cb6ebd

[cassiemc]

Here's another less-heavy version (https://redpen.io/oz58598d25c83f62ca):

[edrushka]

@cassiemc I really like this less heavy version, and the icons seem more fun on reveal.

[cassiemc]

@flukeout can you please do a design review on these? https://redpen.io/pn357d948ea89f32fc and https://redpen.io/oz58598d25c83f62ca

[valianttry]

I like this direction! :clap:

[cassiemc]

Updated designs (with colour!) here: https://redpen.io/p/wf5197457dc9cb6ebd

Here's the final CTA. Still working on illustrations.

[cassiemc]

Here's the feedback from Moco via email. Mostly copy changes:

• [x] Love the education and the conditional “answers” given to users.
• [x] Love the eyeball!
• [ ] The site doesn’t explicitly call out that Mozilla is for “stopping mass surveillance.” Maybe this can be woven into the petition CTA.
• [ ] Right now the petition CTA is to “help make civil liberties an important part of the conversation,” but the petition itself is more aggressive than this. Want to be super clear to our users. Maybe we say something to the nature: “Mozilla has this stance. If you agree based on what you’ve learned, sign this petition to XXX.”
• [ ] There is exact repetitive language ending the response we give to people who click “No” on questions 2 and 3. Potential risk here in that users will have already seen that language and may not read the more important first sentence of Question 3 thinking it is the same thing as they just read. Suggest removing the last sentence of response to Question 3 or rewording it so that it is different than response 2.
• [x] The mock up doesn’t have language for responses to Question 1 “No” or Questions 2 or 3 “Yes” -- could we review? [cassie: the responses are not dependent on a Yes or No]
• [ ] There is a disconnect with the headline copy “If I’m not under investigation…” and the subsequent questions. (We see where you are taking this but it’s not intuitive.)
• [ ] I don’t think it’s clear enough in the copy that this is the current state of affairs, and I can change anything.
  • “The U.S. government currently monitors…”
  • “As it stands today, the Patriot Act provision…”
  • “Right now, the Patriot Act does allow for…

[cassiemc]

@edrushka @valianttry I'll add the above to the implementation ticket as I don't see any implications for design (except perhaps for the headline if we decide to change that).

[cassiemc]

Weird, I was pretty sure I closed this yesterday! Anywho, all assets are here on dropbox including the psd: https://www.dropbox.com/sh/2h0d3s1m9lddz1j/AABQAuAMYkXPdQp01Vz8WFExa?dl=0 Final Redpen images are here: https://redpen.io/p/wf5197457dc9cb6ebd And final designs posted below: