voteamerica / voteamerica.github.io Goto Github PK
View Code? Open in Web Editor NEWFront end for the Carpool Vote website. Support every American's right to vote!
Home Page: http://www.carpoolaction.org/
License: MIT License
Front end for the Carpool Vote website. Support every American's right to vote!
Home Page: http://www.carpoolaction.org/
License: MIT License
Change the "Support" navigation hyperlink text at the top to "Voter support"
Link this to the HOW TO CLAIM YOUR VOTE section on the home page and on the "Our story" page
Replace the text that reads: In many states, new voting rules have made it more difficult for people to get to polling stations. These rules particularly affect People of Color, People with Disabilities, Young People, Elderly People, and Women. Carpool Vote is a tool to fight back against an unfair political system in the 2016 election. We connect volunteer drivers with anybody who needs a ride to claim their vote.
to
We connect volunteer drivers with anybody who needs a ride to claim their vote
In DRIVER signup form, underneath phone number entry, include the following entry:
I am driving in an official capacity on behalf of a registered organization ꧐
Organization registration number: ______________ (required if the above box is checked)
In RIDER signup form, underneath the phone number entry, include the following entry:
꧐ Pensioner or disability: Please check this box if you are retired from work or you consider yourself to have a disability
Do you have an special accommodation needs?
Remove entire boxes for WHAT IS THIS SITE section on the left and NEWSLETTER section on the right.
These sections are no longer necessary on the new home page.
Do not remove reference to newsletter in footer container.
The information in the voting support box appears twice. Delete the voting support box.
To the left of the other page links, add "Home"
People may want to return to the home page from whatever part of the site they're on
In DRIVER signup form, change "I am able to transfer a person with a wheelchair into my vehicle" to
"I have an adapted van with space for a powerchair"
In RIDER signup form, change the text input box back to a check box (it's unlikely that more than 1 wheelchair user will need to travel in the same vehicle)
Keep the style the same as the DRIVER form - "Wheelchair" to the left of the check box, "I am a powerchair user who needs an adapted van with a lift" to the right of the box.
In the RIDER signup form, change the text inside the notes box to: "I have the following accommodation requirements (ex: service animal, assistance folding equipment, assistance entering and exiting car):"
Change "Are you registered?" to headline style (same as "Need further support" style.
Add paragraph text: "Select your state check if you're registered to vote on the November 8 presidential election"
Move "Are you registered" section to above the Rock the Vote stuff
Change the links from the state dropdowns so they start a new tab when selected, rather than leading the user away from the Carpool Vote site.
Move newsletter signup form to below the Contact section on the left in the footer, as per the home page mockup.
See #frontend channel of the Slack for homepage mockup.
This should be to the right of the our story box (so in a different position to that seen in the mockup in the #frontend channel of the Slack
Copy exactly all text and images found in the mockup - using the hyperlinks already found on the live site but with the one hyperlink change from issue #37
On the rider form, we should ask how may seats are needed (TotalPartySize) , and if wheelchair is needed (NeedWheelchair)
Checkbox name should be called : NeedWheelchair
The node.js app that will collect the data expects those 2 fields from the form : NeedWheelchair and TotalPartySize
Make I NEED A RIDE and I CAN OFFER A RIDE buttons narrower.
Place I NEED A RIDE toward left side of banner picture and I CAN OFFER A RIDE next to it toward the right.
See home page mockup on #frontend channel of the Slack for relative sizing an positioning.
Currently, the cover photo takes up too much room and the user has to scroll down to see the I NEED A RIDE and I CAN OFFER A RIDE buttons
Please cut some of the top off the photo, so the buttons are immediately visible without scrolling down
Make footer section wider, as per the home page mockup.
Recolor the footer section to grey.
Add thick red top border with slight bevel.
See #frontend channel of the Slack for homepage mockup.
"Our story" section with:
"In many states, new voting rules have made it more difficult for people to get to polling stations. These rules particularly affect People of Color, People with Disabilities, Young People, Elderly People, and Women.
Carpool Vote is a tool to fight back against an unfair political system in the 2016 election."
Add a [READ MORE] link underneath, as per the mockup in the Slack channel
In the RIDER signup form, add the following text below the contact details:
How would you prefer the driver to get in touch to arrange the ride?:
꧐ Email ꧐ SMS ꧐ Phone call
Text for home page:
In many states, new voting rules have made it more difficult for people to get to polling stations. These rules particularly affect People of Color, People with Disabilities, Young People, Elderly People, and Women.
Carpool Vote is a tool to fight back against an unfair political system in the 2016 election.
We connect volunteer drivers with anybody who needs a ride - to the polls or voter I.D. office.
[MORE] button leads to Our story page (same link as in the navigation bar at the top of the home page
Our story page text
Carpool Vote connects volunteer drivers with anybody who needs a ride to claim their vote.
Many of our riders need a driver after losing full protection of the Voting Rights Act in 2013, as state governments no longer need permission to change election rules. The 2016 US Presidential election will be the first since this change has happened.
Under the new rules, voters in several states face new barriers to getting to the polls. Some of the obstacles that Carpool Vote aims to reduce include:
These rules - along with others introduced since the change - affect everybody but especially People of Color, People with Disabilities, Young People, Elderly people, and Women.
[FIND OUT MORE ABOUT VOTER SUPPRESSION] button links to: https://medium.com/@RightToVote
These rules in swing states could sway 84 Electoral College votes and control of the Senate. It looks like the upcoming Presidential Election will be a close fight, so our mission is to help make sure that no vote goes uncounted.
While we’re at it, we love that we can help people of all ages get excited about the political process, and introduce people from all walks of life who may not have had the chance to meet otherwise.
We hope that you love this, too!
[CARPOOL VOTE NEWS STORIES] button links to: https://medium.com/@CarpoolVote
Add bar containing the 866-OURVOTE phone number on the home page, as per the mockup.
Mockup and color numbers can be found in the #frontend channel of the Slack.
Example of such format
2016-10-01T08:00:00-0500/2016-10-01T10:00:00-0500
Right now, no data is sent in AvailableRideTimesJSON and AvailableDriveTimesJSON elements.
No matching can happen without properly formatted data.
Change current slogan and description overlaying the banner to that found on the mockup:
Every American DESERVES a vote
We connect volunteer drivers with anybody who needs a ride to claim their vote.
Also center the text.
Mockup can be found in #frontend channel on the Slack.
In RIDER signup form, delete city option:
Change "From" descriptive text inside the entry box to "Where can you meet the driver"
Change "From" to "Collection zip code"
Change "Destination" to descriptive text inside the entry box to "To where do you need a ride?"
Change "Destination" to "Destination address"
In DRIVER signup form, change City and Neighborhood to "Collection zip code" and include descriptive text inside the entry box to "Where can you collect the rider"
Below this, add: I am willing to collect within a ___ mile radius of this zip code
For the zip codes, require entry for both boxes to be 5 numerical digits only.
Ditto for miles but with 3 digits
Please replace current logo with new one.
Center the logo, as per the home page mockup.
The new logo and home page mockup can be found in the #frontend channel of the Slack.
Create a page to look like mockup in #frontend channel of the Slack. The layout will be very similar to the home page but instead of the full RIDER / DRIVER signup boxes, there will simply I NEED A RIDE and I CAN OFFER A RIDE buttons (same as the current live version - and not currently found on the mockup)
Paste the following text into the "Our story" box:
Carpool Vote connects volunteer drivers with anybody who needs a ride to claim their vote.
Many of our riders need a driver after losing full protection of the Voting Rights Act in 2013, as state governments no longer need permission to change election rules. The 2016 US Presidential election will be the first since this change has happened.
Under the new rules, voters in several states face new barriers to getting to the polls. Some of the obstacles that Carpool Vote aims to reduce include:
Polling stations face closure in lower-income Communities of Color,
Would-be voters have to travel out of town to get a photo ID to register,
The periods available to register and vote become shorter, and
Requesting an absentee ballot or voting by mail can be difficult in many states.
These rules - along with others introduced since the change - affect everybody but especially People of Color, People with Disabilities, Young People, Elderly people, and Women.
[FIND OUT MORE ABOUT VOTER SUPPRESSION button>Links to: https://medium.com/@RightToVote]
These rules in swing states could sway 84 Electoral College votes and control of the Senate. It looks like the upcoming Presidential Election will be a close fight, so our mission is to help make sure that no vote goes uncounted.
While we’re at it, we also love that we can help people of all ages get excited about the political process, and introduce people from all walks of life who may not have had the chance to meet otherwise.
We hope that you love this, too!
[CARPOOL VOTE NEWS STORIES button>Links to: https://medium.com/@CarpoolVote](this is not in mockup but should look like the FIND OUT MORE ABOUT VOTER SUPPRESSION button)
Next to the OUR STORY box on the Our story page, include information from Rock the Vote and the Election Protection Coalition (same information that appears on the home page)
From the home page, link to this page from the hyperlink at the top, and from the [READ MORE] hyperlink in the OUR STORY box (see home page mockup in #frontend Slack channel
This box should be moved to the left, underneath the OUR STORY box
HOW ELSE CAN I SUPPORT THE MOVEMENT?
Firstly, tell your family, friends, colleagues, and strangers! And share us on social media! The more people who know about us, the better our chances of making this project work for as many voters as possible!
[Twitter, Facebook, and YouTube links:
https://twitter.com/carpoolvote
https://www.facebook.com/CarpoolVote/?fref=ts
https://www.youtube.com/channel/UCY1aS3TMDGxVbckA7Va0QFA]
Please also sign up to join the campaign! We’re supported entirely by a network of volunteers who believe passionately that democracy is for everybody.
We have a variety of roles for people with any amount of time to give. This could involve joining our volunteer pool who take on small tasks that help the project take big leaps forward. We also have several strategic roles for those who want to remain actively involved until Election Day.
Name: __________________________________
Email: __________________________________
How can you help?
꧐ Do community outreach / Organize my own community
꧐ Help with media /social media outreach
꧐ Help build links with organizations / Set up collaboration with my organization
꧐ Do research
꧐ Offer legal expertise
꧐ Contribute my tech wizardry
꧐ Help recruit and organize volunteers
꧐ Help the project raise money
꧐ Other (please specify) ___________________
We also need funding to keep building the movement. Our volunteers are working around the clock but some things cannot be done with time and love alone. Could you spare some money to contribute to the campaign?
Support our IndieGogo campaign: https://www.generosity.com/fundraising/Carpool Vote-com-linking-volunteer-drivers-voters
Or get in touch at: [email protected]
Please add the following to the end of the I NEED A RIDE form
꧐ I understand that Carpool Vote will to share my contact details with the driver if there’s a match. We will not share your details with anybody else.
Hover text: Your details are safe with us! We’ll only share them with officials if they need them for a safety-related matter, and will destroy them within three months of Election Day.
꧐ I understand that this service is open to any driver or rider - no matter what their personal background or beliefs. To help make sure that both the driver and I feel comfortable and safe, I promise that I will not discuss politics during the journey.
Change text at the top of the RIDER signup form to:
Need a ride to the polls or voter I.D. office? Fill in the form to let us know when and where you need a ride. We’ll do our best to match you with a driver!
Change text at the top of the DRIVER signup form to:
Do you have a spare seat to help get somebody to the polls or voter I.D. office? Fill in the form to let us know when and where you’ll be driving, and we’ll match you with a rider!
Name merged section: HOW TO CLAIM YOUR VOTE
Create subheading for former VOTING SUPPORT section: Need further support?
See Website copy document in #frontend channel of the Slack for revised wording.
Add graphics of of Rock the Vote and the Election Protection coalition, as per the mockup.
Mockup can be found in #frontend channel of the Slack for revised wording.
No need to change the current positioning of the section, as this may change once the revised version of the mockup is available.
Please add the following tick boxes to the bottom of the I CAN OFFER A RIDE form
꧐ I understand that Carpool Vote will share my contact details with the rider if there’s a match. (Carpool Vote will not share personal details with anybody else, unless required by law, and will destroy them within three months of election day.)
꧐ I understand that this service is open to any driver or rider - no matter what their personal background or beliefs. To help make sure that both the rider and I feel comfortable and safe, I promise that I will not discuss politics during the journey.
Please add the following form underneath the insurance tick box in the I CAN OFFER A RIDE FORM
Driver license number ______________________
For safety reasons, we keep a record of all drivers' license details. If the ride is completed safely, we will not share this information with anybody else, and will destroy it within three months of election day.
In the footer, change the Sign up for our newsletter link to form that allows you to submit an email address directly. Allow user to submit using blue JOIN button, as per the home page mockup.
Replace the Keep updated with our project text with "Sign up for our newsletter".
See the #frontend channel of the Slack for the home page mockup.
To start, change the section heading backgrounds to blue with white text, and the hyperlinks to red underlined text - as per the mockups.
Mockups and color numbers can be found in the #frontend channel of the Slack.
This is an initial change to bring the appearance broadly in line with our new branding, so we can start adding it to external communications.
Move Tweet and Share buttons to above the top left-hand edge of the banner picture, as per the homepage mockup.
Resize the Tweet button so it's the same size as the Share button.
See the #frontend channel in the Slack for the home page mockup.
Move contact link higher up in the footer, as per the home page mockup.
Change working to: Contact us: [email protected]
Home page mockup can be found in #frontend channel of the Slack
A partner has found that this is inaccurate.
Replace with "Voter registration deadlines": http://www.rockthevote.com/get-informed/elections/voter-registration-deadlines.html?referrer=https://www.google.co.uk/
Underneath the 3 Rock the Vote hyperlinks, add a dropdown: Am I registered?
This dropdown contain each state. If the user selects a specific state, they should be linked to the relevant registration checking tool for each state. The full list is here: https://drive.google.com/open?id=1yk7mxt0kOK_HeLUbQrgjYXNMnjPxFv-gsGg7pZ8S5TU
needed for the demo
Best I have seen is on master branch, commit 269e1aa
is a long list or hyperlinks, 1 per state, added in the middle of the rider form. The links open a new tab. But the rider form does not have all address fields, a single field for the entire address. There is something like "collection zip code though"
purpose of this issue is to agree on the design of the UI elements and deliver for the demo
Both are voting resources and should be kept top-right
So riders can know where they will need to go on election day, we need a polling location finder accessible on the signup form.
Each state has a different site to check polling location. The full list is accessible here: https://docs.google.com/spreadsheets/d/1yk7mxt0kOK_HeLUbQrgjYXNMnjPxFv-gsGg7pZ8S5TU/edit?usp=sharing
On the RIDER signup form, next to the Destination box, could we please create a link: [CHECK YOUR POLLING LOCATION] This would link to the polling location checker for the relevant state, depending on what state was selected in the drop-down
This box should be moved to the left, underneath the OUR STORY box (so not in the same position as in the mockup)
Change headline to:
HOW ELSE CAN I SUPPORT THE MOVEMENT?
Change text / form content to copy in #frontend Slack channel:
Firstly, tell your family, friends, colleagues, and strangers! And share us on social media! The more people who know about us, the better our chances of making this project work for as many voters as possible!
[Twitter, Facebook, and YouTube links:
https://twitter.com/carpoolvote
https://www.facebook.com/CarpoolVote/?fref=ts
https://www.youtube.com/channel/UCY1aS3TMDGxVbckA7Va0QFA]
Please also sign up to join the campaign! We’re supported entirely by a network of self-organizing volunteers who believe passionately that democracy is for everybody.
We have a variety of roles for people with any amount of time to give. This could involve joining our volunteer pool who take on small tasks that help the project take big leaps forward. We also have several strategic roles for those who want to remain actively involved until Election Day.
Name: __________________________________
Email: __________________________________
How can you help?
꧐ Do community outreach / Organize my own community
꧐ Help with media /social media outreach
꧐ Help build links with organizations / Set up collaboration with my organization
꧐ Do research꧐ Offer legal expertise
꧐ Contribute my tech wizardry
꧐ Help recruit and organize volunteers
꧐ Help the project raise money
꧐ Other (please specify) ___________________
We also need funding to keep building the movement. Our volunteers are working around the clock but some things cannot be done with time and love alone. Could you spare some money to contribute to the campaign?
Support our IndieGogo campaign: https://www.generosity.com/fundraising/Carpool Vote-com-linking-volunteer-drivers-voters
Or get in touch at [email protected]
On the home page behind each of the resized and repositioned I NEED A RIDE and I CAN OFFER A RIDE buttons, add larger white boxes with 90 degree edges and a semi-circle at the top - as per the home page mockup. In the RIDERS semicircle, add the rider icon. In the DRIVERS semicircle, add the driver icon.
Above the RIDERS button, add a red RIDERS capitalized heading, with a plain text description below: Need a ride to claim your vote? Some of our riders need to get to the polls - either on polling day or during early voting. Others need to travel to get a photo I.D.
Above the DRIVERS button, add a red DRIVERS capitalized heading, with plain text description below: Sign up to give a fellow American a ride to the polls on Election Day. Or, if there is early voting in your state, let us know if you can help a little earlier. Alternatively, if you live in a state where you need to show voter I.D. at the polls, you could drive somebody to go and get one.
Home page mockup and icons can be found on #frontend channel of the Slack.
I'd like to suggest that we move the two homepage forms into their own pages (at /offer-a-ride/index.html
and /need-a-ride/index.html
or similar). Instead of using JS to show the forms, each of the main buttons would be a link.
Thoughts?
Please replace the current background picture with the new one, as per the mockup.
The background picture and mockup can be found in the #frontend channel of the Slack.
This issue should be done AFTER #19
In the I NEED A RIDE form, move Date and Approx Time selections to underneath the location information
In the I CAN OFFER A RIDE form, move Date and Approx Time selections to underneath the location information
Change "State" wording to:
RIDERS: In which state will you be voting?
DRIVERS: In which state will you be driving?
This is so that we can limit the dates and times available to early voting periods, based on the state selected.
Please limit the dates available to be selected for each state selected based on the early voting dates, which can be found here: https://www.vote.org/early-voting-calendar/
Please limit the times available to be selected for each state selected based on polling location opening times for each state, which can be found here: https://ballotpedia.org/State_Poll_Opening_and_Closing_Times_(2016)
In the I NEED A RIDE form, change the date language to: When could you travel?
Hover text: Select all dates and times that would work for your ride. We'll let you know when there will be a driver available.
To allow the user to pick dates/times, use the graphic appearance attached. The user should be able to select multiple (nonconsecutive) dates and should be required to select time slots for each date, before being able to select the next date. They should also be able to select multiple (nonconsecutive) time slots for each date.
Example of a multiple date picker: https://arca-computing.github.io/MultipleDatePicker/
Example of a date and time picker (this doesn't allow for multiple date/time selection but otherwise has a good interface): https://arca-computing.github.io/MultipleDatePicker/
Repeat this process in the I CAN OFFER A RIDE form. Use the following text:
When will you be available to give a ride?
Hover text: You can select multiple dates or/and timeframes, if you're available for more than one ride.
A partner has asked that we clarify wheelchair language. Some drivers are also uncertain about what is helpful.
CHANGE
My car has space for a wheelchair
TO
I am able to transfer a person with a wheelchair into my vehicle
We need to verify that signups were not done by bots.
Please introduce a requirement for both riders and drivers to verify they are not a bot, after they've submitted the signup form.
Something like this is accessible for all levels of tech proficiency/literacy as well as mobile devices:
http://textcaptcha.com/
In RIDER signup form:
Change
I use a wheelchair
to
Wheelchair-accessible ride: How many wheelchair users need to travel in the same car?
Change "Seats" to "Seats (non-wheelchair)".
Change "How many seats do you need?" to "Ordinary seats: How many non-wheelchair seats do you need in the same car?
Above these 2 entries, include the text:
Please let us know how how many people will need to travel together in the SAME CAR. (To make it easier for us to match people, please use complete an individual form if you do not need to travel with anybody else.)
In the develop branch...
Add I NEED RIDE button inside the RIDERS box
Add I CAN OFFER A RIDE button inside the DRIVERS box
Both of these buttons need to lead to the right form, as currently seen in the live version
Have a look at the mockups in the #frontend channel of the Slack
Change to
Support #DemocracyForAll this #Election2016. Sign up on @CarpoolVote.com: Linking volunteer drivers w voters needing a ride. #TogetherWeCan
For RIDERS, change text to:
Need a ride to claim your vote?
Some of our riders need to get to the polls - either on polling day or during early voting. Others need to travel to get a photo I.D.
Just fill in this form! We'll try to connect you with a driver.
[Hyperlink: HOW DOES IT WORK?]
For DRIVERS, change text to:
Sign up to give a fellow American a ride to claim their vote.
Offer to drive someone to the polls or, if you live in a state where you need to show voter I.D., drive somebody to go and get one.
Just fill in this form! We'll try to connect you with someone who needs a ride.
[Hyperlink: HOW DOES IT WORK?]
Add entry at the bottom of the DRIVER signup form in MAIN BRANCH:
Yes, please stay in touch! ꧐ We’d like to keep you updated from time to time about how the project is progressing. Please untick this box if you’d prefer us not to do this.
Add entry at the bottom of the RIDER signup form:
Yes, please stay in touch! ꧐ We’d like to keep you updated from time to time about how others are claiming their vote. Please untick this box if you’d prefer us not to do this.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.