Bringing news, alternative, and classical together via one fresh design.
CPR is on a mission to provide its state with trustworthy, intelligent, and local news coverage at a time when regional newsrooms are shrinking. To meet their goal, CPR required an experienced partner who could guide them from requirements gathering all the way through design, development, content migration, and, ultimately, a new live site. Alley answered the call with a newly designed headless site with a persistent audio player, totally new user flow, and more.
“…the website can no longer be thought of as a brochure for what’s on terrestrial radio—a legacy medium starting to feel the changes visited on print news and broadcast television. The audience WILL change and the organization MUST be ready and be nimble.”
This quote, from early stakeholder research, captures the impetus behind Colorado Public Radio’s (CPR) decision to overhaul the design and CMS of their website, CPR.org. CPR is actually made up of three primary “channels” — news, classical music, and independent music (indie 102.3). Although news is CPR’s most popular programming, the old CPR.org oriented around CPR the organization, with news, classical and independent music as equal subsets of the site. What’s more, when CPR approached us, the site was running on Drupal 6. Among many goals, top of the list were increasing site speed and making life easier for content creators.
Listeners often tune-in through the website, and having a fully-featured listening experience is critical for experiencing CPR’s live broadcasts, news, and podcasts. This was not yet well represented on the existing site.
We were tasked with finding a way to put news first, while giving music visibility and providing clear pathways for people to complete all the typical actions taken on a public radio site: making donations, listening to live radio, seeking out playlists, and so on. This represented an information architecture and design challenge that culminated in a robust round of remote mobile and desktop user testing, in order to make sure we were moving in the right direction and achieving all the expected goals.
We provided participants with tasks to complete on various parts of the site. We saw what was working and we took notes on what wasn’t. After studying the data, we adapted the designs to better fit what users expected and needed from the site. This way, we were made sure the site was as easy to use as possible, and had all the workflows that people were looking for. One especially important piece was that listeners often tune-in through the website, and having a fully-featured listening experience was critical for experiencing CPR’s live broadcasts, news, and podcasts.
There were of course other goals that CPR had for the new site, outside of the user experience for their listeners. Top of the list were increasing site speed and making life easier for content creators.
The new site features a news-focused frontend, shortcut links to all three channels, a one-stop panel for listening to any of CPR’s three broadcast stations and a highly visible pathway to donate. The clean design creates a “family” feel across news, classical, and indie 102.3, but is also customized – for example, classical showcases its beloved hosts while indie 102.3 tracks weekly top 30 songs. But our work wasn’t just about a pleasing user experience. We also wanted CPR to gain a stellar editorial experience.
This led to an effort to migrate the site over to a WordPress installation, with a clean and easy to understand backend, as well as create an app that automatically transcodes their audio content into the multiple formats CPR needs for different purposes — their site, mobile, NPR itself, podcasts, and so forth. Now CPR producers only have to upload a single audio file and the platform will do the rest. They now have the opportunity to better maintain and create their podcasts and audio content, leading to better search and discovery.
The new site also runs as a single page application, which allows for a persistent audio player, offering the best user experience available. With the use of Alley’s open source framework (check out Irving here!), we developed a React frontend, with a WordPress backend. This headless architecture allowed us to follow best development practices when creating a powerful and dynamic audio player.
Finally, we also made improvements to the migration process itself. To make it vastly more transparent (CPR could check in on it at any given time) and faster overall, we built a new tool. Rather than running on an individual machine, the migration ran on the site server itself, which allowed it to be up to date with new content at all times. If anything needed to change in the data source, these changes registered automatically, without any additional steps.
We were thrilled to work with CPR, and excited to share their new site with the world. And, it sounds like they’re pretty happy with it as well – Kim Nguyen, Director of Digital Platforms for CPR, says “Alley has been a great partner in our process to evolve into a multimedia organization serving the state of Colorado. They have helped us reorient to the future, building us a fast site that meets user needs — both internal and external.”