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, 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.
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.
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.
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.
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.
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.
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.
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 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.
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