Build Call Congress tool

[valianttry]

see #2 for background. We need a simple user-facing webform that includes 1) instructions for calling congress 2) super simple "report back" survey so users can tell us in 10 secs or less how their call went. The backend is built by FFTF. Here is what the tool looks like on FFTF's page:
https://www.battleforthenet.com/?call_tool=1

Code for API is available here: https://github.com/mozilla/call-congress

A few notes:

• This still requires sec review
• Improvements we can make, specifically around metrics would be a huge win for the community at large

Security and legal reviews are ongoing (see https://bugzilla.mozilla.org/show_bug.cgi?id=1120581)
We'll need to craft:

1. Voice-over
2. Call script (what we want people to say)
3. "hints" in the UX -- e.g. we need to tell people to press " * " to move on to the next decision-maker, otherwise people will hang up after the first one
4. A really quick survey that pops up asking users to report how the calls went (no PII collected)

@simonwex did i do this right?

[valianttry]

@simonwex the call tool made it through legal and privacy review! What's next step to start build?

[valianttry]

Here is a rough mockup of the user-facing pages we need to build:
https://drive.google.com/a/mozilla.com/file/d/0B_VT8vv8uni5LXNSdVpMTE00ZHM/view?usp=sharing

[cassiemc]

@valianttry I KNOW The process for doing this is crap -- but could you possibly refile this under the Plan repo? https://github.com/MozillaFoundation/plan/issues/new OR you can use http://build.webmaker.org/add which takes you to the same place.

You can just link to this bug instead of repeating the same information. But putting into the Plan repo will make sure this gets into regular triage.

[simonwex]

@jdotpz this is likely going to live somewhere on https://advocacy.mozilla.org, are there any gotchas to how that domain is setup?

[jdotpz]

Well, it's a wordpress server right now. If we want to host something underneath that domain, we'll probably want to push the whole thing up to Cloudfront, and then do path-based origins.

So basically, if /callcongress* is the path, use calltool.mofoprod.net instead of the current wordpress CNAME.

[simonwex]

It could be elsewhere if that's more convenient.

[simonwex]

An example of Andrea calling the service can be heard here:
http://mozillafoundation.github.io/movement-building/andrea_calling_existing_tool.mp3

[simonwex]

@ScottDowne you should be able to create a SkypeOut number and use that to test. Expense any costs you incur.

[cassiemc]

Here's a design for the first page: https://redpen.io/qy79a8b3564dc01fb4
I'm liking the fourth direction. @vazquez can you please R for UI?

Based on Andrew's wires here: https://drive.google.com/a/mozillafoundation.org/file/d/0B_VT8vv8uni5LXNSdVpMTE00ZHM/view

[cassiemc]

@valianttry Please review too! https://redpen.io/qy79a8b3564dc01fb4

[vazquez]

I'm done my review

[cassiemc]

Ok, new version. R? @vazquez @valianttry @xmatthewx https://redpen.io/qy79a8b3564dc01fb4

[cassiemc]

Newest version incorporating all feedback so far: https://redpen.io/qy79a8b3564dc01fb4

[cassiemc]

I'm still working on the next screen. In the meantime @valianttry have you had a chance to review? Can you add the new Ts&Cs to this issue? Thanks!!

[cassiemc]

I think this second screen still needs some work but didn't want to wait a lot longer for a round of feedback. @xmatthewx @vazquez @ScottDowne – feedback? https://redpen.io/cgae7af162144c5eb9

Again based on wireframes here: https://drive.google.com/a/mozillafoundation.org/file/d/0B_VT8vv8uni5LXNSdVpMTE00ZHM/view

[xmatthewx]

Looks great. Wondering if the Tips should toggle open and close so that everyone sees the report back button below.

[ScottDowne]

WIP: http://scottdowne.github.io/call-congress-net-neutrality/call-congress.html

Things I need to do, and how I plan on breaking up the tasks (mostly for my own tracking):

• create and setup repo
• first page HTML and CSS mobile
• first page countdown
• fix broken links and add phone icon
• second page HTML and CSS mobile
• connect with call-congress service
• interaction to navigate between page 1 and 2
• first page HTML and CSS desktop
• second page HTML and CSS desktop
• add google analytics

P2 tasks (report back button in page two won't be there initially):

• report back page HTML and CSS mobile
• report back button, interaction and navigate between page 2 and report back
• interaction to navigate between report back and thank you
• thank you page HTML and CSS mobile
• thank you page share buttons
• report back page HTML and CSS desktop
• thank you page HTML and CSS desktop
• space to add new features, not including CSS and HTML changes
• add optimizely

[cassiemc]

Another version of the second screen here: https://redpen.io/cgae7af162144c5eb9 @vazquez R?

@xmatthewx, the Tips section seem too important to toggle it closed and open. But it's a good point. Not really sure how the report back will work yet.

For my to-do list:

• initial screen mobile UI
• second screen mobile UI
• design 'preview' experience
• double check most recent sandstone styles
• get copy review / edits
• get signoff from andrea
• design QA for the build
• initial screen desktop UI
• second screen desktop UI
• error states

P2:

• design report back, mobile
• design report back, desktop
• design thank you page, mobile
• design thank you page, desktop
• build p2 QA

[adamlofting]

We also need to add Google Analytics in if we want to measure this (or we'll be 🙈)

• Which domain is this being hosted on? (sendto.m.o, advocacy.m.o or somthing else?)
• Are we running any optimization testing? (do we need Optimizely on this or not)
• What events other than standard pageviews do we want to count? (I guess survey completions... any others?)
• What was the final decision on who is hosting the server side bit of the call-congress tool?

[cassiemc]

Adam, would be interesting to know who clicks the 'preview' link.

Here's the most recent redpen: https://redpen.io/mjd5f98ae0b751ab15 R? @valianttry @vazquez ?

[vazquez]

R+ this looks great! 🐮 ⭐ I left a couple of minor comments.

[OpenMatt]

Let's break this into discrete tickets for development, design and metrics. Filing those now.

[OpenMatt]

I believe everything this ticket has now been files as individual issues, for easier follow-up and tracking.
https://github.com/MozillaFoundation/movement-building/issues

Recommend we close this ticket, and continue working in those more granular ones.

[valianttry]

@cassiemc I have the final language as approved by legal for the disclaimer:

"Your call is connected with the help of a company called Twilio. In order to connect you with your correct elected official in the U.S. Congress and with the FCC, Twilio asks for your zip code. Twilio also collects your phone number to connect your call. This information will be stored for no more than 30 days, and will not be used for any other purposes. For more information, see Twilio's privacy policy."

"Twilio's privacy policy" should be linked to: https://www.twilio.com/legal/privacy