COAST TO COAST AM SITE REDESIGN
My role: Experience Designer
Client: Show host/owner and producers
Other teams involved in the project: The iHeartMedia development team, sales team and legal team
Project:
Coast to Coast AM is one of the top-performing syndicated radio shows in the United States and produces a lot of content that needs to be organized in a way that is easy to navigate. The site had last been updated several years ago and was still using the original fonts and layout from the first site they built.
The show producers asked us to revamp the look and layout of the site so it would be easier to find the latest content, putting top-performing features above the fold and refreshing the appearance of the site. The show requested that the look stay similar to the old site for brand consistency.
Some of the changes include:
1) De-cluttered navbar and updated fonts and icons across the site
2) Updated look of image carousel
3) Updated modules and rearranged content order to promote top performing features
1) De-cluttered navbar and updated fonts and icons across the site
2) Updated look of image carousel
3) Updated modules and rearranged content order to promote top performing features
DETERMINING TOP CONTENT PRIORITIES
Through conversations with the development team and show producers, while also using Google site analytics, we determined which features on the home page bring in the most traffic and are updated most frequently by the show. I then worked with the leader of the development team to put together a hierarchical list of which features should be most prominent in the new site layouts.
While a lot of our traffic comes through the home page, we also worked to simultaneously determine the order of features on all pages and across mobile platforms to ensure consistency and cohesion. This helped us to ensure that features which show up on multiple pages (such as the Last Night’s Show and Upcoming Show sections) have the functionality needed for all of the pages they appear on.
THREE CRITICAL CONVERSATIONS
DETERMINING USER PREFERENCES
GETTING USERS TO RETURN TO THE SITE FREQUENTLY
UNDERSTANDING DESIGN LIMITATIONS
BEST PRACTICES RESEARCH AND FINAL MOCK UP
At the same time, I did research into web design trends and similar layouts that other sites were using and gathered a library of best practices for layout and design options that I felt would help us solve some of the issues we had with the information heavy layout.
Some of the layout updates included the following:
1) Content organized into a grid of images, allowing users to have a fast way to navigate the constantly changing content. This approach was supported by a similar layout used on sites like Buzzfeed and Bitly which also have quickly updating content that must be presented in a fast, visual way. (Example: Buzzfeed desktop, Buzzfeed mobile, Giphy desktop.)
2) The icons leading to social media pages were simplified and included in the navbar. This layout allowed us to streamline the promotion of our social media accounts, which is also an approach that Vanity Fair and many other sites use. (Example: New social media icons.)
3) Changing the layout of the navigation bar to be more streamlined allowed for a more sleek header area, keeping the focus on the content of the site and allowing for quick and simple navigation. (Example: Original proposed navbar design. In the end, the show decided to go with a navbar that had a more prominent look.)
This information was used to come up with a couple of different layout options for us to consider using in this site. I then met with the show and development team to decide which new layout would make the most relevant information quickly and easily accessible.
After honing in on one layout, I created the mock up using the wireframes we agreed on and the original look of the site as a resource. I updated the font to Futura and used the site layout and functionality I had found as inspiration for the new mock up.
FINAL LAYOUT
As we built the site, the show was happy with most of the look and functionality we had discussed. Once they saw the beta version, they decided that they wanted a more prominent navbar that would allow users to quickly identify site navigation and remain in place as the user scrolls down the page. The adjustments were made and the site was successfully launched for all platforms.
