Serial Season Three

Serial is a podcast from the creators of This American Life. I was fortunate enough to be interning at Studio Rodrigo when Serial is launching Season 3 and I got involved with revamping the website and bringing it online. Season Three had a whole new story and animation concept, we helped the Serial team update their website to support the three seasons and its content.

View Live Site →
Client

Serial Podcast

Studio + Role

Studio Rodrigo, Designer

Skills

Product
Responsive Web

SEASON LANDING PAGE

With the beautiful building and artwork animations of Season 3, We designed the landing page with a focus on showing the animation, allowing the video to play before the episode details fades in with a dark overlay. To contrast the animation and create a mood, a dark section is designed to show the details of the current episode with the call to actions locked up on the side and the episode details prominent, keeping the same essence of previous episodes. We decided the overall information about Season 3 should be put at the end of the page due to repetitiveness for revisiting users, this can then link to the respective music and art pages.

EPISODE PAGE

For the individual Episode page, we wanted the user to solely watch the animation with no text overlay. The additional information of the episode and call to actions is layed out in similar design to the season page. However, we differentiate the episode page from the season page with the white background versus the darker interface. As you scroll down, you’re able to see the extra media and the next episode button.

Other Pages

We redesigned the other pages to fit the new design, content and site architecture so that About Serial has its own page seperate from the Season About pages. The pages follows a similar pattern with text over a darkened image background on top of the page. The art page is designed so that the user has a full experience of watching a whole archive of the episode animations with additional information.

Menu

We wanted to design a menu that wasn’t just a modal. After exploring various menu directions, we landed on a full width menu that allows you to hover through each season and reveal the relevant pages over a key art. The mobile menu follows a similar concept with seperate pages and a back button.

Process & Initial Ideas

One of the explorations we did for Serial Season 3 was a card concept, where you were able to swipe through the episodes cards in the Season Page with a custom play button over them. After the animation plays, the card would float up into the fold for episode details. Another exploration was for the episode cards to be a full width strip giving a dramatic feel as you scroll down the Season page.

Team
Creative Direction — Khoi Uong
UX Designer — Or Leviteh
Designer — Ben Averill
Designer — Juliette Wang
Share