Case Study

Rolling Stone

View Website

You know Rolling Stone. It's the definitive voice in music, politics and culture. It's a global icon.

Intro

Rolling Stone has been the definitive voice of pop culture for five decades. Their distinctive voice cuts through the noise, sets trends, and delivers withs access and authority.

In December of 2017 Penske Media Corporation acquired a majority stake in Rolling Stone. Immediately after the acquisition plans were put in place to completely redesign the magazine and website. I was put in charge of creating the new website design. I met with Gus Wenner and the editorial team to discuss what they would like to achieve with the redesign. It quickly became apparent that the team needed a better way to highlight their evergreen content and provide users with exactly what they are looking for in an easy to use manner.

Services

Web Design, Art Direction, UI & UX

Clients

Penske Media Corporation

Color

The color palette for the new Rolling Stone website was inspired by the bold red logo. The red in the logo is cornerstone of Rolling Stones identity and I wanted to bring that in as the main accent color throughout the website. To offset the red I pulled a taupe color from the redesigned print magazine. All of the colors on the site are earth tones and aim to harmonize with each other.

Red

#D8232A

Black

#000000

Taupe

#F0ECE7

Graphik
Publico

Typography

For the typography of the site I mixed the sans-serif font Graphik with the serif font Publico. I wanted to give the site a more modern feel then previous iterations of the print magazine with the goal of bringing in a younger demographic. Graphik’s clean lines help to achieve that affect while maintaining legibility on smaller devices. To bring some of the classic feel of the Rolling Stone brand Publico was used. Publico’s serif letterforms harken back to the old days of Rolling Stone and help to echo that vibe.

The Designs

Homepage

Using a combination of editor feedback and analytics, I chose to section of the homepage into buckets of their most trafficked content and evergreen content. In this manner users of the site can easily scroll to the content they are interested in seeing or hide sections which have no appeal to them. Rolling Stone is widely known for their coverage of music, film and tv reviews. I wanted to bring in these elements into the homepage to better highlight this content.

Article Page

The article page is where most users funnel into the site. With the hope of driving user engagement the page includes a few key areas to entice the user to read another story after they are finished with the article they are on. The navigation of the site shrinks down to be a persistent navigation and displays a related story. Related stories are also added as a floating module near the end of the article.

Section Front

A section front page is where the user lands to browse all content related to one of the available subject in the main navigation. At the top of the page the top 3 stories of that topic are displayed as featured posts with the rest of the page following a news river format.

Video Landing Page

The video landing page is the destination for exploring all of the video content that Rolling Stone produces. At the top of the page the editor’s choose one video to feature. Right below that a user can scroll through a list of the most recently created videos. As you progress further down, the page is sectioned off into buckets of curated content specific to the themes of the video content.

Mobile Designs