A former 2016
nymag.com experimental pop-up blog with editor picked shopping recommendations,
The Strategist quickly grew into a juggernaut affiliate revenue generating destination after this redesign. The visual identity, editorial and product strategy all required rethinking, with an expansion far beyond its original editorial mission. This project was my main focus for 2019-2020 and it was awarded the gold medal for best homepage redesign at the 2020 Society of Publication Designers Awards, and the silver medal for best web typography.
My Role: editorial design director & Lead product designer
the Team: Chief Creative officer, Ian Adelman / senior UX designer, Danielle Eastberg / product designer, Joey Pfeifer / Product Manager, Alison Morgenstern / engineers, reuben Son, Kyle Walsh, Keren Lerner
THE STRATEGIST: navigation
Navigation: As well as exposing the shopping categories within the header on desktop, in the drop down menu we opted for a fully expanded vertical scroll to emphasize the sheer volume of product sub-categories, but also to optimize for mobile. The Easter Egg is activated on desktop when the navigation drop down is opened and is an expression of New York Magazine's obsessive approach to journalism, and its tag line, “serious fun”.
The Redesign Process: We ordinarily work through visual identity ideas in the desktop context, but the functional and logical design of the home screen is done for mobile first. Aside from mobile being so important for the majority of readers, it forces prioritization and content architecture decisions. It is easier to translate a developed visual identity from desktop to mobile, and to expand a content architecture from mobile to desktop.
THE STRATEGIST: the Product Component System
We created a system with more variation in the way products could be displayed and categorized. Previously articles felt monotonous and repetitive to scroll through, had no hierarchy, and did not make efficient use of space. They needed to be more scannable, allow for more visual texture, and visual hooks that might draw a reader in.
We introduced variable image aspect ratios for products to minimize or maximize the image footprint, depending on importance, as well as an abbreviated product tile, and a product grid. The tile and grid were intended for brief mentions and summaries, round ups of products that an editor might want to include, but not elaborate on, instead utilized as a sidebar, or as the foundation for a hub or collection page...
Product Ode Article:
A Single Product
Product List Article:
10-25 products, grouped by category
Product tile List Article:
10-50 products, Sale round-up or summary
The building blocks for a new article template system: After the competitive analysis, data sprint and user research phase, the next step was a site wide content audit. We sorted stories by rubric, length, format, and considered how they differed, and where there was overlap. All of these findings eventually synthesized into a 5 story template system which addressed most of the problems and opportunities we had identified. Some features included more variation in how products were displayed, or grouped, subsections for better categorization, an article product counter, navigation within the article for long articles, multiple merchant buy buttons, sale signaling, and editorial badging. We A/B tested multiple merchant buy buttons, button color, language, and sale signaling for the highest CTR.
Ranked Product List Feature: 25-100 products,
ranked
Product Grid Collection Feature: 100+ products with both product and story links
The New identity applied to the Product Component System included the following features: 1. Flexible image aspect ratios for cropping that best suits the individual product, and optimizes per viewport, for maximum impact, and live link area. 2. Multiple merchant buy buttons with a more clickable interaction. 3. Information organized with better type hierarchy for easier scanning and browsing: product name, price, sale savings, review data, sale code, merchant etc, all within a lock up, easier to read format. 4. Introduction of a product tile and product grid component, for side bars, round ups, brief mentions, and as a foundation for a new themed collection page design.
The A/B test of the new product system saw a less than 1% decrease in CTR from returning users, (new users stayed the same) so we decided to revise design and try to move the needle further with the changes. Some of our more drastic changes were scaled back to evolve more slowly over time, to reduce any impact on revenue.