Center for Popular Democracy

Page Redesign and Coding

Challenge: The Center for Popular Democracy (CPD) is a racial and economic-justice nonprofit that works with grassroots partners to effect progressive policy change. Their campaign page template needed a refresh to be simple, functional, and engaging.

Process and Tools:

Heuristic evaluation
Landscape analysis
Sketching
Design iteration
Adobe Illustrator
HTML/CSS

Current Page ("Before")

The current campaign page overall is bright and has a compelling image, but the header is heavy, and the template has multiple navigations and duplicative buttons.

The tabs, in addition to looking somewhat outdated, hide content from the viewer. More importantly, Google may not index or rank tabbed content for search results because it is hidden.

Finally, the petition, as a tab, cannot be linked to directly. Since CPD partners with other nonprofits on campaigns, their petition should have a unique URL to be a single repository for signatures from multiple sources.

Design Process

For this project, we were not looking to do a rebrand, just a refresh of the page/template. I looked at other well-known social action organizations, sketched, and did design iterations in Adobe Illustrator.

I looked at several CPB partner websites as well as other progressive and conservative sites.  I liked using the photo as background. — I looked at several CPB partner websites as well as other progressive and conservative sites. I liked using the photo as background.

In early sketches I kept the tabs, but reduced the number.  Once I let go of the tabs, i knew I wanted the buttons in the header image. — In early sketches I kept the tabs, but reduced the number. Once I let go of the tabs, i knew I wanted the buttons in the header image.

In early iterations I tried to use the photo as background and have the protester's gaze lead to the buttons.  However, the look was too dark, and the vertical flow was not smooth. — In early iterations I tried to use the photo as background and have the protester's gaze lead to the buttons. However, the look was too dark, and the vertical flow was not smooth.

Refreshed Page ("After")

The refreshed page has:

Clear, prominent calls to action. The buttons would bring up modal windows that keep the site visitor on the page, and can be linked to directly from other channels.
Lighter, more engaging header.
Typeface that matches typeface of logo.
Content and images that are brought out from behind the tabs to engage the reader, and be ranked by google.

HTML Mock-Up

I designed the page in Adobe Illustrator and then coded it in HTML & CSS,

See the HTML Mockup on GitHub

See my code on GitHub