Work // CounterPAC

It is no question that the campaign finance system in America today is broken, with loopholes in laws that enable candidates to accept undisclosed, big money legally. CounterPAC was formed by people concerned by this trend, dedicated to take special interest money out of elections.

CounterPAC had a simple, single page website that outline their mission and goals, but needed work to re-establish their content so it’s easier for their constituents to find out more about CounterPAC’s mission, the work that they do towards cleaning elections, and how to donate to their organization.

I worked directly with the Executive Director on expanding out their design and site structure to provide better content hierarchy to house the additional information. We also determined that we wanted to detail each of their campaigns as a story on what races they chose to target, how they approached the issues, and what resulted from their efforts.

The first version of CounterPAC’s web site fit their needs initially, but over time, new content added to the site ended up appended on in a stack, turning it into one long page.

We started with a sitemap, examining what content the new website should have: how a multi-page structure would contain this information and the best ways to organize the information to the users. The home page would now be simpler in messaging, firmly stating CounterPAC’s mission, and relevant current information, such as recent initiatives, news, and blog posts. All sections, like campaign and pledge descriptions, would get more room to breathe as their own dedicated sections on the site.

With the sitemap in place, we started wireframing each new page and explored ways the new content should interact with the old.

Their main work consisted of pledges that they attempt to get candidates in races to sign, so the focus needed to be centered around the campaigns they run on the races. At first, we placed campaigns and pledges on the same content level under the "Our Work" section of the site. We went through a few rounds of wireframes feeling that the heirarchy made sense. Once I built a low fidelity prototype to make sure what we were staticly mocking made sense, this was the one area where it just didn't feel right navigating between campaigns and pledges. We ended up focusing on the pledges instead and outlining which campaigns ran under that pledge.

Once we had a plan in place, we moved onto design. I adhered with the same design direction as the original, but expanded layouts and modules to accommodate new sections and framing of information. I loved the pop of pink in their design, and used it strategically so it wasn't overpowering and move the users' eyes down the page.

Because it was identified from the beginning that one of the primary goals of the site is to interest people in donating to the group, a Donate button is featured prominently in the header but not in the main navigation, as it isn’t in the main flow of content.

The pulled quotes in the old design reminded me of print design, so I kept that in some of the sections, as well as creating some more unconventional web layouts. I took advantage of utilizing asymmetry and overlapping elements, while making sure sections were flexible enough to accommodate varying lengths in copy and content for the future.

The site was built using Jekyll, Github's static web site generator, so after a quick ramp up on the tech, I built out the templates using HTML5/CSS on that framework. The site is also fully responsive to accommodate for smaller screen sizes.

In the previous design, the work that they did for the campaigns was only outlined by individually listing the TV/newspaper ads that they ran, and the press they received from any ads and meetings with the candidates. We realized that this was better told as a story, instead of lists that failed to tie related events together within a campaign. We found an open source tool for a timeline, and told a fuller story through it, chronologically outlining each relevant event for the campaign. This allows the viewer to see how the events and its effects played out during the course of the race.