The New Republic

A publishing system to power beautiful storytelling.

The ask:

Build a new website and CMS for the New Republic, empowering the editorial team to work more quickly.

As the New Republic shifted its focus from print to digital media, it needed a new website and content management system to facilitate the transition.

The redesign’s goals were to increase reader engagement; tastefully present sponsored content; allow for bespoke, art directed stories; and launch a new section dedicated to shorter, newsier web-only content.

A content-first, flexible article template

I led design and frontend development of the article page, site navigation, and homepage, working closely with the editorial team and art director to bring their vision of a magazine-like reading experience to life.

The design was tested and refined in the browser throughout the process, using real content, as I wrote the markup and CSS. Post-launch, I continued to design and develop new features, using analytics data and A/B testing to inform the process.

A powerful publishing system

In order to meet the editorial team’s needs for a streamlined publishing platform, we developed Mariner, a brand-new content management system, concurrently with the redesign. Mariner’s interface was designed in the browser as we built the site. The design process was completely driven by user-testing: As we built it, we tested Mariner with the editorial team, watched them use it, and listened to their feedback in order to best shape it to meet their needs.

I designed Mariner’s content editor and layout tools to match the article template. The system also includes innovative features, such as tag recommendation and autocomplete based on number of uses.

Since I was responsible for the article template, I designed Mariner’s editing interface to closely match the site’s frontend, with visual layout tools for images, pullquotes, and embedded content. Compared to other CMSs, Mariner has a highly streamlined interface, including only the features editors need to create content. Like the rest the frontend of the site, Mariner was built using React for a fast and responsive frontend.

Art-directed stories

With each issue of the magazine, we would create art-directed feature stories. Mariner and the article template were built with flexibility in mind, allowing us to override any aspect of an individual story’s presentation.

I worked closely with the art director and editorial team to bring several stories to life, designing in the browser with HTML, CSS, and Javascript. I also designed and implemented systems to make modifying the article as fast and flexible as possible, from how the frontend’s markup was structured to the tools included in the CMS.

The culture page

Near the end of my time at the New Republic, I designed what was planned as a section front page for the Culture section, with the intention of expanding on its design to build out a new homepage and more section-front pages.

The culture page uses a modular design system with a large ad placement and ability to highlight sponsored stories.

Section-front pages were designed with advertising content sponsorship in mind, with the goal of selling advertising packages across different verticals of the site. After the the New Republic’s sale in early 2016, work on the site paused and I moved on to another opportunity.

Role

Product Designer and Frontend Engineer

Tasks

Visual design, user experience, frontend development

Timeline

June 2015 – April 2016

Up next:

Shake Shack

iOS app, launched winter 2018