When Alley began working with WPR, their team was struggling with an outdated Drupal CMS. The admin interface was frustratingly slow and confusing to work with. Their team needed a better editing experience that would move them from story pitch to publish faster.

External users were also in a pickle. The site’s design and UX were outdated and confusing. The site lacked a persistent audio player, a common feature across WPR’s contemporaries in public radio.

WPR’s “Find a Station” feature was organized according to broad regions rather than narrower locales that a user could quickly recognize as their location. This was a particular problem as WPR wanted to focus more on local news.

Find a station

To assist users in quickly finding their station, we introduced a prominent “Find Your Local Station” module on the site’s homepage. Users can enter their zip code or, through location services, click to identify the closest station(s) to which they can then link. As some stations overlap in their signal reach, we programmed the feature to calculate the overland distance between two points on the globe. In that way, the user will see all the stations that can broadcast to their location.

Prior to the redesign, station pages were station rather than user-centric. Landing pages were dominated by unsightly grids that displayed scheduled programming, leaving little room for other content. Today, the UX of these pages is local news first and provides users with highly visible links to schedules, staff, and technical information. Behind the scenes, we established links among stations, schedules, and regional stories. As a result, users can now find a variety of local content in one place on each station page.

Persistent audio player

For a persistent audio player to be successful, users must have consistent audio without a second of interruption. To achieve this, we took an “html over the wire” approach where we custom built the player as a thin JavaScript layer that stays in place as the user navigates to other pages or interacts with site features. When a user clicks an internal link, rather than the entire page reloading, this JavaScript code fetches the HTML for the page the user requested and swaps the content the user sees for the content on the new page without any interruption in audio playback. In this way we delivered the functionality WPR needed without building the entire site in JavaScript, which would have been hard for WPR to maintain.

Forms

WPR has a number of forms across the site, such as sign-up forms for newsletters. We wanted WPR to be able to build and change these forms directly in WordPress without the assistance of a developer. To do this, we installed the Gravity Forms plugin, which would collect data such as name and email and deliver it to WPR’s CRM. For WPR’s editors, they can easily make changes to a form that fan out across the site wherever that form is present, saving time and effort.

Design

Our objective regarding look and feel was to modernize the WPR site, which appeared dated and was not optimized for mobile. Using WPR’s existing logo and color scheme as a starting point, we proposed fresh accent colors, new highly readable fonts, and an array of new styles for links, buttons, and story metadata. We introduced more immersive imagery and white space to promote easy scanning.

The design system was crafted not only with external visitors in mind, but also with WPR’s internal team. WPR now has more on brand, eye-catching styles that they can quickly apply to ads for internal initiatives.FormsWPR has a number of forms across the site, such as sign-up forms for newsletters. We wanted WPR to be able to build and change these forms directly in WordPress without the assistance of a developer. To do this, we installed the Gravity Forms plugin, which would collect data such as name and email and deliver it to WPR’s CRM. WPR’s editors can easily make changes to a form that fans out across the site wherever that form is present, saving time and effort.

Information Architecture

When it came to the site’s navigation, our objective was to rework the way information is structured and located based on how visitors seek information, not how WPR is organized internally. One way we did this was by reducing the number of primary navigation choices in the header from 15 (including social media links) down to seven selections on the new site. We moved utility navigation and social links to the footer. Our approach was “navigation as you need it;” after users clicked into a section, they would then see additional links to sub-sections.

Results

Together with WPR, we met our project goals. WPR listeners now enjoy a faster, more navigable site and a persistent audio player that fits seamlessly into the site. These benefits are felt especially on mobile. Internally, WPR editors are saving time through the new WordPress CMS.