In 2018 I led an article template redesign, conceiving of both a new page template, and component based system which could provide a shared infrastructure for several uniquely branded verticals. This was a giant undertaking, so we tackled it by breaking it into several stages. 1) header and navigation 2) lede area 3) recirculation and ad frequency including the desktop right rail 4) lower article 5) article body, including image system, and all in-story components. Overall, this redesign has achieved a less disruptive reader experience, a more intuitive producer experience, increased ad impressions, and a sophisticated aesthetic that finally matches the quality of editorial, that has the finish of a premium subscription product.

My Role: senior art director & Lead product designer
The Team: Chief Creative officer, Ian Adelman | product designer, Jeni Zhen | Product Manager, Jenny Barrett | engineers, zoe Chodosh, Byron Hulcher

Prior to this redesign, article templates were designed primarily for desktop, pre dating the shift to a more responsive design. Article designs were pretty basic, not a cohesive system with any hierarchy. So we created a more holistic content strategy, evolving site specific story telling components. Firstly we conducted a content audit across all our sites. We looked at all types of story formats across verticals to find universal similarities and differences. We also audited our competitors to see what features were being utilized the most, and then improved and expanded upon those.

articles: PAGE TEMPLATE SYSTEM

We came up with a new system that gave the reader a better sense of what they were going to get, arriving on any given story, ranking stories via a lede design that created a visual hierarchy that helped signal the size and importance, and type of story. We reconsidered the ad interruption framework and how to make a cleaner experience above the fold by making tradeoffs further down the page with more frequent ad interruptions. We allowed desktop to maintain an uninterrupted story by placing display advertising in a second column to the right of the story body.

articles: lede system

Several variables create a very flexible lede, that feels more considered, and custom than a standardized template system on a CMS. It includes a variety of lede image orientations, from an inset to a fully responsive lede, and several contextualizing and packaging devices.

articles: feature (SerIAL/PACKAGE) lede

The “serial feature” template is for feature worthy stories that could be part of a package or a series, or regular column, and are visually driven. They have a packaging device for contextualizing the article, via an author bio, a series explainer, a tv recap info box, or an article ecommerce product count.

articles: special feature template

The “special feature” template is for the most important stories, with the highest quality lede artwork, worthy of the upper most position on the page.

articles: display type system

The differentiators between stories on different sites were very focused, in order to build a centralized system that was easy to maintain, and scale. This meant most of the differences lived in typography and accent color alone, built upon the foundation of universal styles across all sites. Typography for all unique components: sidebar, pull quote, subhead, headline, teaser, rubric, timestamp, byline, social handle etc, across viewports, and all verticals.

articles: Body type system

The typeface Miller is the most universal element across all sites, and it forms the foundation of the type system, which has also been true for the print magazine, for almost two decades. Body text, captions, credits, annotations, links and hover styles all utilize Miller text, and Miller display is used for article display type on four sites

articles: image system

The story body consists of several embedded visual components, the most important of which is the image, and image collection component. Several more flexible features were added, such as new sizes, thumbnails and breakout images, sizes adding a border for an image with a white background, the ability to choose whether to stack image collections, and image zoom, the ability for a reader to enlarge an image to full screen on one click and exit that state via scrolling further, and new video formats for signaling related, sponsored or original content.

articles: ARTICLE contents & anchor links

More recent features added are tools for better “list” like articles that tend to be very long, sequential, or section based. We created two Article Contents variations, one is a list format with 6 links, the other is an unlimited number of links which run horizontally in a continuous line, which is space efficient for mobile.

articles: ordered and UNORDERED subheader

The counterpart to the article contents are two new variations on the subheader component, one numbered for ordered or ranked lists, the other with arrows, for unordered lists. This type of feature is very helpful for the reader to be able to scan a very long article more easily, for example a ranking of 100 pens.

articles: SECTIONS/chapters

Another counterpart to the article contents is the subsection (or chapter) component which provides a very strong visual breaker within a story, allowing more texture, and contextual information to be added.

articles: image gallery template

The Image Gallery template is a unique article format which has its own design tailored to its content, and is not part of the main article page/component system. Some content types are different enough, and their greater purpose serves an entirely different format, which requires a unique solution. (Original video based articles also fall into this category). This story type functions primarily as a way to deliver a high number of ad impressions within a high number of images, for content that is more mass than special. This is used for articles that are primarily image based with no text beyond a basic introduction, for the following kind of stories: street style, red carpet, runway shows, and weddings.