The National Interest

With an archaic website that was virtually non-functional, The National Interest magazine needed to (re)invent its online presence

Our goal was to make a clean, sophisticated site that accurately reflected the paper magazine's quality and intellectual appeal, while increasing its accessibility to a larger audience. Moreover, the magazine principals had strong opinions on layout and design. It would be our job to translate all of their priorities to the screen, intact.

The goal of a sophisticated look underlays all of our planning. The site had to have the gravitas of a leading foreign affairs publication with A-list diplomatic, political and academic thinkers writing its articles. Flashy, pushy, noisy approaches used so often in publishing sites just would not do for TNI. We needed something cleaner, simpler, with a bit more elegance.

New home page

The National Interest home page, nationalinterest.orgThe new website was designed to emphasize both daily web content and the print magazine articles.

The Challenge

The National Interest, the Washington, DC foreign policy magazine, needed a new website, one that better spoke to their established brand and that functionally addressed the needs of staff and readers both. The magazine had long since outgrown their previous content management system and each issue's publication made the discrepancy more apparent.

The old nationalinterest.orgThe old site not only had design challenges, it did not function in some modern browsers.

People visiting the site needed a better way to thread from story to story. They needed more opportunities to discover and share interesting ideas. In fact, the site by this time was many years old, powered by an outdated Ektron CMS that was slow and difficult to manage. In our explorations of the site, we found that primary navigation items would not even work on Safari or Chrome. In many ways, we were reinventing The National Interest's entire online presence.

On the back end, the magazine editors needed the ability to more easily manage their content, leverage contemporary advertising strategies, and better entice non-subscribers to participate in the growth of the publication. Drupal was the perfect solution.

Research and Analysis

We began our work by an in-depth analysis of competitor foreign policy publication websites, expanding the reach to include other publications that The National Interest readers were likely to read. Areas of analysis included: traffic rank, visual look, layout, color palette, demographic breakdowns, education levels, website features, taxonomy usage, how blogs were showcased, treatment of premium (subscriber-only) content, commenting systems and policies employed, advertising systems employed, use of newsletters, social media integrations, and so on.

Research detailHaving identified other publications with similar demographics, we researched what features and functionality the audience may expect.

Demographic informationWe researched not only "competitors" but also identified other publications that have overlapping demographic profiles: What else are The National Interest readers reading?

We found that TNI readers generally seemed to align demographically with other political and foreign policy journals and magazines in terms of age and gender, but skewed higher for graduate level education. We also noted that the youngest readers were not visiting the old site much — an indication that the old architectures did not appeal to internet users accustomed to more modern user interfaces.

Visual comparison of home page layoutsWe compared the layouts of the various online magazines, finding a definite trend towards stacks of blocks in multiple columns.

In analyzing page layouts and navigation architectures of these other publications' websites, we saw a trend towards stacks of blocks of content, often in multiple columns. We also found much overlap and similarity in color palettes between the sites.

Our resulting strategic brief provided our team with a baseline of what seemed to work, what didn't, what we wanted to explore, what we wanted to avoid — all framed within the goals of the site.

Architecture and Design

One of the goals was to come up with a look and feel that stands out from the others, without being jarringly different. We needed the site to be usable and accessible to the existing audience, of whom a large percentage are older, while providing appeal to younger readers who may come across the site through happenstance Google search results, links from other sites, mentions in social media, and so on.

We explored color palette and typography ideas through mood boards, which helped focus our design approaches later in the process.

Great Debate wireframeA wireframe for The Great Debate, an important feature of the print magazine. The point/counter-point style required more than the usual paginated article presentation.

Drawing from our research findings, we drew up architectural approaches to structuring content in a manner that would present multiple entry points, encourage exploration and keep readers on the site. We needed to present the daily content without burying the longer, more in-depth articles from the bi-monthly magazine. Aesthetically we wanted to avoid the cluttered appearance of so many publishing sites without making the new nationalinterest.org too austere or Spartan in character.

And we wanted to avoid the multiple columns look, with stacks of blocks, aiming more towards sophistication and balance.

The design process went through a series of intensive iterations, working always towards elegance and a prioritization of white space and organization. Witty client feedback kept us on track throughout the process, as we whittled away unnecessary flourishes, retaining subtle organizing elements. In the end we achieved the goal: an airy, readable layout that would be familiar to current subscribers and give new readers an immediate sense of gravitas, but without the oft-associated stuffiness.

Content area of a topic pageMain topic pages feature highlighted recent articles, and provide links to subtopics. Lower on the page are other kinds of content. Related video is highlighted in the sidebar. The same layout is applied to all topic views.

Featured articles blockAdditional featured content is highlighted at the bottom of individual posts. The related articles block is generated by Apache Solr, the powerful open source search engine.

Premium content noticeA significant percentage of the magazine archives are available only to paid magazine subscribers.

Additionally, the site distinguishes between offering premium which can access all articles (subscriber-only) and general content  (non-subscriber) which accesses four out of five articles.

Our architecture would allow the editors to curate the content by key areas of interest, providing either current content or suddenly-relevant archive content at a moment's notice. For the actual print magazine articles, we designed a digital table of contents, translating the magazine's traditional format into easily referenced issues. This dual prong approach, highlighting the depth and breadth of the magazine, proved to be a winner for the editorial board.

With the ever increasing use of search by users visiting a new site, we knew that search had to play a very important part of the user interface.

TNI footerOur modestly "big footer" approach includes mirrored primary navigation items, social media links, the customary "about us" links and copyright info, and a second search form.

We placed the search form not only in the header, but also in the footer. Search results would be served up by the open source Apache Solr platform, offering faceted results to enable users to "drill down" into results to find what they may be interested in.

TNI Video pageThe video section, integrated with YouTube, presents Editor in Chief Justine Rosenthal's interviews with leading players and observers in the foreign affairs realm, as well as video coverage of notable international and political events.

Implementation

The Research & Analysis, and Architecture & Design, are only the first half of the story.

The MS SQL database of the old Ektron CMSS contained several thousand articles — and authors — which we migrated into Drupal's MySQL.

The site itself is all Drupal, with a la carte use of proven modules, combined with some custom functionality leveraging the Drupal API. On the front end, we developed a Drupal theme based on the 960 grid, with semantic mark-up. And driving through from the content through the business logic and presentation layer is RDFa, with Open Calais adding some oomph to the free tags.

To further improve performance and search capabilities in accessing the trove of materials, we implemented Pressflow in a Mercury/Pantheon configuration leveraging Varnish and Memcached, all hosted on Voxel.

[We are working up a tech-focused case study for those who are interested in our implementation. That will be posted in the near future.]

The National Interest back issuesThe National Interest magazine archives go back to 1991.

The combination of research-based user experience design, aesthetic standards set by the print magazine, technical hurdles presented by the functional goals — and the opportunity to reinvent the online presence of a preeminent foreign policy journal — made this an especially interesting project.

Result

From its first week after its soft (i.e., unannounced) launch, the new nationalinterest.org has seen a marked increase in site visitors and pageviews, setting new high marks for both stats in all of 2010.

i just wanted to thank everyone for all their hard work and for building an absolutely amazing site.

—Justine Rosenthal, Editor-in-Chief, The National Interest

Tell us how we can help you