Progressive Massachusetts Legislator Scorecard

Skills used: React, Node, UX Design

As a volunteer project, I designed and built a new interface to help people explore state legislator voting information collected by a grassroots organization called Progressive Massachusetts. The app uses a small node API to deliver information previously scattered in various spreadsheets to an accessible, mobile-friendly front end written in React.

Before I created the interface, the legislator voting and scoring information was only accessible in embedded Google Sheets on Progressive Massachusetts' website. This required users to 1) already know who their legislators were, 2) navigate the unwieldy embedded spreadsheet, and 3) to look at a different spreadsheet for information regarding the content of the bills in question.

a screenshot of the original excel sheet where legislator data was kept

The landing page prompts you to enter your address in order to find your Massachusetts House Rep and Senator.

A screenshot of the progressive mass legislator scorecard landing page showing a form to search for your local legislators.

Each legislator has a page beginning with a summary of their information and their progressive rating based on votes and bill cosponsorships.

A scorecard interface for a legislator showing him to be very progressive based on votes and bill cosponsorships.

Further down the legislator's page, the site juxtaposes an individual legislator's votes with descriptions of the bills that went to a vote, hopefully contextualizing voting information in a way that makes it more accessible for newcomers.

A table with rows describing bills that went to a vote, as well as the vote of a specific individual legislator.