Two Hearst brand sites side by side. Popular Mechanics runs a Tool Awards 2025 feature led by a circular saw cutting into wood. Digital Spy runs an Arrival cover story on bright teal, with a Must Read row of story thumbnails beneath it.

Hearst Magazines: Custom Feeds Redesign

Design Lead · Hearst Magazines 2018 2018–2025 9 min read

A modular building-block system and drag-and-drop editor that let editorial teams design curated layouts without engineering

Three Hearst homepages side by side in browser windows, all rebuilt on Custom Feeds: Men's Health leading with a collaged tennis feature over a celebrity fitness block, Cosmopolitan on black running a the latest feed and a care for a cover story? grid, and Esquire running Best of the Decade under green-underlined headings.
Men's Health, Cosmopolitan and Esquire on Custom Feeds. Every feed on all three pages is the same handful of block layouts; the type, the rules, the colour and the amount of air around them are the brand's.

Problem

What Hearst’s magazines were missing wasn’t a homepage redesign, it was a system: a layer that could take editorial judgment and turn it into a page, brand by brand, without an engineer in the loop every time. Without it, every magazine ran the same rigid pattern: a header, then a reverse-chronological stream. The brands looked like blogs, editors had no way to curate or differentiate their front pages, and any layout change required engineering intervention.

Approach

Custom Feeds was the answer: instead of hardcoding a homepage, editors composed one from a fixed vocabulary of building blocks, each configurable and stylable without touching code. A Big Story block on Cosmopolitan and the same Big Story block on Esquire were the same underlying definition, rendered through each brand’s own theme; the block was the constant, the theme was what changed. Editors worked entirely through a drag-and-drop editor: a tool built for people who write for a living, not people who code.

Team

Theresa Mershon (Creative Director)
Artem Artemov (Product Design UI/UX Lead)
Ryan Ilano (Custom Feeds Design Lead from H2 2019)
Namie Genkin (Senior Product Designer)
Tracey O’Connor (Senior Product Designer)
Amy Ham Liu (Associate Product Designer)
Daisy Sun (Senior Product Designer)

Responsibilities

  • Styling and front-end development: SCSS/CSS committed to the codebase
  • Design systems and product design
  • Art direction and visual approval
  • Visual QA on device, across all layouts and all devices

Achievement

As Design Lead from H2 2019, drove an accelerated launch process that brought roughly half of Hearst’s digital brands onto Custom Feeds. The push was finished before Thanksgiving 2019.

Harper's Bazaar homepage built with Custom Feeds, showing a large hero story block above the site navigation.
A Custom Feeds homepage combining several building-block layouts side by side: a hero story, a Big Story block, a 4-Across grid, and mixed feed blocks, each with real editorial content.
A diagram of the stylesheet cascade. custom.scss, holding Header, Titles, Deks, Date and Byline, feeds four numbered block layouts: big-story.scss, big-story-feed.scss, 3-column.scss and 4-across.scss. Those feed a single output file. Beside it, big-story.scss is broken out to show that shared styles are inherited first from custom.scss, then from top-level styles for the block type, then by specific style options, with optional per-element placeholders. Its named variants are listed: no-image, text-under, video, image-left, image-right.
Made to explain the cascade to designers, and it reads best backwards. Left to right it is inheritance: custom.scss holds the elements every block shares, a block layout adds what its shape needs, a style option narrows it again. Right to left it answers the only question a designer actually asks, which is why does this look like this. Start at the variant in front of you, big-story-image-left, and walk back until you hit the file that decided it. The placeholders are the escape hatch: the point where a brand can override one element without forking the block.

Building blocks

We designed a system of building blocks that could be used to create a wide variety of layouts and styles. These blocks included: Big Story, Big Story with Feed, 4-Across, and 3-Column. Each block had multiple styling options that could be applied to create unique looks for each magazine. The building blocks were designed to be flexible and adaptable, allowing editors to create custom layouts that fit their content and brand.

