usagov / vote-gov Goto Github PK

Short copy explaining to users how to determine whether or not a site has a .gov URL.

Depending on where things land with usability testing, we may need to tailor this to a user's browser context (different instructions for desktop vs. mobile, for example). But for now let's start with something generic.

@kategarklavs please update this with your progress and move to "review" if appropriate

We're developing content to explain ways to confirm that vote.gov is a government site (see #38 and #39) but we still need to figure out how to expose this information.

This should probably not be on screen all the time (it's secondary info), but we need it to be very discoverable and easy to find.

Current hypothesis: make the "An official site of the U.S. government" obviously clickable/interactive/enticing in some way, and when clicked have it slide down to expose the microcontent.

• Find out which gulp tasks to bring over from: https://github.com/18F/ffd-microsite/blob/staging/gulpfile.js
• Bundle CSS and JS files into static/assets/ directories to be used by Hugo.
• Install USWDS https://www.npmjs.com/package/uswds

Do we also want to support gulp asset linting of scss and js files?

Should this be two issues?

The list of bugs for the language switcher from #86.

This list was extracted out of the comments on the PR in order to get the language switcher functionality in for any usability tests that may be done while we pause development

Acceptance criteria

• When you're on the Spanish site and click the "logo", it currently takes you to the English homepage, but it should take you to the Spanish homepage.
• Center the English/Spanish button vertically - it looks slightly off center
• On mobile, change the "Official government site" font size to 10 px and line-height to 1.2 rem
• Please use this slightly larger flag (18px x 13px) and vertically center it in the banner (currently it's off center on mobile since it's top aligning to the text.)

When users search something like "how do I register to vote?" on google, they get a specially-selected and visually distinct result (see screenshot below). Right now, it points to usa.gov/register-to-vote; we would like it to point to vote.gov.

(I will have more to add based on a thread with Google)

When a user has identified the state in which they vote, show them upcoming deadlines for registration.

use a typeahead instead of a select for determining state

Currently, the deployment strategy only focuses on a single build step. There should be a repeatable automated process for building multiple Hugo sites and then synchronizing all the changes within a single public directory.

Acceptance Criteria

• Leverage the npm run * scripts in the package.json
• Ensure that all multi-lingual sites are deployed to ☁️.gov

possibly usability testing, possibly a/b testing

As of #69, the build process uses autogenerated env vars which are then included in npm script commands, all of which is specified in package.json. As @rogeruiz says here, it may be better to have gulp reference env vars (specified elsewhere, perhaps?).

Currently, the dropdown select JavaScript which hijacks the form submission on the homepage exists as a JavaScript within a <script> tag. It should be modularized and exist in the assets/scripts/ directory as a component. This can be worked on during the related Typeahead work, #47 #48.

Acceptance Criteria

• Form hijacking works for all supported browsers IE9+, Latest two versions
• Form hijacking code exists as a module within assets/scripts/
• Form hijacker supports language URLs for register and registrar.

We ultimately can't answer a lot of questions for voters because it is based on their county. But if we can point them to their local election officials, they are more likely to find the answers they need.

Possible data source: https://www.usvotefoundation.org/Civic-Data-API

which firms on schedule are likely to be able to recruit users? which are likely to be able to perform research?

Tasks

• Add link to external site: https://vip.sos.nd.gov/PortalList.aspx
• Update text to say: "Learn more about voting in North Dakota"

collect a link of every state's registration status checker (if offered) so we can link from individual state pages

There needs to be some documentation of an updated CircleCI multi-lingual site deployment and what commands can be run to build, preview, and edit the multi-lingual site.

Acceptance Criteria

• How to leverage npm run * scripts to build the site
• Document limitations of local development with the site
• Possibly, leverage another tool to preview the "deployed" combined multi-lingual site.

Taking @arantxarecio's work regarding translations, there should be composable and reusable partials to handle language changes within layouts

Acceptance Criteria

• All sections outlined in the Google Doc should be translatable

We'll need some kind of element on screen to allow users to change language

There are a small number of linting errors and warnings for codebase. Deployment
is currently failing on CircleCI because of this. Let's fix the linter warnings
and error before the codebase grows any more. 💯

Errors & Warnings

• vote-gov/assets/styles/main.scss
  • main.scss:96 [W] TrailingWhitespace: Line contains trailing whitespace
  • main.scss:114 [W] SelectorDepth: Selector should have depth of applicability no greater than 2, but was 3
  • main.scss:135 [W] ColorVariable: Color literals like #003366 should only be used in variable declarations; they should be referred to via variable everywhere else.
  • main.scss:144 [W] TrailingWhitespace: Line contains trailing whitespace
  • main.scss:146 [W] SelectorDepth: Selector should have depth of applicability no greater than 2, but was 3
  • main.scss:164 [W] TrailingWhitespace: Line contains trailing whitespace
  • main.scss:266 [W] TrailingWhitespace: Line contains trailing whitespace
• vote-gov/assets/scripts/start.js
  • 3:1 warning Unexpected console statement no-console
  • 3:52 error Missing semicolon semi
  • 4:1 warning Unexpected console statement no-console

Short copy explaining to users how to determine whether or not a site has a valid government-signed SSL cert (not all sites use https, but vote.gov will, so let's go with it)

Depending on where things land with usability testing, we may need to tailor this to a user's browser context (different instructions for desktop vs. mobile, for example). But for now let's start with something generic.

@kategarklavs please update this with your progress and move to "review" if appropriate

EAC keeps an election calendar at http://www.eac.gov/voter_resources/election_calendar.aspx - we need to define a data schema for this and then convert the data locked within the PDF into YAML (or similar)

The actual work of creating the yaml file is a micropurchase candidate.

We now have about 10 proposed calls to action, each of which represents one hunch (mostly backed by research) about how to encourage people to take some action. The vote.gov website offers us an opportunity to learn about these ideas, and to apply them more broadly in the government (for example, in the Web Design Standards). The calls are here https://docs.google.com/document/d/1PU4UgSAlEWXgDZPs2DsGm2r_qTbO-U2GiULaKMyBCbg/edit

The action to complete this card is to have the site be ready for testing these different calls to action against one another on the live site. Perhaps using optimizely or google analytics to collect the data and/or organize the randomization of the experiment.

USA.gov already has an email list service (http://connect.usa.gov/subscribe). We think that our team can have an impact on civic engagement by enabling people to ask for reminders, and then to send reminders about federal election deadlines. For now, we may just email them around the November election, but eventually people who ask for reminders might be able to request more locally relevant reminders as well. So, this card proposes that we add a module (like the existing modules of "find your polling place", "check your registration status", etc..) for "Email me to remind me to vote." or "Don't let me forget to vote." etc.. that would link to a special email list under the rubric of the usa.gov email lists.

Learning how to get people to want reminders to do things that they know that they want to do will also help us in the broader FFD project. (this is called narrowing the gap between intention (saying you want to do something, like exercising, etc..) and action (actually doing what you say and believe you really want to do)).

This documentation should be focused on users using the Github interface. This means lots of screenshots and maybe even gifs. Also easy to understand workflow information. This should go in the wiki.

Acceptance Criteria

• Content flow chart for adding and modifying content
• Uses the Github interface and explains any limitations to said workflow
• Describes who can be asked for help or gives pairing suggestions

Show the next election date in a state when a user has identified their voting location.

Collect each state's online registration form and/or PDF form so we can send people to the right place.

There are possible pitfalls to this, but we may want to experiment with detecting the user's language settings and sending them to English or Spanish based on that (but still allowing them to toggle language)

What can voters expect? Where do they turn if unable to vote?

Today, we redirect from vote.gov to vote.usa.gov. Sometime after the California primaries (June 7), we would like to switch this to go the other way.

Create a list of user stories we may want to contract out via micropurchase

Acceptance Criteria

• manually taking content out of current vote.gov to add to the four states currently in the project
• get all forms reference by registration_type = "by-mail" from the EAC website. See this commit for source.
• refactor URLs to not include the word /states/, use /register/ instead.

I noticed that usa.gov already has capability for this at https://www.usa.gov/contact, and in informal discussions about the site and government websites in general, I've heard requests for such a feature. Tagging @jpyuda @megdaly in case this is the wrong place to add such an idea and/or some obvious reason to close this issue immediately.

Stage site should be updated have Texas and/or mirror Test and/or Production.

Collect the list of state election result pages so we can direct interested users to prior election results

PDFs are hard to fill out on phones, but most of our traffic is from mobile. Emailing to themselves can potentially improve their liklihood of registering to vote.

Allow users to find their polling place based on their registered address

Possible options:

1. Google civic info API
2. Pew's data directly
3. sending them to their state's polling place locator (if that exists)

Here is a link to the application:
http://www.votetexas.gov/register-to-vote/

Irrespective of President's Obama's recent speech and visit to Austin, TX, there needs to a least be a link and/or instructions with application.

Below issue was sent in to general USAgov email:

I was looking at vote.usa.gov and want to report incorrect language codes. You list "(Other Languages: CHN, JPN, KOR, ESP, TGL, NAM)".

The standard codes for Chinese, Spanish, and Vietnamese are:
Chinese: "chi" or "zho" (two-letter "zh")
Spanish: "spa" (two-letter "es")
Vietnamese: "vie" (two-letter "vi")
The one that is particularly strange is "NAM" as that is neither correct nor intuitive.

We need to decide if using ISO 639-1 or ISO 639-2. We've typically used the 2 character codes, ISO 639-1, so I vote for that.

Currently, the state selection process is done either with a drop down menu or a Typeahead input area. Both of these require JavaScript on the page. Should there be a way to display all states if there is no JavaScript detected on the page? Perhaps a scrollable list of some kind?

cc: @jpyuda @bradnunnally @ericadeahl

Design tasks to implement into the templates:

All:

• Add new design for the header @ericadeahl

Homepage:

• Change the footer to be not fixed and make the vote icon cut into footer
• Get a gradient colors background from @carodew and implement (the blue background top is #225BA0 and bottom is #1C4B84)

Internal page:

• Update the back button
• Make inner pages more "full" in design @ericadeahl
• At mobile, reset margin top for h1 style and use 30px
• Add padding to bottom of main content area

We currently don't have a way to get to the repo from the site. This will be helpful if someone finds a bug and wants to submit an issue. Guessing this would go somewhere in the footer.

Collect the list of what hours polling places are open state-by-state

We need to proactively write plain-language disclaimers about where we've gotten the content we're providing and where/how people can verify it. They need to convey:

• Our data source(s)
• That every effort has been put forth to verify the information
• That the ultimate source of truth for information about voting is the state or local election office (depending on context) and that users might want to validate the information there.

Professor Walter Mebane and some of his students have collected the links and forms and phone numbers for all 50 states. They may be willing to contribute them to vote.gov. If this seems interesting to use then we should have a call with with him/them. Assigning this to Meghan for initial thoughts about moving forward.

We need to translate all of our microcopy (labels on interactive elements, things like that) to Spanish

In order to be allowed to cast a ballot in their state