1036151 - Design low bar CTA pages

Status: RESOLVED FIXED

(Webmaker Graveyard :: Design & UX, defect)

Description

[Brett Gaylor [:brett]]

Ideally these are only graphical assets that built on top of the maker-themed (made with code) landing pages of Aki's.

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cassie: should we file separate bugs for each landing page? 

* We're proposing 7 pages total: 

1) Newb. General interest / Firefox user / "I want to learn how to code for free with Mozilla" 
2) Amateur mentor. Doing it for the love of it. (e.g., Moz Reps fit here)
3) Teacher / educator. I teach middle school and I'm looking for creative ways to teach tech. 
    or: I'm a Program Co-ordinator from the local public library. 
4) Techie. I'm a programmer / coder / designer willing to volunteer some time to share what I know. 
5) Activist. I care passionately about issues like privacy, Net Neutrality and the future of the web. 
6) Parent. I'm looking for something for my kids to do on a rainy day this summer.

Comment 2

[Matt Thompson (@OpenMatt :OpenMatt)]

oops sorry -- 6 pages total

Comment 3

[Cassie McDaniel [:cassiemc]]

Let's leave it all in one for now, we can separate them later if we find we're needing lots of iteration.

Comment 4

[Matt Thompson (@OpenMatt :OpenMatt)]

* Based on discussion with Cassie, here's my proposed mock-up for a low-bar "Teach the Web" CTA for mentors / helpers. 
https://wiki.mozilla.org/images/0/0c/Teach_the_web_with_friends_--_landing_page.004.png

* It follows the "Made with Code" template exactly, with two small tweaks:

1) It adds "Tell us how it went." With a simple text input field. (Feeding a spreadsheet, etc)

2) It adds a Maker Party CTA. At the bottom.

Comment 5

[Matt Thompson (@OpenMatt :OpenMatt)]

Now in glorious Red Pen version, here:
https://redpen.io/oe6319cf683b7b2ab7

Comment 6

[Matt Thompson (@OpenMatt :OpenMatt)]

Attachment: https://redpen.io/oe6319cf683b7b2ab7

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

All copy for the page is here:
https://etherpad.mozilla.org/teach-with-friends

Comment 8

[Matt Thompson (@OpenMatt :OpenMatt)]

It could also include a gallery with the best examples of other people taking and making this same thing. The "Made with Code" project, for example, has spawned many excellent examples, here:
https://webmaker.org/en-US/search?type=all&q=madewithcode

Comment 9

[Matt Thompson (@OpenMatt :OpenMatt)]

* Here's another mock-up, to show different potential applications of the same approach. This one is for a "Teach friends online privacy" page:

Mock-up:
https://redpen.io/oj63fc89307f8e602b

draft copy:
https://etherpad.mozilla.org/teach-privacy-with-friends

Comment 10

[Matt Thompson (@OpenMatt :OpenMatt)]

Attachment: "Teach your friends online privacy"

Comment 11

[Matt Thompson (@OpenMatt :OpenMatt)]

Attachment: "Learn a bit of code by making your first web page"

Comment 12

[Matt Thompson (@OpenMatt :OpenMatt)]

Another one for: "Learn a bit of code by making your first web page"

mock-up
https://redpen.io/nbefcb7cbc97e06313

draft copy
https://etherpad.mozilla.org/learn-code

Comment 13

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8454021 [details]
"Learn a bit of code by making your first web page"

I'm not really sure what I'm reviewing here, but R+ from copy perspective, R- from content and design perspective (just a couple little tweaks)

Comment 14

[Cassie McDaniel [:cassiemc]]

Comment on attachment 8454015 [details]
"Teach your friends online privacy"

I think this page is confusing because it is asking users to do several things. Maybe if we adjusted the "get started" heading that would help? OR just focus on getting the user to do one thing. Otherwise the content is very good.

Comment 15

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/hc29690999d6edd05c

Here's my latest proposal for UI and flow from the survey to the landing page.

Kate, would love your opinion on modal vs. dismissible panel...

Comment 16

[Geoffrey MacDougall]

As mentioned in the redpen comments, is the mentor someone pledge our hook into getting them to count towards the contribution target? If so, 'mentor' is the wrong ask. It should be something like 'show someone how to...'. Is there a reason we're putting it before the activity?

Comment 17

[Cassie McDaniel [:cassiemc]]

(In reply to Geoffrey MacDougall from comment #16)
> As mentioned in the redpen comments, is the mentor someone pledge our hook
> into getting them to count towards the contribution target? If so, 'mentor'
> is the wrong ask. It should be something like 'show someone how to...'. Is
> there a reason we're putting it before the activity?

I think the wording is flexible (matt hasn't worked his copywriting magic yet!), but the placement in the flow is deliberate. As mentioned on redpen:

If we put this form (or any task) after we ask them to make something, we suspect we’ll lose them (going from landing page to Thimble then back to landing page is not an ideal flow). So, we need a way to bring this forward. Especially since this measurement is arguably more important to us than the making, so might be better if they do it first.

This was something Brett, Aki, Matt and I did a lot of back and forth on last week.

Comment 18

[Geoffrey MacDougall]

Thanks! Makes sense.

- I'm happy to chat with Matt about the wording.

- I get and agree that the CTA to teach should be as front loaded as possible.

- My remaining concern is that we are asking someone to commit to something when they don't know the scale of the ask, what's involved, how much time it will take, etc.

There's a parallel in fundraising. When you start a capital campaign you build a campaign cabinet: a group of 4-10 individuals who will leverage their networks, set up meetings, help you find donors, deliver the asks, etc. Each of those people will usually *never* know they are part of a cabinet. They have been asked to "make 6 phone calls and attend 3 lunches over the next 8 weeks". That's the commitment, not to join the campaign cabinet.

Understand this is a hard challenge to tackle. And acknowledge I don't have a better idea. =) Though happy to help brainstorm.

Thanks! It's looking good.

Comment 19

[Matt Thompson (@OpenMatt :OpenMatt)]

* This is good progress.

* Main feedback: feels to me like we're still blocked on clear understanding of the overall *flow.* (That may already be documented / proposed and I'm just not up to speed.) 

* I think we benefit from simplicity here:

1) User signs up for email updates.
2) They receive a follow-up email and drip based on which track they identified. 
3) We email them multiple invitations and calls to action over time. With the right landing pages to support them. 
4) We ensure we have good systems in place for counting when users take those actions. 


Cassie: is the "pledge" meant to address a challenge we're facing in #4? 
I'm still having a hard time understanding why it's needed.

Comment 20

[Matt Thompson (@OpenMatt :OpenMatt)]

* I understand the flow better now -- please disregard my previous comment. 

* Geoff: we're going to try to address your notes for the guided mentor experience. Thanks for those. 

* We're going to mark this ticket closed and push ahead with the more granular work in follow-up tickets.

* To track the work or add yourself, we're using the [teachctas] whiteboard, which you can follow here:
http://mzl.la/teach_CTAs