On-boarding Design

[thisandagain]

Direct user's into a first-time use (FTU) experience within X-Ray Goggles (best retention metrics). Goal is to A/B test on-boarding messaging an increase engagement off of sign-up. The scope of this sprint is to design an initial on-boarding experience that can be built and deployed within the next 2 week sprint.

Phase: Design / Build / Ship
Owner: @secretrobotron
Decision: @thisandagain
Consulted: Paul
Lead design: @iamjessklein
Lead dev: n/a
Quality: @cassiemc

[iamjessklein]

I am going to start sketching some ideas for this. ✋

[thisandagain]

Awesome. Ticket updated!

[thisandagain]

@secretrobotron will setup a proper kickoff meeting for this next week, but great to have some ideas for the party. 😄

[iamjessklein]

I started by doing an exploratory sketch - asking 'where might users first see/ interact with the Goggles on Webmaker'? I see 5 main areas of contact:

1. Webmaker Landing Page with a very specific call to action
2. Via the not-yet-existing "Join Webmaker" button user flow
3. On the Tools page within Webmaker
4. On the Goggles page within Webmaker
5. Within the Goggles interface upon activating the bookmarklet

I suspect for the purpose of this sprint, that we can narrow the scope to the Goggles page within Webmaker

[thisandagain]

For this, sprint (and the build sprint after) I'd like to focus on number 1 via 2 (Join Webmaker user flow via the landing page) as the goal for the first quarter is to improve our conversion of visitors to Webmaker.org into makers. The Goggles page within Webmaker most certainly needs some attention, but I think new user on-boarding is the bigger issue.

[iamjessklein]

Ah great, thanks for clarifying that @thisandagain - I was under the impression that I would need to focus on the Goggles page within Webmaker.

[toolness]

For reference, I've resurrected an archived version of the goggles page on hackasaurus.org, which had a different onboarding experience than we currently have, if it's useful: http://hackasaurus.toolness.org/en-US/goggles/

[iamjessklein]

THANK YOU 👍 @toolness - I was having trouble remembering what we made there.

[thisandagain]

Awesome! Thanks!

[iamjessklein]

One more reference that I am looking at is this "make first" mockup/ concept I started on two years ago.

[secretrobotron]

Kickoff meeting notes: https://etherpad.mozilla.org/kickoff-3

[secretrobotron]

@iamjessklein whiteboarding: https://redpen.io/p/zre152d4dfbdd65cc5

[iamjessklein]

I put up the 2 different paper prototypes of the interaction for onboarding:

• staged progression: https://redpen.io/vda218b6570023eb63
• modeling: https://redpen.io/vfccb12d506dd44a80

These are two different approaches to the interaction design. The staged progression allows the user to read, and then asks them to try it out, providing little tips along the way. The modeling tries to emulate the way you might teach this in a classroom - you show the actions that you want the learner to emulate.

For the sake of this round of paper prototyping I didn't dive into the privacy activity that we discussed as I am waiting on @HPaulJohnson to learn more about the learning objectives for Privacy Day.

[HPaulJohnson]

I met with MoCo yesterday and got a preview of their plan for an engagement campaign on 1/28/2015 around International Privacy Campaign. Project brief and creative brief for main landing page:

https://docs.google.com/document/d/12Qh3ZQbv-Amus21dE0Q4V2J-g1qZaTDrkYLkLeHZC-U/edit

https://docs.google.com/a/mozillafoundation.org/spreadsheets/d/1bbkpct_7HWCuu4iZfXyHyBkwpxceDHkYhS3yjEPpMps/edit#gid=0

One of the main CTA's of their campaign is "learn" (others are ask, use, discuss and support) and we have the opportunity to plug-in whatever we think our most compelling privacy-themed content is. They originally suggested an updated privacy teaching kit but based on the mass market nature of their campaign, I think we get more out of it if we can create a low-bar learn/make activity.

The new onboarding process would be perfect and I told them we'd get back to them by early next week if we felt like we came up with something compelling/simple/engaging for an average (Firefox) user. It's a great opportunity to push substantial traffic through our new funnel.

Would be great to have the splash page content also be privacy-themed possible. (Ideally, they push traffic to their landing page and the "learn" CTA points directly to webmaker.org where we have a privacy message and privacy onboarding experience waiting).

(If we don't think we have a good privacy hook in onboarding, we'll need a plan b for receiving this traffic, perhaps a simplified version of an existing privacy activity or teaching kit.)

