The Guttmacher Institute

An Open Platform for Reproductive Rights Reporting & Data

The Guttmacher Institute is a leading global research organization for sexual and reproductive health and rights. For decades, the institute’s reporting, data and analysis have informed public policy and shaped perspectives all over the world. The Guttmacher Institute believes good policy starts with credible research and seeks to make that research widely available to those who need it the most.

When we first started talking with Guttmacher’s communications team in 2014, the organization had already transitioned to using the web as its primary communications channel. Its savvy, diverse audience – comprised of journalists, policymakers, researchers and human rights advocates – used guttmacher.org to access in-depth reports, peer-reviewed journals and datasets. But the organization’s fast-growing content offering was outpacing the capabilities of its proprietary web publishing system. The Guttmacher Institute needed a digital platform to beautifully deliver its content, provide flexibility and facilitate innovation – both now and in the future.

We partnered with the communications team at The Guttmacher Institute to realign its digital communications strategy, to design a beautiful user experience and to develop a powerful digital platform for publishing rich content and data.

Sketching Guttmacher.org Content Hierarchy

Content Strategy

It was clear from day one that redesigning guttmacher.org would be all about its content. The Guttmacher Institute publishes long-form articles, peer-reviewed journals, fact sheets, state policy information and statistical datasets across a broad spectrum of reproductive health topics. Their existing navigation was no longer serving their needs or the needs of their users. Together, we identified high-value pages and user interactions, simplified navigation and rethought its complex collection of categories.

We crafted a content strategy that:

  • Brings the organization’s most important topics into sharp focus
  • Prioritizes geography as a way to find content
  • Facilitates content discovery
  • Fosters meaningful user interaction with Guttmacher’s datasets
Sketching Guttmacher.org Content Hierarchy Sketching Guttmacher.org Content Hierarchy Sketching Guttmacher.org Content Hierarchy

Designing with Data

The strong focus on words and data for Guttmacher’s content – with very little photography – was an interesting challenge when redesigning guttmacher.org. We helped create a design system that leverages data visualizations, infographics and typography to deliver content beautifully to users on all devices.

Data Visualizations

Guttmacher’s published datasets represent a huge percentage of the institute’s digital content. We worked closely with the communications and technology teams to identify visualizations that accurately and powerfully communicate Guttmacher’s rich datasets. We crafted an interface that allows users to select the format most relevant to their specific uses – from simple tables to interactive trendlines and maps.

Infographics

In the creative process, we’re interested in creating scalable design systems – not just individual page designs. We helped establish a visual framework and style guide to standardize infographic designs produced by the institute’s communications team.

Typography

Bold, clear typography – with strong contrast and generous whitespace – provide clear content hierarchy and support a pleasant, uncluttered reading experience.

"[Aten's] expertise is broad. The team is responsive, organized and a pleasure to work with. A sturdy group to lean on when you're doing a big, difficult project."


Kathleen Randall, Director of Production, The Guttmacher Institute

Content Migration

Importing Drupal Nodes

Effectively migrating more than a decade’s worth of content and data to the new platform was a central challenge during the guttmacher.org redesign project. Equally important, we needed to mitigate any potentially negative impact on years of investment in search engine optimization and organic search traffic. First, we worked with Guttmacher’s communications team to identify high-priority content and establish a migration plan. Later, the institute’s IT team provided XML exports for thousands of discrete pages, which we first ingested into a normalized database structure, then pushed into Drupal via scripted migrations using the Migrate module.

Additionally, we developed standardized spreadsheets for importing content using the Feeds module, allowing Guttmacher staff to directly manage a number of specific migrations leading up to – and even continuing after – launch.

Not Everything is a Node

For content that didn’t fit naturally into Drupal’s node architecture – content that either didn’t require direct editing, or needed tighter control of database design to facilitate more efficient queries and processing – we chose alternative storage formats. We used CouchDB for static policy content, content that was mostly related to state bills and court cases. We implemented a custom SQL-backed schema for Guttmacher’s raw tabular data and exposed that data using a bespoke API written with Silex. We then implemented a responsive and highly dynamic single page application with React to act as a frontend for this API. We also built simple automation tools using Node. These tools allow the Guttmacher team to easily push new datasets into the system on an ongoing basis. This diverse ecosystem of applications and technologies are deployed using Docker, letting us simplify our server environment and better mirror production on our staging environment or even locally.

Drupal + React + CouchDB

Previously, the Guttmacher Institute’s IT department had maintained a custom tool for publishing data in a variety of formats. Years of adding onto a completely custom, internally developed solution was limiting maintainability and feature development. We helped the organization standardize on a powerful, open source technology stack that included:

  • Drupal for content management
  • React for rich, interactive data exploration
  • HighCharts for beautiful data visualizations
  • CouchDB for storing policy-related content exported from Guttmacher’s internal systems
  • Silex for exposing statistical data exported from Guttmacher’s internal systems

Looking Ahead

After months of planning, designing, and building, in deep collaboration with the incredible Guttmacher team, with weekly check-ins, onsite workshops, in-person trainings and countless emails, we’re thrilled with the new guttmacher.org. The work continues as we plan future iterations for the platform, respond to user feedback and explore opportunities for continuous enhancements.