Case: Speechbert

Generating hours of audio within seconds for digital publishing giant ZEIT ONLINE.

ZEIT ONLINE is one of Germany's leading news websites, known for pushing the boundaries of digital publishing. In 2020, we teamed up with their editorial product development department to help design and build a range of novel audio experiences.

We asked ourselves: What if we could turn any article published on zeit.de into high-quality audio within seconds of the article going online?

Context

Audio content is an effective and accessible way for media outlets to connect with their users. It allows users to listen at their own convenience and consume content without being tied to a screen. ZEIT ONLINE needed a fast and cost-efficient way to turn their vast portfolio of articles into convenient, high-quality audio experiences. This meant pivoting away from traditional human-read audio production. Together, we decided to explore text-to-speech technology and the role it could play in automating the article-to-audio conversion process.

Technology

Google WaveNet is a machine learning-powered system transforming text into natural-sounding speech in 220+ voices across 40+ languages. We chose Google WaveNet to power Speechbert and started with a simple, headless text-to-speech pipeline. We then tailored it to ZEIT ONLINE’s needs and integrated into their existing structures. The industry-leading technology allows Speechbert to vocalise, process and deliver hours of audio – all without the ZEIT team needing to lift a finger or record their voice to make it happen.

Technology

With the integrated audio player widget, users can listen to the Speechbert generated audio right on the article page. We supported the ZEIT ONLINE tech team with Speechbert improvements, one of them being audio quality. While Google WaveNet by default generates heavily compressed audio, Speechbert delivers high-quality MP3 files that ZEIT ONLINE users love listening to.

Screenshot of the new Speechbert interface on top of a screenshot of the old interface

The first version of Speechbert was an invisible service running in the background without much user interaction. We designed the new Speechbert admin interface to be a reliable, easy-to-use tool for ZEIT ONLINE’s PO editors and any non-technical teams. Currently, it centres around three main areas of functionality: audio, replacements and feeds.

Technology

Even Google doesn't get every word right. Users love Speechbert’s audio because it addresses a significant text-to-speech challenge: pronunciation. Just like typos and spelling errors erode trust in a printed newspaper, wrong pronunciation will turn listeners away. The Speechbert replacement library allows ZEIT ONLINE to consistently improve and override WaveNet’s default pronunciation, targeting difficult words or characters and teaching it how vocalise them correctly.

Development
UX
UI

Over the years Speechbert has become a large repository of all-things-audio at ZEIT. To make this content available to the outside world, we developed a dynamic playlist editor. The editor makes it possible for the ZEIT editorial team to create audio feeds that contain a mix of text-to-speech and regular, human-read audio like podcasts or advertisements. This variety is indexed via Speechbert, enabling a range of innovative storytelling formats.

Process

Speechbert came to life thanks to the integrated team set-up and collaborative process. We were able to try out new technologies and tools – continually testing and iterating to create a system tailored to the ZEIT team’s needs.

ZEIT editors now use Speechbert daily, with over 250,000 text-to-speech conversions since launch. We’ve received heaps of positive feedback and feature requests from users and readers. In our ongoing collaboration with ZEIT ONLINE, we’re working to improve and develop Speechbert even further.

Team

Jonathan Muth
- Product Ownership
Mitch Ryan
- Development
Tommy Svensson
- Development
Christina Breuer
- Project Management
Maja Persson
- Development
Swetlana Dmitriev
- Design
Harry Keller
- Product Ownership
Sophie Nickolai
- Project Management
Ida Dimic
- Design

Deliverables

Strategic vision
Product canvas
Web application
Data + activity pipelines

“As a non-sighted person, I have been using computers with synthetic speech output since 1987. Considering my experience in this area, I can only compliment you: the quality of your speech output is very good.”

ZEIT ONLINE reader

Diesdas is a company for digital clarity. We combine strategy, design and technology to cut through the noise and launch digital experiences people will tell their friends about.

Select projects

A closer look at what we’ve done and how we’ve done it.

Articles to audio with Speechbert

ZEIT ONLINE

Strategy
UI/UX Design
Development
Brand Design

Designing conversational AI

NLX

Strategy
UI/UX Design
Development

A fluid brand redesign

NLX

Strategy
Brand Design
Web Design

Building a digital memorial

Arolsen Archives

Strategy
UI/UX Design
Development
Web Design

Giving wiiings to people and ideas

Red Bull

Strategy
UI/UX Design
Development

Creating a digital ecosystem

Holmes Place

Strategy
UI/UX Design
Development
Web Design

How we can help

We are your partner for all things digital. From start to finish – and beyond.

Strategy

Every company is at a different stage in their digital journey. We help you figure out what to make and how to make it.

Brand strategy

Digital brands are always evolving. We partner with you to define your company vision or to reinvigorate your existing brand strategy.

Product strategy

You tell us what you want to achieve, and we help you find the way to get there. From your company goals to the technical requirements, we’ve got you.

Digital transformation

Creating resilient strategies for your digital future will set you up for lasting success. Together, we assess your digital readiness and identify new business models and ventures.

Design

Digital life has never moved so fast. We’ll partner with you to define how your brand and products should look, feel and behave to reach users and stand out from the crowd.

Brand design

There’s more to a brand than meets the eye. Visuals, interactions and products are all fundamental to shaping how people think and feel about your brand. It’s the connection you create with your audience.

Product design

The most loved digital products sit at the intersection of great to use and great to look at. Together, we’ll build something that hits the mark.

User experience and game design

Meaningful and fun experiences lead to lasting relationships with your audiences. We’ll guide you on how to keep them coming back for more.

Technology

There’s an art to finding the right solution amongst endless possibilities. We’ll help you launch reliable and beautiful custom applications, sites and products.

Full-stack development

From e-commerce shops to global brand sites, we design, develop and deploy custom websites end-to-end. Clean, future-proof code so you can adapt quickly and scale up as needed.

Custom applications

We’re fluent in a range technologies and languages. Our years of experience ensures we build secure, integrated and scalable solutions for our partners.

Interactive experiences + games

We design and build engaging experiences for playful customer activation. Taking products from functional to fun.

Team

Teamwork makes the dream work. We’ll be your partners, not just service providers.

Agile methods

We use Agile methods to reduce complexity and make the best use of skills and budgets. It helps us do the right thing at the right time.

Healthy projects

Planning is sexy. So is project health. Good organisation allows us to manage project risks without compromising creativity.

Beyond the brief

Design and technology can shape things for the better. We build for tomorrow, thinking beyond constraints, focusing on the people who engage with our work.

Not ready for a long-term relationship? Let’s start with a one-day workshop, no strings attached.