Hearst Magazines


A responsive framework to support better digital storytelling & marketing that will scale to all Hearst Magazines digital properties globally.


/ Project Goals

  • Create a responsive solution scalable enough to live across all Hearst Magazine properties

  • Allow trending, evergreen & latest posts to all be accessible to the user

  • Give the editorial team the tool set they need to efficiently communicate to their readers

  • Maximize social sharing & audience engagement

  • Create pathing mechanisms to allow the user to keep moving throughout the site

/ Role

  • Contributed to conceptual thinking in both visual & interaction design

  • Established & executed interactions & designs of page templates across breakpoints

  • Conceptualized & produced animations of interactions & templates to communicate the vision for transitions, movement & site functionality

/ Team

Mike Treff, Chris Hall, Matthew Chmiel, Stephane Elbaz, Chenta Yu, Dina Murphy, Yuna Kim, Andrew Bergal, Christopher Ewen



The feed layout was designed as a templatized system to be applied across all Hearst properties.


The landing pages are structured as smart streams of content that improve the standard reverse chronological feed by combining editorial curation with recommendations based on live analytics.


Micro-sharing is represented on each piece of content in the feed to increase user engagement. This data is then captured to help serve users popular content.


Content sponsorship opportunities are represented throughout to increase ad sales / viewibilty.


Evolution of the homepage.


The listicle page scroll interaction focuses the user in immersive full bleed imagery while still leaving the ability to easily jump or scroll through content.


The fluid design system lends itself to reflow panel interactions, which allow users to path through to latest content from any detail page or leave comments from any scroll depth.


More work…