Earlier this year, NPR released a Windows 8 version of NPR One for Windows, and recently, a Universal Windows Platform (UWP) version. They were eager to share their challenges and developer experiences in bringing the app to UWP.
NPR One provides talk radio personalized for each listener. NPR’s mission is to provide public radio content wherever the user is: on-the-go, at home, or at work. Windows provided a new way for their growing audience to listen. “When we released the Windows app, we had an unanticipated spike in iOS and Android downloads, as well” said Ben Schein, Product Manager at NPR. “Seventy percent of NPR listeners use Windows devices, and we’ve seen a 50-percent increase in their listening time just since Windows 10 came out. And that was before we upgraded our app.” The number of users and the adoption rate of Windows 10, over 110 million in the first two months, inspired NPR to create a native Windows 10 app. In consideration of this growth, NPR collaborated with InfernoRed Technology, who had worked on the original Windows 8 app. Together, they developed the upgrade, adapted the app to use NPR’s newly updated API’s, and designed the user interface pictured below.
A screengrab from The Salt on NPR One
Designing NPR One
The challenge NPR originally faced with the bringing the NPR experience to the PC was upsizing their mobile app design. As they approached the PC, they needed to design for a wider variety of screen sizes without sacrificing the core app experience, which is to sit back and listen. The original NPR app experience was designed for a four to five-inch phone screen. For larger screens, they began to explore how to use the extra space to deepen the experience with images. They wanted to avoid the traditional music-related imagery approach, as they don’t want to be in the business of finding quality visuals for every story, and even considered researching an automated way to provide related images. For NPR’s update to UWP, the developers leveraged Windows 10’s adaptive layouts to dynamically change the UI in response to different screen or window sizes. For example, when the app display reaches the large screen breakpoint, the app adjusts the interface elements to make better use of the screen real estate. When it reaches the small or mobile breakpoint, the app responds with a completely different UI design tailored to the condensed screen or window size.
“We’ve always strived to provide a simple, clean experience for users that doesn’t get in the way of them listening and getting to the content they want,” Schein notes. “Once we pivoted to think about that through the scope of displays as large as 20-30 inches, it gave us an opportunity to think about ‘simple’ through a different lens.”
While they are still looking for a better solution, they found a way to make a great user experience for their listeners by displaying a high-quality image when one is available, and a placeholder image when one is not. An example of their solution is below, the story metadata is displayed, non-intrusively inviting the listener to learn more.
A screengrab from All Tech Considered on NPR One
Using Background Audio
To create a first-class audio experience for NPR One, the app needed to provide a continuous, reliable audio stream. The dev team needed to run the audio task in the background to optimize performance, even on less-than-ideal hardware. Plus, running the logic in the background meant the UI could be lightweight, while the background task did all the heavy lifting.
The developers leveraged the Windows background audio task, which allows audio to continue playing and to be accessed through the system volume controls even after the foreground app has been closed. Previously in their Windows 8.1 apps for PC and desktop, their background audio code could not be shared between projects, but now with apps built on the UWP it can be shared by both phone and desktop device families. The playback task uses IBackgroundTask, but slightly specialized for background audio. For example, unlike traditional background tasks, it is not registered in the foreground. Through BackgroundMediaPlayer.Current, the app accesses the MediaPlayer class, part of the Windows.Media.Playback namespace.
Cortana in NPR One
As the NPR One app is a mostly hands-off experience, NPR was intrigued by Cortana and the idea of being able to use your voice in situations where it might not be practical to use your hands. The InfernoRed development team needed to make the Cortana background task communicate with the background audio task, something it was not originally designed to do. “This meant we had to code our own clever custom solution for processing commands in the voice background task, then responding and taking action on them in the audio background task,” said Ed Snider, Senior Developer at InfernoRed. Based on the results of user research, they created a set of commands that cover how most listeners interact with the audio playback. Users can play specific programs or podcasts, and even mark the current or previous story they heard as interesting. And because the app is using the background audio task, the app is able respond to default media commands using Cortana, as well, such as “Pause,” “Play,” or “Skip.”
The developers have plans to utilize Cortana further as the feature set matures. “Working with Cortana was a lot of fun. It’s really cool to be able to lay out the voice command definitions and use them as the conduit from the user to the app,” said Scott Lock, CEO and Co-Founder at InfernoRed.
A screengrab from Deceptive Cadence on NPR One
Part of the appeal of the app is its personalization feature and how that follows the user from one listening session to another, even to other devices. NPR One’s Windows app allows users to login to NPR One with their Microsoft Account. By leveraging the Live SDK REST API, the app provides seamless access to stored personalization settings. For example, while listening to a particular program, the users can tell Cortana to mark that content as interesting. This interaction is evaluated in the NPR One back end, which then provides listening recommendations from NPR’s curated inventory. This is done through an API call, so they won’t lose their settings or preferences, even if they change platforms.
NPR One for Windows 10 is now available in the Windows Store. If you would like to develop an app for NPR One, take a look at NPR One API and the documentation offered there.
Further reading: