THE MULTI-BRAND PLATFORM & DESIGN SYSTEM SERVING 514M GLOBAL VISITORS ACROSS 80+ WEBSITES
PROBLEM
Our Editors were getting frustrated with their sites. The homepage and feed layouts were rigid templates: a header area followed by a reverse‑chronological stream of articles. Our magazines often looked more like blogs rather than respected legacy brands.
To give editors greater flexibility and reinforce each brand’s identity, we developed Custom Feeds—a modular system of logic and building blocks that enabled grouping, styling, customization, and curation within a graphical editor.
As a product designer I shaped the foundation of this system by proposing and designing the blocks and layout options, and pushing the limits of the DOM using bleeding edge CSS and HTML spec. Design responsibilities included setting and approving the art direction, developing the styling, and committing the underlying SCSS directly to the codebase.
The Custom Feeds project not only modernized our platform but the common patterns also laid the groundwork for our evolving design system.
ROLE & RESPONSIBILITY
BACKGROUND
Custom Feeds offers a level of styling and customization previously unavailable to our magazines. While most traffic comes in through article pages, editorial and advertisers really value the on brand homepages, feeds, and typography.
These feeds are assembled on the fly using a combination of five different blocks — a Single Story or Video, a 4 Across Block of Articles, A Big Story with related articles, and a 3- column layout

These building blocks are available platform wide to every brand. In order to scale across an unknown number of sites the underlying layout and structure can't be changed but can be heavily customized on the presentation layer. Working with pretty intense SCSS along with feedback from print art directors and the digital asset designers we found really creative ways of differentiating each site. Drifting from a unified layout and codebase would make building new features impossible.














