The Design Journey of The New York Times Audio App
· Follow
Published in · 9 min read · Nov 21, 2023
By Rimar Villasenor, Grace LaRosa, Bon Champion, Daman Chatha and Lavi Tang
It’s not often that you get to build a new product from the ground up. At The New York Times, cross-disciplinary collaboration is at the heart of many of the company’s digital innovations, and design played a pivotal role in imagining, expressing, and validating the various avenues a to-be-defined product might take.
Most recently, this was demonstrated via the launch of New York Times Audio — an app that embodies our idea on how best to represent journalism in audio form (in other words — “what if The New York Times was just a play button”?).
This new product is home to New York Times produced podcasts and some of the industry’s most iconic shows such as This American Life and Serial, along with select read-aloud articles from partnering publishers. It also includes reporter-narrated articles that give listeners a human, first person account of what went into some of our front page reporting — a unique new format that helps listeners connect to our journalism and get a sense of the story behind the story.
Here is a look at how we worked together with colleagues across the business and newsroom to bring this audio-first experience to life.
At the start of the project, we pulled together a cross-functional team to focus solely on bringing our vision to life: a streaming app dedicated to the world’s best audio journalism. This meant shaping new tools and processes, like building up a new audio-centric design system and CMS, along with immersing ourselves in audio best practices and approaches taken elsewhere to understand where our biggest opportunities were.
As we scaled our team and set these foundations, we had to solve for specific design challenges that varied greatly from the ones tackled by other music and podcast apps.
Our product needed to:
- Ensure that our audio journalism feels timely, evolving by day of the week, even time of day.
- Emphasize the role human editorial and curation plays.
- Create a clarity in what can feel like an overwhelming choice of playlists, titles, and content.
- Meet diverse listener news needs, whether they just wanted to quickly get caught up on the news of the day or go deep in a pressing topic.
- Feel like an extension of The Times brand, while also creating a distinct visual language and interface that caters to listeners over readers.
In order to develop an experience that delivered on these ambitions, our design team invested heavily in discovery sprints, weighing the effectiveness of drastically different approaches and iterating at a rapid pace. And, perhaps most notably, we conducted the majority of these efforts in tandem with our editorial partners.
From the very beginning of our design process, newsroom partners were by our side — sharing what was important to them, highlighting gaps in their toolkit, and informing the direction our concepts took. They participated in brainstorms and co-creation sessions, provided feedback in design critiques, and kept us close to their most important needs when programming and presenting our journalism.
This early, ongoing collaboration demonstrated the value of designing as closely to editorial as possible: with their intimate understanding of our coverage, we were able to create a product experience that was both sensitive to their journalistic approach and innovative for our users. Our working together even opened the door for brand new shows and product features that would eventually be woven into the app’s core offering.
Some examples of this are The Headlines, a short morning show developed exclusively for the app, and the daily playlist: a programmed package of must-listen audio stories that tops our homescreen. Each of these was sparked by a user need (more short listens to fit into my day) or design concept (“the essentials” in audio) and brought to fruition via our partnership. Additionally, we relied heavily on editorial feedback when creating our card system. They helped inform which tools were needed to effectively respond to the news cycle and communicate the appropriate content hierarchy, and evaluated them in context when programming early versions of the app to help us understand what might be missing.
All in all, we’ve forged a unique relationship with the newsroom that has continued to shape our work. Our collaboration helped make us feel like one team — editors informing design iterations and the needs of our designs themselves, and designers pitching concepts that ultimately inspire a new editorial approach.
We spent quite a bit of time on research and testing. Early on, we partnered closely with our insights team to user test several divergent app prototypes, with different architectures, content strategies, and design aesthetics. In parallel, our research leads conducted user interviews to gain a deeper understanding of listening habits and the role audio plays in our audiences’ daily lives.
In each stage of testing, we gathered direct commentary and feedback from real listeners. We connected our feedback form to Slack, giving us real-time updates on what people were saying. It was a constant source of inspiration. Every day, we would see what users were thinking about the product we were building — how they were using the product; what their pain points were; what features they were asking for. Their feedback helped give us a sense of what they cared about, and what they wanted the evolution of NYT Audio to be.
We shaped our priorities and product roadmap around this input, guiding us towards our MVP.
We had a lot of initial conversations at the beginning of the project where we analyzed market research and debated product strategy. These often resulted in many more questions. As designers, we focused on translating insights and ideas into artifacts that would help bring clarity to these meetings, driving us to decisions faster. Artifacts varied from simple diagrams to more complex, visually-rich prototypes.
These prototypes also inspired our editorial team to think through possible content ideas, helping give shape to assets we have in the app today.
One of the most exciting and unique aspects of the prototyping included experimenting with sound. Using music and our own voices, we’ve played around with ways a user might navigate the app using sonic cues.
Rather than just viewing artifacts and prototypes as the end result of our design thinking around a problem, we began using them earlier in the process to inspire conversation, which helped give the work a greater sense of direction.
Given that audio is by nature a format that renders our journalism accessible for low and no vision users, we wanted to ensure that the interface was optimized for VoiceOver. In helping establish a set of design and product principles to guide our work, we prioritized accessibility as one of them. This brought a11y to the front of our process and baked it into our product thinking from the beginning.
With our engineering team, we set out to learn as much as we could. We started by conducting an audit of VoiceOver experiences in other apps, and combed through Apple’s guidelines for building for accessibility. Taking a look at an early build of our app, we identified where accessibility was currently working and where it needed to be enhanced. We explored different ways we might improve the experience to make it seamless to navigate using only audio cues. How might we group cues and actions together to reduce the amount of taps and swipes to a listen?
Another part of the challenge was figuring out how to annotate our designs for VoiceOver. Seeing a gap in our documentation kit, we created a reusable Figma template for preparing work for development. Now a permanent part of our documentation, the template has since been adopted by other teams at The Times.
Moving closer to launch, we organized accessibility-focused user research sessions with no and low vision users to get ongoing feedback for how our optimizations were working, which helped us hone the experience prior to release.
One of our goals was to distinguish NYT Audio visually, while retaining the quality and essence of The New York Times brand. To do so, we worked closely with brand designers, art directors and photo editors that work across various Times products to sharpen and align our visual approach for launch.
Leveraging a core competency of The Times — our photojournalism — we knew we wanted to prioritize images in the experience. To capture the essence of each piece of audio journalism and to pique listeners’ curiosity, we coupled our audio with compelling art direction. Alongside our photo editors, we refined the shapes of our content cards and scrutinized the aspect ratio for images to ensure that the art was given the right amount of visual priority in relation to the other elements on screen. It was important for us to land on a system of containers that elevated imagery and made our photo editors’ workflow seamless.
Given that our content architecture is relatively complex with many different types — from podcasts to narrated articles, longer-form pieces and shorts — we spent a lot of time refining our information design. We looked through everything from iconography to the relationship of typographical elements. Together with our brand team, we went through many iterations of our component library. This manifested in changes to our type system, padding, and even the broader color system we applied across our cards (originally, we were extracting color from album art to apply to the card UI, but refined our approach to be more intentional given the visual noise this created).
We also worked to establish a distinguishable identity while connecting NYT Audio to the rest of The Times product portfolio. The brand team helped define a distinct brand color that sat comfortably within our product bundle, and established usage guidelines around typography in accordance with the greater Times design system.
From an ambitious idea to a real tangible product, designing and helping launch the NYT Audio App was a fun and challenging experience. We truly had a seat at the table alongside our newsroom, brand, product and engineering partners, and there is a direct line from our discovery work to the live experience our users engage with day.
This experience is a reflection of how Design fits into the fabric of The Times. The product development organization here empowers the design function to play a pivotal role in setting direction. We shift across altitudes, from collaborating on research and test design, to prototyping with editors, to partnering with product on defining the big opportunities for our roadmap. We’re excited to continue having an impact as we evolve what the audio product, and our approach to elevating audio journalism, will become in the future.