A former nymag.com pop-up blog experiment with editorially voiced shopping recommendations that launched in 2016, The Strategist quickly grew into a major e-commerce affiliate revenue generating publication. Both the visual identity, and capabilities needed a rethink to improve the overall site experience, as it had evolved far beyond its original editorial mission. This project was my main focus for 2019-2020. It won 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: Home Screen

Objectives: 1. A hub for habitual return visits that also showcases the tone and breadth of the site to new users. 2. A showpiece for overall branding revamp, accurately reflecting the editorial voice that separates us from our competitors. 3. An extendable, modular design that must work for the Strategist UK homepage, which has less content. 4. increased opportunities for direct product click through. 5. increase engagement on header category links and site search.

Redesigned Home Page features: 1. The legal disclaimer also serves as a new tagline, reflecting the editorial tone of the brand. 2. Rubrics that run above headlines reflect the expert-obsessive personality of the content. 3. Sale labels serve as functional elements as well as visual expression. 4. Consistent placement for story types that surface personalities, not just products (columnists, celebrity shoppers, authors etc). 5. Permanent quick links exist for high traffic or evergreen content. 6. Products (as opposed to stories) always appear in circles with buy buttons visible, to distinguish them apart. 7. Product CTR has increased +450% 8. Newsletter sign-ups have increased 34%.

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: Identity Design

The new logo and social assets: The logo is based on Cooper, a New York Magazine legacy font, which has been in use since 1968. This direction was selected because it does not skew too masculine, or feminine. It has the right mix of wit, personality, and nostalgia. User interviews revealed that readers really trusted the expert-obsessive editorial voice of The Strategist’s product recommendations. It was very important to reflect that voice in the site experience.

THE STRATEGIST: Editorial Visuals

The wide use of black and white hand drawn field guide illustration across the site is a reference to the earliest issues of the magazine, and early printed mail order catalogs. The type writer font used across the site is also a direct reference to the first catalog produced by Habitat in the 1960s, a UK based pioneer of catalog home decor shopping.

THE STRATEGIST: Product Research & Discovery

Users told us...

1. Found joy in browsing
2. Had the ability to skim, but could pick out things important to them like price of product or merchant.
3. Had deep trust in Strat writers
4. Looked for recency of an article
5. Had the ability to see related products or stories easily
6. Had the ability to pick from multiple merchants, esp Prime

Data told us...

1. Site Search is Sticky — trigger for engagement and CTR
2. Newsletter as most efficient source for PVs, Clicks, Loyalty
3. Displaying breadth of site capabilities at user entry point (Article), as loyalty lies outside of articles.
4. Mobile and AMP traffic is increasing; CTR is lower on mobile/AMP vs Web

Editors told us...

1. Give prominence to columnists and recurring rubrics
2. Seeking way to categorize lists of products
3. Need better ways to deal with lengthy articles
4. Interested in gridlike templates of products for the Strat 100; “Strategist collections” built around a theme.

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.

Product Component Badging: This was finally introduced as a feature at end of 2020, as a way to signal that a product is on sale, but also to promote, categorize and organize products in other ways besides the standard sections (home, beauty etc). Part of the objective behind building a database that allows products to exist independently from articles was the ability to categorize them in different contexts, for other purposes. For example site search, allowing users to search not just by story but also by product. Badges also exist at the article level (seen on article below) as a way to categorize an entire article (instead of repeating the same badge on every product).

THE STRATEGIST: Article Redesign

The Product Ode is an article featuring only one product. The lede image can take a buy button directly, so that the reader can click through without having to scroll to the end of the article. Another new feature was the expansion of the article details component, which allows contextual information to be added to any article. This capability exists across all New York sites, but we identified several opportunities that were unique to e-commerce content. That included an article product counter to signal length of article, and the amount of products on sale, and more consistent use of the author bio variation to surface the editors and writers, to reinforce reader trust in the recommendations, and the editorial voice.

The Categorized Product List article is the template used for the majority of stories. One feature that came out of user research was editors wanting easier ways to categorize products within an article. The new outdented subsections helped to achieve this. Also, integrated into this idea was an internal page navigation/table of contents with anchor links to categories, chapters, or article highlights

The Ranked Product List Feature: This ambitious and exhaustive list which uses outdented subsections as well as nested sub headers for better hierarchy, and a product counter is intended for stories with a large volume of products, often in the form as a survey or guide to one product

The Product Collection Feature: Strategist 100 is an evergreen round up of the top 100 Strategist recommended products. The product grid component was developed out of the desire to invent a new way to present the exhaustive surveys and guides New York Magazine is known for. It can be used in two ways: One, as the foundation for a collection, or hub page, which allows the user to link directly to the product's merchant, or, alternately, to the Strategist story that originally featured the product. The second variation is for use as a sidebar or brief mention seen within a standard article.