[iamjessklein]

I would ❤️ advice on what might be an appropriate learning objective here - cc/ @dajbelshaw @LauraHilliger @toolness @xmatthewx @thornet

I have been thinking a bit about this and I wonder if the Goggles really are the best tool to address issues around privacy 👀 Ideally we would somehow incorporate Lightbeam or it's functionality to show (vs. tell) about privacy.

Another option might be to break down a specific concept and explain it through an activity. One topic that might be worth honing in on is Personally Identifiable Information - we could potentially ask users to hack an avatar or something and ask users to tell something about themselves without revealing any personally identifiable information.

[LauraHilliger]

I like the modelling approach, especially if the theme is around privacy because we can both to demonstrate the interaction and make a lightweight point about a tricky-to-teach concept.

Personally, I think PII might be a little complicated for this level of interaction, but I like the idea of honing. Lots of people hear the "if you have nothing to hide..." line and don't understand why that doesn't make sense. To explore that kind of cognitive level of "WTF Privacy IS" we could use the Goggles to model someone doing something that protects their personal privacy (at a really basic level).

The illustration could be something like:

• 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.

[iamjessklein]

When it was first discussed as thematic content within my concept for the onboarding, privacy sounded plausible - but as I sat down to work on it, I needed to decouple it from the onboarding experience because it's such a complicated and important topic.

I also have a concern that if this is the first thing that people see on our landing page that it could confuse the user's understanding of the site. Is this an activist site? Is this an org? Is this a tool.. etc.

The reason that the google doodle is successful, is that the userbase had developed an understanding of the visual vocabulary of the page - the logo. We don't have a generic baseline interaction at this point to inform the user experience.

At this point, I am inclined to decouple the onboarding experience from a privacy learning experience - there are just too many things for a user to learn about this interactive space - what is this site? what can I make? oh do i need to sign up? oh cool, I can make something - how do I code it? - ps: what on earth is code?! We simultaneously need to onboard the user to the tool and the product - it feels too soon to add complex content to the equation.

There are tons of thing that we can do with the space to build empathy - from having users introduce themselves in a playful way, to completing a unfinished project/asset/ story to remixing a character or avatar.

[cassiemc]

+1 to decoupling. Agree that we need the baseline interaction before addressing marketing opportunities (and that the former will actually inform the latter quite well). Having something that is not time, issue or season-sensitive is important content-strategy-wise. We've also identified the audience for this exercise as basic basic basic, so this also makes sense in that regard. Thanks for doing all this thinking-through, Jess!

I think the extra info and thoughts from @HPaulJohnson and @LauraHilliger will come in handy later down the road, so let's not lose that.

[smithisgeneric]

Hive Toronto has been doing a ton of curriculum development related to privacy but I'm still drafting 10 activities related to i) Privacy Policy, ii) Personal Information, iii) Privacy in Everyday Life, and iv) Privacy Futures.

As a sneak peak, the Anonymizer Teaching Kit is a draft to explore personally identifiable information (PII) by removing info from a Wikipedia profile using X-Ray Goggles. This already drafted activity is in-line with one of Jess's suggestions.

As appropriate entry level activities I'd also suggest:

• Enhance your privacy in everyday life: use a private window, check your default search engine, change your privacy settings on a social media site
• Learn what an IP address is and the geographical information associated with your device use
• Create a data trail timeline: use Popcorn to tell the story of all the times your information gets collected throughout the day

[HPaulJohnson]

Makes sense that an initial onboarding experience around a complicated theme is not ideal so totally ok with decoupling.

That said, I'm still unlcear how we plan on capitalizing on specific opportunities like this one in the future where an external campaigns will drive specific, segmented traffic to webmaker. If we want to welcome new users interested in a specific issue via a low-bar activity/experience how can we do that? I'm not convinced a teaching kit is the best place for a new user to start and there's no next step CTA to keep them engaged long term as an active user. There's an urgent need to resolve for MoCo's Jan campaign and longer-term it will be an important part of our marketing campaigns.

[thisandagain]

+1 fine to decouple if it unblocks this scope-of-work. The objective for this is to focus on converting more Firefox users that hit webmaker.org into "makers". If we feel like privacy or other campaign-y messaging helps that in this first round great ... if not, totally fine too.

[iamjessklein]

I just updated redpen with two more mockups.

One:

Two:

Also - I blogged about the work up to this point for this heartbeat here.

[xmatthewx]

awesome work @iamjessklein