EU Copyright Petition site: Create wireframes

[damiankay]

Once we have user stories and have selected a platform, we'll need to get moving on creating wireframes.

Reference:

92 User stories

CC @ScottDowne @lovegushwa

[valianttry]

@natalieworth here is a response from Nathan, our contact at Nationbuilder, to a request for assets for designers working in Nationbuilder. There are hopefully some good resources in here:

My apologies as I was out at a conference last week! Just getting back in and wanted to get back to you on this.

Some awesome sites (some in other languages): http://genun.unausa.org/ http://www.dci-palestine.org/ http://www.northeastcarpenters.org/ http://www.changeonsensemble.com/ http://www.joyeuxanniversaireabo.com/ http://www.plaidcymruarfon.org/

An example of a petition in another language is: http://www.plaidcymruarfon.org/deiseb_prisiau_ynni_energy_prices_petition

Some information on the theme documentation is at http://nationbuilder.com/theme_documentation. This should walk through many of the questions they have surrounding theme editing, liquid within NationBuilder, and many other design questions.

Unfortunately, I don't think we have modal implementation explicitly documented anywhere - typically it involves another javascript or jquery library. A good example of this though is http://www.bravelove.org with the signup form being rendered via a modal.

Hope that's helpful!

[natalieworth]

Thanks @valianttry — just looking through these right now and there seems to be some good benchmarks for petition forms in there

[lovegushwa]

@natalieworth this agency builds there sites with Nationbuilder: http://www.mosaicstg.com/ ... worth checking out.

[natalieworth]

@valianttry @HPaulJohnson I've added some suggestions/ wireframes to google slide deck here: https://docs.google.com/presentation/d/1X31GHF9SclchaMY-K4Lo2XvUEAmmGrUjGHht-IHt0Q4/edit#slide=id.g15f801c431_0_0

For design/ refining the wireframes, we'll need to figure out:

• [x] CTA's to include on the landing page
• [ ] Estimate of content length that will go underneath the video
• [ ] Form fields required for the pledge
• [ ] If we want an opt-in modal pop-up for new users
• [x] When we should include a donation button/ ask
• [x] Consider what content/ asks we want on the 'thank-you' page

[valianttry]

Process question: Are we moving away from Redpen @natalieworth ?

also cc @a-kilroy so she can see the work that's happening on petitions as she's evaluating firms to help us with Nationbuilder implementation. :)

[natalieworth]

Hey @valianttry Sorry I've added to redpen here too if it's easier for commenting/ feedback :) : https://redpen.io/p/fb792de4d217c4857f

[valianttry]

oh no worries! I'm happy to give feedback wherever, this was just the first time I'd seen something in Google Presentation vs. Redpen. FWIW Redpen is a nicer environment for feedback IMHO, but I'm up to use whatever, just so we're consistent / it gets you what you need!

[valianttry]

I'll leave feedback in the Google doc since that's where there's already feedback (dont' want to split up the feedback X platforms)

[natalieworth]

@KevZawacki @HPaulJohnson Here are the V1 wireframes that we'll need copy for: https://redpen.io/p/ma1c495b43df7aecbd 1) V1 Landing page:

• [ ] Letter title
• [ ] Letter content (Sara/Kevin working on)
• [ ] Pledge title/caption
• [ ] Opt-in text
• [ ] Confirm privacy policy text
• [ ] Sign pledge button text
• [ ] TBD Campaign name/ title (this can be added later as needed)
• [ ] TBD Video title and content (this can be added later as needed)

2: V1 Donation ask:

• [ ] Donation ask/ title
• [ ] Donation text/content
• [ ] Donation button text

3) V1 Share ask:

• [ ] Share ask/ title
• [ ] Share text/content
• [ ] Share button text

Feel free to revise or add anything as necessary. Everything in the mock-up wireframes is acting as placeholder text for now. I'm good with any format that's easiest for you (e.g. a google doc) for the content/ text of the pages.

[HPaulJohnson]

For share content, let's create 3 versions for email, facebook and twitter so that we can test via ShareProgress.

[KevZawacki]

@natalieworth Thanks -- super helpful. I can get started on this copy now.

Also, I resent the accusation that I'm "just fooling around with astronomy." I happen to take stargazing very seriously.

[KevZawacki]

@HPaulJohnson @brettgaylor

Proposed website copy here. It's informed by @natalieworth's wireframes. I've included multiple options for each section.

[natalieworth]

Most recent wireframes are here (mobile and desktop): https://redpen.io/p/ey4216930fbb478d46 Martha has currently looked over them and had a few questions.

[natalieworth]

I haven't added the content yet from Kevin, but will when the wireframes are approved. This content will be added in the UI ticket #99

[lovegushwa]

@valianttry review form, share and donate copy here: https://redpen.io/tya592c5aea90094d6

Much of this was pulled from Kevin's copy deck here: https://docs.google.com/document/d/1C49mUWIe5tPHdaLfr5-NkjeizWEh5NRXeP8C-57HgzA/edit

[lovegushwa]

UI work happening here: #99