News analysis program On Point is one of Boston public radio station WBUR’s most popular and prominent shows, yet its website looks more than a little outdated and isn’t mobile-friendly. It’s hard to figure out where content from the show lives when visiting the main wbur.org website.
So the website is getting an overhaul. “We’re planning to make audio more of a first-class citizen online,” WBUR’s executive editor for digital Tiffany Campbell told me, “while also making sure the design can honor the stuff we do in visuals and text.”
With the website overhaul, WBUR hopes to address challenges around the station’s online presence and its underlying structure. For listeners, there’s the problem of seamless listening and of discovery — I missed my top local headlines this morning and want to catch up. Or, I see an audio player for a long segment but don’t know if it’ll be interesting — how do I listen without disrupting my browsing experience entirely?
Different show pages had different requirements for presenting text stories, audio, and relevant art. Without any in-house design resources, the work of maintaining and debugging all these separate WordPress verticals inevitably falls to a pair of in-house developers.
As the station began considering a large-scale redesign of its website and infrastructure, other problems surfaced. Some required technical solutions: The station’s livestream, for instance, lived on its own separate page; click on “full schedule” to see what’s coming up on air, and you’re taken away from the player. Pieces of the site were responsive, but the station didn’t have a consistent mobile strategy. Other problems required a rethinking of how a local public radio station should maintain its relationship with its audience: Why weren’t there more digital offerings for listeners to engage with?“We had a high number of high-level goals, and we weren’t sure how to tackle all of them,” said William Smith, a WBUR developer. “As a public radio station we dip our toes into a number of different areas, and these new front-facing websites kept creeping up. The technical debts and costs of trying to keep them all up reached a boiling point.”
The beta (emphasis on beta, Campbell cautioned) version of the new WBUR.org is fully responsive and features a persistent player, so users can browse while listening. They can choose show segments and jump back and forth between the livestream and segments seamlessly; once they reach the end of a show segment, the audio player automatically jumps to the livestream. An “Explore Audio” section features all the latest audio content, and down the line visitors will be able to create their own segment playlists. The team is also working on a new mobile app, to be released later this year.
To make the best of WBUR’s two-developers-to-dozens-of-staffers ratio, the new site is built to be modular, so that producers will be able to choose from a menu of web components that suit the needs of whichever story page they’re putting up. Some WBUR-maintained subsections, like arts vertical The Artery and opinion page Cognoscenti, don’t have regular audio segments. Others, like On Point, need to be able to highlight a couple of hours of audio.
The redesign began about two years ago. After an extensive period of gathering data on what people liked and what they wanted and then shopping around for a design firm (since the station has no designers on staff), WBUR contracted with the Boston-based company Upstatement. The team at Upstatement handled the visual branding and design.
Smith and another developer, Forrest Marvez (who has since left WBUR), were embedded at the Upstatement offices last summer, where they constructed the API, learned React.js, and started building the new site full-time around June. Much of the invisible work over the past months has gone into rebuilding an audio API so that NPR, WBUR, and other audio content could be made available in one central location. The station has brought on an NPR developer David Moore to continue the work on the API front and refining curation tools that will allow editorial staff the freedom to put together a section page by hand when needed or let the pages populate automatically.
“When we first spoke, John [Davidow, WBUR executive editor] and Tiffany told us, ‘We want this awesome audio experience, but we don’t necessarily know what that awesome experience looks like,'” designer-developer and partner at Upstatement Jared Novack said. “So we started with smaller projects around article pages, redesigning those, making them mobile-friendly, introducing new conventions. Then we started to understand what ‘awesome audio’ meant to WBUR.”“We wanted whatever they could work out for us to be extensible, capable of being improved upon,” Smith said.
Plenty of complex work remains to whip the beta into more than minimal-viable-product shape. WBUR is hiring another developer to shoulder the technical burden.
Stories are being migrated in real time to the beta site but are also available on the old WBUR site. As beta users provide feedback, both sites will stay up and running for an unspecified amount of time.Other elements of the new site will get more sophisticated over time as the developers continue their work and user feedback rolls in. Suggested next stories at the bottom of each story page to encourage people to spend more time on the site, for instance, could become more dynamic and personalized.
The team is also still working on better ways for the site to handle underwriting (ads) and member donations. Thirty to forty percent of WBUR’s current web traffic comes through social, and often when a story goes viral elsewhere, the story’s public radio origins are lost. There might be ways to make it clearer to readers that the story came from a nonprofit, member-serving organization, Campbell pointed out.
“I’ve tried to be really disciplined about not calling this process just a redesign,” Campbell said. “We’ve built a brand new platform.
“So much has been solved for visuals and text. When we set out to look for what would be a great model for audio, we only really have models in music — Pandora and Spotify — but spoken word is not the same. We’re trying to figure out what will work.”