Committee to Protect Journalists

Overview

The Committee to Protect Journalists (CPJ) is an NGO that protects and defends the rights of journalists—widely considered the Red Cross of Journalism. Since the late 1980s, they've published an annual census of journalists killed or imprisoned in relation to their work. The database was falling apart—locked in a dying CMS and relying on disconnected parts and systems. We built a solution to bring the organization back to life.

Problem

CPJ had a solid set of data from 1992 to present, but it was trapped in a Content Management System (CMS) called Movable Type—a platform that had been dying for over a decade and was no longer capable of running their product. In addition, the front-end product was outdated and near-impossible to update. The internal research team was relying on a combination of spreadsheets, desktop files, and the dying database to run one of the most critical sources of information in journalism.

Working with those who have died, are in prison, and in exile and telling their stories required a deft hand. Our research and documentation were tested and checked in ways none of us had experienced before to ensure accuracy and reliability for years to come.

Goals

• Completely rebuild the database from the ground up while keeping the relational data intact
• Build an all-new backend and front-end product, freely available to the public, that kept costs down and solved the myriad relational data issues that had arisen
• Visualize and animate the data for better user engagement
• Build an open-source API for use by organizations and institutions throughout the world to conduct and verify academic research
• Deploy it all in a design system that could support a media property, safety resources, and a donation ecosystem that kept the organization going
• Make this all work on open-source tools and keep hosting and maintenance costs to a minimum
• Do it all in 9 months with a shoestring budget

Process

We started with data and how data would get into the system. Simultaneously, we conducted user research with internal journalists, external journalists, researchers, donors, and end-users of the (future) API to determine priorities for both the design system and the product functions.

We wireframed key views to rank data and prioritize information for specific audiences. We looked at how data would be presented—by person, country, incident type, year, etc.—and began scaffolding our information architecture. From there we began building a design system which covered data visualization, content, resources, forms, training materials, videos, extensive content libraries, and more. It all had to work in both Roman, RTL, and pan-Asian languages and be editable in the backend product.

Research outcomes were turned into specific action items that we used to build our process and deliverables. We thoroughly uncovered the challenges users faced, the desires they had for future capabilities, and the most efficient ways to get them there.

Solution

In the spirit of CPJ's open-source ideology, we decided to unify the design system for the CMS and the front-end tool into one public-facing system. The Design System and Product Experience are the same for the internal team and anyone in the general public. The backend uses a simple Wordpress-based editing tool for data entry and the team uses the same visualization and research interface—so when they walk a contact through how to find information, the experience is identical.

The visualizations are based on D3.js and are using open-source code as well, making them easy to modify, embed, and share.

We ensured that all bases were covered across mobile, web, and the product itself for the design library. All content types for their programs, such as Advocacy, got the same treatment and research and data visualization tools. The resulting set of Sketch-based guidelines and tokens were indexed into a handy linked guide that the team can manage and adapt as they grow.

Result

CPJ.org immediately saw traction in both increased donations, increased participation, and increased user satisfaction (both qualitative and quantitative from subsequent testing). The launch couldn't have come at a better time—the first full year of the Trump Presidency. Right after CPJ launched and began leading press freedom efforts again, the sitting United States President began outwardly attacking the media. Meanwhile, several free and moderately free nations throughout the world were holding unprecedented numbers of journalists against their will.

The board, already made up of luminaries such as Dan Rather and Arianna Huffington, welcomed a new advisor—Meryl Streep. The world's greatest actress took time from her acceptance speech at the Golden Globes to encourage everyone to support CPJ and their efforts.