Center for Strategic and International Studies

An indispensable digital resource for global policy and media influencers.

Serving Up Relevant Content

The Center for Strategic and International Studies [CSIS] needed to (1) elevate standalone, emergent content for new users coming directly from organic search and (2) serve returning users already familiar with CSIS with relevant content, quickly. 

In the redesigned site, filterable and dynamic content blocks populate fresh content throughout the site automatically, while dedicated program pages serve as hubs for specific topics and regions for users who know where they need to go. Regardless of user type, media queries, contact information, and an immersive navigation present CTAs that make their next step–whatever it may be–quick and accessible.

Mobile screens from CSIS tiled in a masonry like grid and slanted sideways. Screens include event details, artiles, and large interactive stories with headlines that read "The Lessons of the Afghan War that No One Will Want to Learn"
Depicts an image of the CSIS design system and include their rich palette of 3 blue tones and various grays. Next to a list of type styles denoting the font family Publico by Commercial Type.

Future-focused Content Editing

To create common spaces for center-wide content (analysis, reports, events, etc), with program areas that felt more bespoke, we used a combination of Layout Builder with custom plugins to create flexible components. Each component has enough unique variations that it can be used across multiple locations of the site, and content authors can quickly build and preview content grids in a variety of layouts. 

The backend also exists as self-contained components–meaning the backend logic, configuration, and templating logic are stored together, allowing the site’s functionality to be “portable”. Now, frontend updates are straightforward (for example, the entire typography system on the site could be updated by making changes in one file), and all frontend building blocks have the ability to be reused on a microsite with a completely different backend–making this site the ultimate example of being future-proof. 

Image showing the flexibility of the different page heroes - includes programs landing pages about Global Food Security Program, Global Health Policy Center, and the Middle East Program
Collage of UI elements overlaying an outline of a map of the world. Elements include components for live events and buttons for filtering
Feature highlight:

Event Registration Integration

On top of releasing reports and running countless global programs, CSIS also produces nearly 25 events every week. Having an event registration system that seamlessly integrates with their existing software is critical for their team to keep data centralized and easily trackable.

In their new site, a custom-built integration makes it simple; when a user registers for an event, relevant registration information is passed directly to Pardot and Salesforce. But this works the other way, too. CSIS can view registrations right within Drupal, and easily manage communication and event messaging using their existing Pardot setup. Their new event registration system now supports them in managing all the different types of events they run–from in-person conferences, to virtual series and beyond.

Two desktop screens side by side - one shows the homepage of the new CSIS.org with a very news organization-like layout featuring 6 top articles. The other is the events page featured 1 large event and 4 smaller events in a grid below.
iPad mock up showing the Spotlight on Korea Chair Program of CSIS

Results and Early Wins

CSIS’ new website is a source of savvy and interactive content that invites users to tap into both brief, independent takeaways as well as in-depth analyses. Content planning, staging support, SEO prep and a measurement tracking plan will allow us to gather robust performance reporting to track site success–and iterate the site alongside the CSIS team to make sure it’s always meeting the moment.   

What We Did


Strategy

  • Discovery Workshop
  • Stakeholder Research
  • Personas and User Journeys
  • Information Architecture
  • Measurement Planning
  • SEO and Google Analytics

Design

  • Creative Direction
  • Visual Design and UI
  • Flexible Page Comps
  • Prototype

Engineering

  • Content Migration
  • Technical Planning
  • Accessibility Optimization
  • Digital Ecosystem Mapping
  • Custom Drupal Development
  • Custom Salesforce Integration
“…It is truly a world class site. When you are on the homepage and click on one of the digital features, like NK Deterrence, it is seamless to an incredible interactive. When you are looking at the homepage, it has the feel of a media company’s content–not a think tanks. It’s really quite something.”

Explore More


Oregon Museum of Science and Industry Preview

Oregon Museum of Science and Industry

A flagship website for one of Oregon’s most famous museums encourages digital exploration.

Student Debt Smarter Preview

Student Debt Smarter

A simple and approachable digital brand that helps students make informed decisions about student debt and their financial futures.