KCRW.com Home, Section and Category Page Redesign

UI/UX Design • Production • HTML/SCSS 2018-2019

KCRW.com homepage redesign





Redesigning KCRW.com's home and section landing pages

As part of the organization's effort to simplify its web experience and funnel its users to its latest digital content, we had to redesign the homepage from the ground up, as well as create new landing pages for its primary sections (Music, News, and Culture).

My Role

My role in this project was as both lead designer and front end developer. I was responsible for gathering research, developing ideas, sketching/designing mockups, producing front end markup, and working with developers to see through implementation.

A template with interchangable parts

The design for this template would be utilized across 4 pages: the Home, Music, News, and Culture section pages, with the last three representing the main facets of the organization. These pages would share the same template but filter their content depending on the section and time of day. The homepage would have additional section below the fold, and we would also need a separate category template for deeper discovery of content.

The Approach

With this design, we wanted to fit more content above-the-fold since users would be primarily coming to these pages to discover and browse casually. The more stories in view, the more likely something would catch their attention. This template would employ three levels of hierarchy to allow editors to assign appropriate emphasis, while still providing ample space for other stories to sit high up the page.

After we determined the overall structure of the site I began putting pen to paper which allowed me to quickly sketch possible layout configurations for the templates. Through discussion with stakeholders we had several critera:

  • Fit more, and better represent content above the fold (through heat maps we could see that scroll and clicks dropped significantly as users moved down the page).
  • We wanted to create more of a news site aesthetic to aid in presenting the credibility of the content.
  • Editors wanted to be able to give prominence to certain stories, rather than of having three equal weight cards side-by-side as was employed on the existing design. Having a large tile would also allow us to put the live music performances front and center as they were happening.

Sketching out this stage allowed us to iterate and discuss without getting bogged down in the details of the design.

Some initial concepts for home and hub template layout

Clicks and scroll heat map of existing home page. Majority of engagement above the folder and at the top-left of the screen.

Annotated wireframes

My Approach

Because these templates would serve as the major points of discovery on the site, we wanted to fit as much content above-the-fold as we reasonable could, and present it in a way that indicated some hierarchy.

Looking at some of the early data, we could see that with the redesign increased listen starts by 20%. Though because of the drastic change in layout, admittingly it's difficult to pinpoint which improvements had the greatest effect. It's clear however, that several factors had made an impact, including:

  • Differentiating the live stream tile from other pieces of content
  • Including album or song artwork for the currently playing track
  • Adding easy access stream switch buttons to the player
  • And making the first item in the navigation a one-click stream listen button

We also found that page views increased by 7%, indicating that people were consuming more content (but not as much as we hoped for). This could be attributed to the fact that users were listening to more audio on the site and therefore didn't feel the need to continue browsing. A win for the team nevertheless.

Category templates for deeper diving

In addition to creating 3 hub landing pages (Music, News, and Culture), the redesign warranted a separate template for further discovery of categories. We would implement a similar layout, but instead go for a simpler 2 column featured section at the top. This was due in part because:

  • We wanted to focus users' attention on the two most recent posts from categories as these sections would inevitably not have as much content
  • We weren't as concerned with 'below the fold' scrolling here because we felt safe to assume that if you already clicked into a category, you would be more willing to scroll down and view more content.





New Shows directory and Article/episode templates

As part of the redesign we also had to revamp some of the site's deeper pages like the shows directory, Show template, and episode/article templates.

The template above would be used for both articles and episodes with some modular components. For episodoes with audio pieces attached, a play button would appear in the left column, whereas content without audio no play button would be needed. For segments that were part of larger episodes, a small card at the top right would allow users to quick view all segments belong to the single episode. For articles without this, the sidebar ad woud simply slide up.

The new shows directory would be a simple list ordered alphabetically along with a prominent search bar at the top, as well as a few categories for quick filtering. This design would allow for a more content-agnostic approach and eliminate any internal competition for space on the page.

The new show template above would feature large scale hero background images to allow better exploration of our podcasts.