The Henry J. Kaiser Family Foundation (KFF) selected Alley as their primary web publishing vendor in May 2012, kicking off a long and ambitious project, culminating in a launch a year later. During the course of this project, we merged a dozen domains into one — preserving tens of thousands of legacy URLs — and migrated content from six unique web publishing systems into one platform-defining WordPress site hosted by WordPress VIP. Some of these systems had been in use for more than a decade. Kaiser’s site is the primary means for disseminating vast and frequently-updated volumes of public health research. It features a wide variety of content: printed reports to hundreds of pages to interactive maps, graphs and videos.
This case study is a walkthrough of the entire project. It is also the story of three big challenges we overcame: efficiently creating hundreds of custom fields for dozens of content types, migrating data from six different databases and building an extensive search engine on top of WordPress.
We love the team at KFF, and love to talk about the work we did for them. KFF has been very generous about allowing us to open source the work we did for them, and we are generally able to talk about specific features of the project. Please feel free to get in touch if we can answer any questions.
Why WordPress?
We entered the vendor selection process thinking that we would build the site on Drupal. Having seen an abstract of the content we would need to migrate to the new platform and the vast variety of features, we thought that the maturity of Drupal’s toolkit for large and complex sites was better-suited to this task.
But after a chance encounter between Drew Altman and Matt Mullenweg on a flight between Washington, D.C. and San Francisco, KFF considered WordPress as an option. The KFF team asked us to compare the features of the two systems and outline what additional tools we would need to build.
We found that the total cost of ownership could be lower if we were to build the site on WordPress. The cost of upgrading Drupal between major versions is high, and upgrade projects can be very risky since major features can change or even disappear, especially features implemented by third-party modules.
Our team recognized that staff adoption of a new website hinges on administrative ease-of-use, and there is no content management system better known than WordPress. Although Drupal certainly features a powerful and easy-to-customize admin area, it lacks a single ubiquitous admin theme. We guessed correctly that many of KFF’s team would already have had contact with WordPress at some point in their career. The web-savvy users at KFF picked up on the backend very quickly, allowing us to focus on the intricacies of the content rather than the usability of the backend in general.
Despite these clear advantages, WordPress was not quite ready for KFF’s site requirements. We considered the wide variety of interactive features on KFF’s site, identifying content type complexity as the biggest issue to overcome and site search as the second issue. We also identified content migration, interactive maps and graphs as major focus areas — but these were not any more difficult to implement on WordPress than on Drupal.
We proposed to build a new custom field system and integrate a search engine from scratch, if necessary, and KFF agreed. The project kicked off in June 2012, and the first weeks of the project were spent planning the architecture for these major new components.
Content Architecture
Our design partners at Free Range Studios kicked off the project by compiling a comprehensive inventory of the existing sites, including KFF’s long list of changes that they wanted to make. The result of this process was a Google Spreadsheet, which became a roadmap for the design and implementation of the project.
The most critical outcomes of the spreadsheet were a list of content types and a list of taxonomies — KFF.org has 37 custom post types, 18 custom taxonomies and about 300 custom fields.
The content types were so clearly laid out that the challenge was became apparent: KFF had dozens of content types and almost every one of them had a trove of necessary metadata. We knew we had to tackle this problem before we could migrate data or implement designs.
Fieldmanager
Custom fields are a staple of almost every content management system. Having identified this as a major hurdle to overcome with the WordPress implementation, we shopped around at length for a suitable plugin we could use right away with several primary requirements:
- Fields must be defined in code, not the admin area.
- The implementation must be terse, since we have many fields, but secure.
- The fields must use WordPress’s core storage system, not a custom database table.
- Fields should be repeatable, so we could use them to create lists, and sortable using drag and drop.
- Fields should be groupable, and the groups should be nestable and repeatable.
Some of these are requirements for WordPress VIP, and others came about from KFF’s specifications. We found several plugins, but none met more than a few of these needs.
We set about building our own system. The result of this quest is Fieldmanager, an open source plugin which allows developers to attach many different types of fields to posts, users and taxonomy terms. Additionally, it can create submenu pages in the backend of the site to manage site options, and even build and process forms on the user-facing theme.
Preserving WordPress’s natural ease of use while meeting KFF’s ambitious specifications was a difficult task. We couldn’t have done it without Fieldmanager. Fieldmanager is now in use on a variety of other large-scale WordPress sites, including NYPost.com.
Content Migration
A primary goal of this project was to combine the many different systems running isolated sites on many different domains into one site running a single codebase. We pulled content from six different systems: a CommonSpot CMS which powered the main site, a Sitecore database which ran the Health Reform and Global Health verticals and four distinct sets of public health statistics — one each for U.S. state facts, global facts, Medicare and Medicaid. KFF’s content migration is among the most complex we have ever done.
Legacy Redirects
During any content migration, we maintain a map of legacy URLs to WordPress post slugs and IDs, since the URL structure of the new site can change during the site build. This is generally the only custom database table we add to a WordPress install, and we remove it once the site launches when we load the URL mapping into a configuration file.
Design Implementation
We worked through over one hundred distinct PSDs from Free Range Studios. These designs represented about twelve very distinct site sections, including the complex and highly interactive search system. We took the designs and created a style guide, which led directly to the CSS system which we implemented with Compass.
Responsive Design
KFF’s site is selectively responsive. There are a number of complicated site sections, whose audiences are mostly likely to access for research purposes. We built site sections for the general public to fit mobile devices at a 480px breakpoint, which we can toggle per template.
The Search Engine
KFF’s search engine is the first implementation of Elastic Search on WordPress.com VIP (we built the second implementation for The New York Post). KFF’s requirements for site search are quite broad, given the variety of audiences their site serves and the long-lived relevance of most of their research. We employed facets, which provide aggregated data based on search queries, in several different ways to make KFF’s content easier for users to find.
Elastic Search powers eight distinct search engines on KFF.org, plus related content on almost every post page. Of the eight search engines, several of them power whole categories of landing pages to quickly display recent content instead of core WordPress methods. For example, the most blog-like section in all of KFF.org is Perspectives — which is driven by Elastic Search.
The obvious benefit of this approach is that we can employ Elastic Search’s facets on landing pages, but this approach is also much more performant than using WordPress core methods. Elastic Search can dynamically select posts across a variety of criteria — for example, a category, a post type and a date range. Layering additional selections (e.g., multiple tags) on top of the initial search does not generally result in performance degradation.
Editorial Features
KFF’s reports, fact sheets and issue briefs provide expert public health analysis to the government, media and the healthcare industry. Some of their work is also widely used by the general public, especially around health reform and the Affordable Care Act (ACA). Almost all of their work is more complex than a typical editorial feature on a news site, so we had to customize WordPress extensively to enable some of KFF’s features.
Many of these reports are viewable on a single page, but some are quite complex. The annual Employer Health Benefits Survey runs over a hundred pages when printed, and includes a large variety of charts and graphs. Most sections also have a slideshow-style exhibit viewer which has useful slides pertaining to that section’s content. Each section of the report is a single WordPress post. Sections are tied together by a parent post, which can organize each section into a number of tabs.
The endnotes and exhibits tabs are dynamically generated from the contents of each section. Endnotes are created using inline shortcodes, which render a superscript number in place and the endnote itself in the special tab. The exhibit viewer is a comprehensive list of all the elements in every slideshow. Each exhibit is viewable in a modal window from the exhibit tab, and any associated file (usually a spreadsheet or PowerPoint file) can be downloaded.
KFF can also dynamically create landing pages for sections (a taxonomy) or for any topic at all. KFF covers ten different health topics (Health Reform and HIV/AIDS, for example) and each has a custom-curated landing page. Special topics, such as KFF’s collection of consumer resources, can also have custom landing pages.
Interactive Features
Visualizing State and Global Health Data
One of our primary responsibilities for KFF is to build and maintain the software that powers their collections of State and Global Health Facts. Each dataset (about 1,000) is collected in a single WordPress post. These datasets use tabular data to demonstrate facts about diseases, demographics, health reform and health care across different geographies. We built an interactive map and a line graph to provide the most useful data exploration experience possible. Each dataset employs spreadsheets to manage their data. Originally, we built a spreadsheet component into the WordPress backend, but have recently moved to Google Spreadsheets.
We have continued to work with KFF on enhancing the feature set around State Health Facts. In 2017, our team conducted an interactive workshop where participants sketched ideas for a new report tool. These sketches were refined as wireframes, which were then tested among real users of State Health Facts.
FAQs, Glossaries, Timelines, and Quizzes
KFF employs a variety of different interactive tools to explain various public health issues. The most extensive of these is the collection of FAQs which address a wide variety of concerns about the Affordable Care Act. Similarly, a quiz tests consumer knowledge of the ACA, a timeline describes when each provision goes into effect and a glossary provides helpful definitions of many of the obscure terms made public by the ACA. The FAQ and glossary content types extensively employ Fieldmanager and a real-time, in-page search.
The Subsidy Calculator
The most popular feature on KFF’s site by far is their subsidy calculator, which provides an estimation of premiums under the Affordable Care Act. Consumers have used this tool more than one million times to accurately predict their costs under the ACA before the launch of Healthcare.gov. Many news organizations directed the public to KFF’s tool after the rollout of Healthcare.gov. We made an embeddable version of the calculator which was deployed on hundreds of news sites, including NPR.org and Time.com. Because we built the tool in pure Javascript with dependencies only on JQuery and Underscore.js, NYTimes.com was able to fork our tool and restyle it for their own purposes. We also built a custom version for the Washington Post, which they deployed in their health coverage section.
Email Integration
After the site launched in May, we migrated KFF’s many email newsletter subscribers from a custom Lyris/SugarCRM email system to HubSpot, which KFF selected to manage user registrations and profiles.
Outcome
Alley deployed WordPress, which started its life as a personal blogging platform, to replace a variety of large-scale “enterprise” systems, including Sitecore and Commonspot, to great effect and without losing much of the agility and usability that defines WordPress as a CMS. In addition to cutting costs significantly, KFF is better equipped to respond to the rapidly changing nature of health care reform coverage — so much so that the Washington Post’s Wonkblog called Kaiser Family Foundation’s site the think tank of the year for 2013. It’s thrilling to see an organization reap such fast benefits from a site migration, but it is even more exciting to imagine the things we will get to do together in the years to come.
