In 2018 I led an article redesign, conceiving of both a new system of page templates, and an expansion of a component based system which could provide a shared set of building blocks for 5 unique brands. This was a giant undertaking, so we tackled it by breaking it down into several phases. 1) page header and navigation 2) lede area 3) recirculation and a display ad interruption framework 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 in the words of former New York editor in chief Adam Moss, "achieved a sophisticated aesthetic that finally matches the quality of editorial, with the polish of a premium product worth paying for".
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
articles: PAGE TEMPLATE SYSTEM
We came up with a new system that gave the reader a better indication of what they were about to get, landing on any given story, ranking stories via a lede design that created a visual hierarchy that helped signal the length, importance, and kind of story. We reconsidered the ad interruptions and how to make a cleaner experience above the fold by making tradeoffs further down the page with more frequent ads there. We allowed desktop to maintain an uninterrupted story body by placing display advertising in a second column to the right of the body copy.
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 have original or commissioned visuals (as opposed to stock or supplied imagery). There is 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 imagery, 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 over 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: 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 layout and interaction tailored to its content, and is a unique standalone page template. Some content types are so different that they require an entirely different format/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 large volume of images, for content that is more "mass" than special. It was developed for articles that are primarily imagery based with no text beyond a basic introduction, for the following kind of stories: street style, red carpet, runway shows, and weddings.
