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.
Studio + Role
Studio Rodrigo, Designer
The Task at Hand
The previous Serial Podcast website had a combined page for about, music and media for the two seperate seasons. With season 3 releasing, the site architecture did not make sense because there is so much information needed to be displayed for each season. We decided to have a seperate landing for each season and individual pages for about, music and art – all of this would exist within the sub-navigation. On top of that, for Season 3, there are animations accompanying each episode. The design will need to be updated to create an experience different from previous seasons. As we’re figuring out the site architecture and producing comps, we realize that it can get confusing between the season page and the episode page. Therefore, we made sure that the season page and episode page are clearly distinguished through layout as well as color.
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 introduced 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.
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. We differentiated the episode page from the season page with the white background versus the darker interface. And as you scroll down, you are able to see the extra media and the next and previous episode button.
UX Solution Since there are now 3 seasons for Serial Podcast, 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’s About Pages’. The other pages follow 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 on the art.
UX Challenge The original hamburger menu lead to a modal in the center of the page which meant the user will have to move from the corner of the page to the middle just to navigate. The unique hover over season image is not fully appreciated as a unique separation. The mobile menu was a problem where it created a long scroll just to get to each page.
UX Solution 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 is designed with separate pages and a back button to navigate through the seasons.
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.