NPR Labs

As NPR’s in-house technology research & development center, NPR Labs provides a variety of tools to assist public broadcasters nationwide, including the Mapping and Population System (MAPS), a web app that displays reception coverage maps for all public radio and television stations in the US. During my internship in the spring of 2017, I worked as part of a small team to build a new version of the tool from the ground up.


Details

Project
Mapping & Population System
Role
UI/UX Designer
Team

Christian Wood / Developer
Alice Goldfarb / Director

When
Winter-Spring 2017

Background

The map tool is primarily used by member station managers, underwriters, and engineers across the country to inform decision-making around station planning efforts, such as improving reception or adding new services. However, it was first released in 2011 and hadn't changed much in the following years.

Our main goals for this redesign effort were to overhaul the interface for better usability and increase performance, so we decided to use VueJS, a modern Javascript framework, and Mapbox GL JS, which provided additional customizability and performance in rendering the map view.

Navigating to a station

Functionality

As the name suggests, MAPS consists of a map dotted with pins representing radio and television stations across the country. In the top nav, a persistent search bar allows users to search for stations by callsign, street address, or jump to a city or state.

Each station within the viewport is also displayed in a sidebar, and users may either search for stations or drag, pinch, and zoom the map to find what they're looking for. Although we retained the same basic layout as the earlier version, we gave more prominence to the search field, since users preferred to search for stations over panning around the map. Secondary settings and filters were shifted into a popover panel to clean up the UI, and list items were expanded to include more information.

The list also contains controls to toggle contour or coverage overlays on the map. When a coverage is activated, its callsign will appear as a chip below the main nav for quick access. Clicking on a station in the toolbar or the list opens a station detail view in the sidebar that includes additional station information, such as street address, contact information, and demographic information of the coverage area scraped from Census data. When a user searches for a station, the search results take over the sidebar, and the map zooms to the first result.

Refreshing the UI

Look & Feel

Assorted UI enhancements, such as hover states on each station card and visual design to reflect NPR’s updated branding. NPR’s mobile applications use Google Material Design, so we incorporated Vue Material for cohesion and rapid component-based development. The interface uses the typefaces Gotham and Knockout to match NPR.org, with a color palette derived from NPR’s brand colors.

Station Cards

Originally, stations were listed in the sidebar with only their callsigns to identify them. We expanded these list items into cards that included each station’s location and labelled the controls to differentiate between coverages and contours.

To the station list we introduced a persistent control to instantly show all nearby station contours for stations in view, and another to hide all visible contours. This helped to improve performance and usability, as users would sometimes leave unneeded coverage overlays active, causing increased lag if they were to navigate away.

Sidebar

Station Detail View

In order to accommodate the need for more in-depth station information, we added a detail view in the sidebar once users clicked on each station. Previously, this information was restricted to popovers on the map that would appear on hover over a station pin or name in the list. Demographic information was also moved into the station detail view, so users could access that information without navigating away from the map.

Responsive Design

But the biggest change from earlier iterations of the map was the newly responsive design. To accomodate for mobile screens, the list and map views collapse atop one another, while the search bar remains persistent for discoverability. Toggling between list and map views is as easy as tapping an icon in the main nav.

We were able to reuse the station card component on the mobile view, displaying it as a bottom drawer, so that users could access a given station’s information without having to switch over to the list view. As users moved around the map, the drawer updates to display the closest station.

The new toolbar showing active stations let users to jump to an active station on the map by tapping it, benefitting mobile users who disliked the clumsiness of pinching & dragging on maps rendered within a mobile browser.