Responsive to mobile and developed with social traffic in mind, the new site, designed by Code and Theory, provides editors with a flexible toolkit for publishing content and holding readers’ scattered attention.

Stories like this nail art how-to--sponsored by partner Sally Hansen, complete with a sidebar advertisement--demonstrate the potential of the system's native advertising capabilities.

The prior version of the side slowed editors and marketers down, due to a complex system that involved hundreds of templates.

In the first iteration, Code and Theory designed a feature-driven prototype.

In the second iteration, Code and Theory placed storytelling native to the "interwebs" front and center.

By the third iteration, "We ended up simplifying it dramatically," says Troy Young, president of digital for Hearst. In the resulting design, feature and digital stories merge in one single stream.

Co.Design

Cosmopolitan.com Gives Itself A Makeover

The GIF-friendly revamp portends a brighter future for Hearst digital

Sexy, and responsive? Now that’s a man—er, website—we can get behind.

Yesterday Hearst unveiled a new look for Cosmopolitan.com, the rising star in its portfolio of digital brands. Responsive to mobile and developed with social traffic in mind, the new site, designed by Code and Theory, provides editors with a flexible toolkit for publishing content and holding readers’ scattered attention. The clean layout presents readers with a continuous stream of headlines and images that cascade beneath a horizontal navigation bar running across the top of each page; the familiar pink of the Cosmopolitan logo, locked at top left, is the only overt nod to the brand.

For Hearst, the site represents "something to build on," says Troy Young, president of digital. He cites as business goals the ability to publish and manage content more efficiently, as well as the ability to better monetize traffic through personalized recommendations that effectively transform the site into an engine for native advertising. "Our goal was to wrap the consumer in content in a way that they really valued," he says. Elle and Esquire are scheduled to adopt the technology underpinning Cosmopolitan.com by the end of the year, with other brands to follow.

Before
After

The new system is a significant leap forward in a famously conservative industry. Professional-looking online magazines are easier than ever to create, thanks to templates on Wordpress and elsewhere, and yet many media executives remain uncomfortable with the rhythms and vocabulary of the "interwebs." Take the recent redesign of Sports Illustrated, which bears the scars of design by committee.

The dangers are real for legacy print publications: In the case of Sports Illustrated, upstarts like BleacherReport have been leaving competitors in the dust. Cosmopolitan, in turn, has been fending off fashion and beauty sites like Refinery29 and PopSugar. Yet amid the emergence of those younger brands, traffic to Cosmopolitan has doubled since editor Amy Odell jumped ship from Buzzfeed to lead the digital imprint last September. In May, the most recent month for which data is available, the site attracted 30 million unique visitors—nearly a third of the 100 million attracted by Hearst brands overall.

"It's fun, fast, and beautiful, but also, easy to navigate and read, and personalized for each of you," Odell wrote in her editor’s note explaining the changes.

With help from Code and Theory, Hearst began to reimagine the site, inside and out, last July, shortly before Odell accepted her job offer.

An example sponsored story

"A redesign isn’t just the aesthetics," says Dan Gardner, cofounder of Code and Theory, which has been on a roll in the magazine world after winning Webby Awards for its reboots of Variety and Nautilus earlier this year, as well as designing sites for GQ, Vogue, and more. He compares the new platform to a "design API": "It’s really a system of tools that can be spun up in different ways."

On the back-end, that means giving editors shortcuts like a Photoshop replacement that scales and crops images after they upload to the site. They can also create galleries with a simple folder drag-and-drop, and rearrange the home page as if it were comprised of cards on a bulletin board.

In a win for Hearst sales and marketing, the same analytics functionality that recommends relevant stories can recommend relevant native advertisements. Young goes so far as to call the new system one for "content marketing," rather than content management, geared toward "delivering the right piece of content to the right audience at the right time." Stories like this nail art how-to—sponsored by partner Sally Hansen, complete with a sidebar advertisement—demonstrate that potential in action.

As for the front-end, Cosmopolitan is more welcoming than ever to its 69% of visitors on mobile devices, with oversize, thumb-friendly sharing buttons and a continuous scroll of content. In a modern twist on "vintage" Internet icons like the Reddit alien, which famously "evolved" from amoeba to intelligent life form and won a cult following in the process, the home page displays a banner image that editors will update daily, with an eye toward winning a similarly loyal audience. Yesterday, they featured a cat GIF. "It’s a mix between digital art and a digital magazine cover of sorts," Young says.

The site is still a work in progress. "Building in this way gives you endless opportunities to learn," says Mike Treff, managing partner at Code and Theory. "Just by learning from the data and really being attentive to the audience, you can reprogram to deliver on that."

Already, Young says, lessons from the relaunch process are informing his team’s strategy. "I think at first we were trying to balance two worlds in a way that wasn’t creating a product for a millennial woman manically reading our content on a mobile phone," he says. "We were trying to balance the curatorial feature-driven magazine idea with the frenetic idea of the Internet, and we wanted to bridge those two concepts in a single interface. We ended up simplifying it dramatically."

So far, that looks to have been the right decision. After all, it doesn’t get much simpler than shirtless male models and puppies.

Add New Comment

1 Comments