In fall 2018, I redesigned the home screen and other features on nymag.com. The redesign objectives were 1) to establish New York as the legacy parent site of a family of 5 unique sub verticals, via an improved brand architecture and a global navigation system, and 2) establish a digital subscription business by implementing a paywall via metered page views. New sections on the site were also launched, such as the Thousand Best Restaurant & Bar list, and The Urbanist.

Role: editorial design director & Lead product designer
Team: Chief Creative officer, Ian Adelman | Product Manager, Hillary McDaniels | Engineers, Zoe Chodosh, Skye fradd, Victoria Thevenot, Keren Lerner, Maria Mera

nymag.com: Home screen design

The challenges with this page were how to represent five different publications with individual identities under one parent brand, and how to accommodate the breadth and scope of content from all publications on one page, (especially a challenge on mobile). For the first problem, I decided to abandon most of the unique identities, and rather create two archetypes, one, for more of a breaking news driven site (Vulture and Intelligencer), the other, for a browsing and image driven experience (The Cut, The Strategist). The latter had a different type system with a more elegant and ornamental headline font. The newsy sites use a much heavier slab serif font. The only individual brand expression retained is the color system applied minimally and revealed with interactions like hover states that add a color underline to a headline.
‍
On mobile and tablet, in order to avoid an endless page depth/scroll, but achieving the surfacing of maximum content per vertical, meant minimal promotion per story. Rubrics and headlines only, no teasers, bylines or images on the bulk of story promotions. Letting the typography alone do the work.

nymag.com: latest news feed

The multi layer/site reverse chronology latest news feed did not previously get a lot of engagement, but we decided to retain it because it is very popular with power users, and provides an important signal upon landing on the home page, that this is a family of sites with their own unique areas of coverage within the network. This shows iterations of the news feed with vertical or horizontal tabs, syndication call out icons, rubrics, teasers, time stamps, sponsored posts, all to create optimized scan-ability.

nymag.com: MOBILE HOME SCREEN LEDE

The mobile lede warranted a further more exhaustive exploration as it was important to get the hierarchy right, and given the volume of content, the mobile scroll depth of the page needed to not overwhelm the user. We ended up focusing our efforts on a headline driven design, creating a flexible lede with a variable font size based on character count, so shorter headlines' font size would scale up and still have the same impact as longer ones. No images or teasers are used on the two secondary stories.

nymag.com: flexible home page LEDE for SPECIAL issues

Vertical Package Lede: One of the things that sets New York's content apart is a long history of excellent original photography and artist commissions. We strive to honor the artists intentions and elevate the work itself by allowing for flexible image aspect ratios in the context of both story discovery (homepages) and within the story experience (articles). This vertical image variation lends itself perfectly to a magazine cover image format, and a bundle of stories. We build flexibility into our products to accommodate photo-first narratives. But we choose selectively what to promote, to allow the best to rise to the surface, not all stories have artwork worthy of promotion.

Horizontal Package Lede: This is an alternate home page lede layout with less emphasis on the image, intended more for breaking news situations, with space for multiple headlines.

Vertical Package + Secondary Sponsored Package: There is a secondary package that can sit below the home page lede which promotes all stories equally and can also be sponsored. It has carousel or list based display options.

nymag.com: sitemap and navigation

Network Navigation Audit: The ecosystem of sites and pages had expanded and evolved over time, and there was a lack of cohesion to the navigation, with many different styles of header and navigation across different brands, so we came up with more universal navigation for all pages and sites. This audit gave us a clearer overview of how to reduce the number of header and nav variations.

Home Page Header: A major objective of the redesign, (while also driving digital subscriptions via metered paywall) was to rework the brand architecture in order to elevate the original legacy New York brand over the newer digital only publications. While creating several niche verticals independent of the print based parent title had been a successful strategy as a print to digital transition in the mid 00s, and a successful advertising based revenue model, they had over time become more and more disassociated. Users did not know that sites such as Vulture and The Cut were part of the New York family of brands. The high visibility of New York and the audience's love of the brand, made preserving its origins worthwhile.

A Global Navigation: We had to create a way to login in on all pages across the network, and also promote and allow users to subscribe directly from the homepage. So we added a global navigation that also firmly re-established New York as the parent brand, over a network of verticals, across all viewports and pages. This navigation includes the New York Logo. The site links are not exposed on mobile and tablet, instead they sit inside a drop down menu.

nymag.com: other new site features

New Section Page Header, 404 Page, Restaurant & Bars Section Front: We designed a larger section page header and logo relationship to re-establish New York as the parent brand. We used a vintage illustration for the 404 page found in the print archives from the 1970s.

We built a new subscription product in 2018 called Choreographer, which consists of a paywall reached via metered page views to funnel readers towards a subscription. Since 2018 we have built in more flexibility, allowing the consumer revenue team to test different messaging and imagery without needing development support. The new design allows for adjustments to border colors, accent background colors, button colors, messaging across all elements, and image assets via an UI much like that of any CMS.