Raj Ostawal/Vocali

Product design · Concept

Making long podcasts searchable

You heard a two minute story from a three hour episode. Finding it again should not mean listening to the whole thing.

Role
Product Design, Visual, Strategy
Timeline
Aug to Dec 2024
Method
Iterative prototyping and usability testing

The problem

Inefficient podcast discovery

Podcast listeners struggle to find specific content inside lengthy episodes, or to judge quickly whether an episode is worth committing to at all. The result is frustration and abandoned listening.

As a user, I want to search for specific conversationsSo that I can find the part I heard elsewhere, like on a clip, without re-listening to the entire episode.
As a user, I want to judge an episode from short clipsSo that I can decide whether the full episode is worth my time before I start it.

Social proof

The behaviour was already there, the tooling was not

2×Listeners who try previews or summaries are twice as likely to finish full episodes (Buzzsprout)
80%Of podcast listeners prefer apps that help them discover shows quickly (Podnews)
35%Growth in short-form audio and video consumption over two years (Deloitte Digital Media Trends)

Job to be done: enable podcast listeners to explore content in a time-efficient and personalised way.

Approach

Streamlined search and exploration

A podcast platform built around three capabilities that work together: search inside an episode, curated highlights that let you sample before committing, and topic-based navigation so a long episode becomes a set of addressable parts.

In-episode searchFind the exact moment without scrubbing
Short clips and highlightsSample an episode before committing an hour
Topic segmentationJump between subjects inside one episode
Vocali app screens showing the redesigned podcast experience.

User flow

The primary path, from open to found

Before visual design, I mapped the primary flow to check that each of the three capabilities had a real entry point, and that none of them required the listener to already know what they were looking for.

Primary user flow diagram for the Vocali listening experience.

Wireframing

Settling structure in grey boxes

Early wireframes tested layout and hierarchy across the home, episode and search views, iterating until the structure held before any visual treatment was applied.

Wireframe of the home view.
Wireframe of the episode view.
Wireframe of the search view.

Visual design

A player that treats an episode as navigable, not linear

High fidelity Vocali screen.
High fidelity Vocali screen.
High fidelity Vocali screen.
The Vocali visual system across multiple screens.

Detail

Components, states and the small decisions

Component detail from the Vocali interface.
Component detail from the Vocali interface.
Interface component variant.
Interface component variant.
Interface component variant.
Full screen view of the Vocali episode experience.

Reflection

What this project taught me

Vocali was the first time I designed an interface whose core value came from a machine reading the content, generating clips, segmenting topics, making audio searchable. The design question was not what the model could do. It was how much of its output a listener should be shown, and how confident the interface should sound about it.

That question, how to present generated results honestly, with clear handling for loading, empty and wrong, turned out to be the same one I now work on every day in agent interfaces. Vocali is where I first hit it.

Next project
Aster UI, an agentic interface component library