WAMU.org

Washington, D.C. area NPR affiliate station, WAMU, approached 10up in early 2016 to modernize their website design, with an emphasis on audio content. Designed for more traditional written reporting, their site relegated audio content to a Flash player in a pop-out window. WAMU envisioned an audio-first, app-like experience responding contextually as listeners navigate the site. The new platform would work seamlessly on devices of all shapes and sizes, eliminating legacy solutions (like pop-unders) to create a modern, uninterrupted listening experience.

WAMU designers presented high-fidelity comps featuring a persistent audio player pinned to the bottom of the window. Relevant audio content, prominently marked with a Play button, was presented alongside each (written) story. While navigating the site, visitors can listen to WAMU’s on-air broadcast, play audio accompanying editorial content, or queue an entire playlist from a curated collection, show, or category.

It was obvious that a more traditional engineering approach would not deliver the envisioned user experience. 10up approached the build as a “single-page application” so that the persistent audio player would not be interrupted as a visitor clicked around the site. Building upon industry interest in emerging application-style web technologies, including momentum inspired by Matt Mullenweg’s 2015 “State of the Word”, 10up and WAMU decided to leverage React.js and the WordPress REST API to build a fully featured, forward-looking experience.

In December 2016, WAMU and 10up launched the new WAMU.org on Pagely. One of the first fully decoupled WordPress-powered projects on the web, WAMU.org was built using React.js, Redux, and the WordPress REST API. Whether accessed from a desktop computer or a smartphone, the platform’s single-page approach makes for a fast, smooth browsing experience, and enables audio to persistently play as a listener navigates the site, while offering audio content choices based on a listener’s in-site actions.

The new WAMU.org also features advanced, intuitive curation of the homepage and category (beat) pages. 10up extended the WordPress Customizer so that editors can experiment with different layouts, previewing both the layout and selected content in real-time, on the front end.

Other features include:

• A responsive weekly and daily show schedule, with easily edited current and future listings;
• Native DFP ads embedded in the audio player;
• Integrations providing audio and written content from NPR API and the Public Media Platform;
• Sitewide alerts and calls to action integrated prominently and cohesively into the design, and;
• Progressive rendering, with a fast-loading app “shell” that initially serves page content from WordPress until the React app renders completely.

Following its launch, 10up and WAMU continue to build on the platform, and anticipate open sourcing portions of the technical stack in the future.