The building blocks were optimized for performance and accessibility, ensuring that they would work well on all devices and screen sizes. They also had a consistent design language that reflected the overall aesthetic of the magazines, while still allowing for customization and creativity.

Advertisements could be integrated into the custom feeds, each block had layouts that would accomodate standard ad placements programatically. This allowed for a more engaging and less intrusive advertising experience for users, allowing advertisers to reach their target audience while still providing a seamless and enjoyable user experience.

Custom Feed Editor

The editors could create and manage their custom feeds through a graphical editor that allowed them to select and style the building blocks, curate content, and preview their layouts in real-time. The editor was designed to be intuitive and user-friendly, allowing editors to quickly create and publish their custom feeds without needing technical expertise.

The 4-Across block on Women's Health. A white serif headline on a wide orange band, This 30-Day Fitness Challenge Will Sculpt Your Entire Bod, sits above four cards shot against hot pink pegboard: a woman in a red crop set tagged with a lightning-bolt 70 LBS badge, a woman bending over pink dumbbells, a gym mirror selfie, and a woman dropping into a low lunge.
The same block on Cosmopolitan. A lowercase headline, our most popular op-eds, sits over a blue squiggle rule above four cards: a collage of women politicians, an illustration of the Weinstein verdict, a photographer shooting New York Fashion Week, and a portrait of a survivor. Each byline is marked with its own small squiggle.
The same block on Town & Country. A navy serif heading, BEAUTY, flanked by triple rules, sits above four product cards in thin navy frames: a Hermès lipstick, two hand creams, the magazine's 2020 Luxury Beauty Awards badge, and two serums.
The same block on Esquire. A heavy black heading, The Endorsement, underlined in bright green above the line Heavily researched. Thoroughly vetted., sits over four product cards on white: a filtering water bottle, a black Caraa bag, a BioLite headlamp on a dark board, and a rail of Uniqlo down jackets.

The 4-Across Block, Brand by Brand

One block definition, four renderings. 4-Across is four stories in a row; the theme decides the type, the rules, the colour and the card treatment, and none of it is a fork of the block.

What this became

The token cascade this system themes against is not Custom Feeds’ own. It belongs to the mediaOS platform, which had already established the three tiers a block layout inherits from, and Custom Feeds is what happens when an editor is handed control of the layer above them.

The block library and that cascade did not stay on the homepage. The same architecture is what the Apple News integration mapped into Apple News Format, which is why onboarding a magazine there was a token configuration exercise rather than a rebuild. That page pairs each screenshot with the same story on the brand’s own site, so you can open one article on both surfaces and see the cascade doing its job in two places at once.

It is also what the accessibility program later audited against. A shared component library is the thing that makes an accessibility pass tractable at 85 sites: fix the block, not the 85 pages.

Scope of ownership

Art direction, visual design, and production SCSS/CSS committed directly to the codebase: design and front-end, no handoff. Owned design systems, art direction and visual approval, and on-device QA; as Design Lead, led a team of four designers through theming, front-end, QA, and brand launches.

A full Digital Spy homepage built on Custom Feeds, showing a hero block, must-read grid, two-column feed blocks, a full-bleed movie banner, and multi-column sections.
A full Men's Health homepage built on Custom Feeds, combining a lead story, article grids, a full-bleed banner, and mixed-size feed blocks.
A moody, full-bleed photograph of a ship's bow at sea, used as a hero image within a Popular Mechanics Custom Feeds story block.
The same Harper's Bazaar Custom Feeds homepage shown on a desktop browser and a mobile phone, demonstrating the layout's responsive behavior.
Wireframe reference sheet of the Custom Feeds building blocks: Big Story, 3-Column, 4-Across, Big Story with Feed, and multi-column layouts, shown with placeholder content.
The MediaOS Custom Feed editor interface, showing the building-block palette on the left and an in-progress feed layout with editable headings, images, and columns on the right.
All work