Call Transcription

Estate agents and managers previously had to listen through recorded calls to understand conversations, identify missed opportunities and review customer interactions.

Reviewing a call meant listening to all of it. Transcription needed to let people search what was said and go straight to the relevant part of the recording. Once it existed, an adoption problem appeared: people weren't discovering and using it.

• The audio player could not seek reliably because the backend was not forwarding the byte-range information the audio delivery flow required.
• Complex data-retention and availability states: recordings and transcripts are not always available.
• Downloads, loading and error states all needed to behave predictably.

What I owned

• The frontend experience for call transcription
• Transcript search and timestamp navigation
• Waveform, playback, download and error states
• Testing across unit, integration and end-to-end layers
• Identifying the adoption problem, and proposing and implementing the guided product tour

The wider team. The transcription capability itself was a team effort. The backend, data and product work sat with colleagues.

I built a split-panel experience: a transcript with speakers and timestamps beside a waveform and audio controls, so searching the text and navigating the recording are one interaction.

I also identified an adoption problem and proposed a guided product tour to introduce the feature in context.

1. 01

   Transcript and audio as one interface

   Selecting a timestamp or search result moves playback to that moment, with the waveform showing where you are.

2. 02

   Explicit availability states

   Data-retention and availability rules are modelled as distinct states, so users see why something is unavailable instead of a generic failure.

3. 03

   A guided tour to address adoption

   Rather than assume discovery would happen on its own, I proposed and implemented a guided product tour that introduces the feature in context.

• React and TypeScript, using the HTML Audio API and @arraypress/waveform-player for playback and waveform visualisation.
• Searchable transcripts with speaker information and timestamps, plus downloads and robust loading and error states.
• Jest and React Testing Library for unit and integration tests, with Playwright for end-to-end coverage.

• React
• TypeScript
• HTML Audio API
• @arraypress/waveform-player
• Jest
• React Testing Library
• Playwright

• Users can search transcripts and navigate recordings to the relevant moments.
• Transcription usage increased 10× following the introduction of the guided product tour. This is an observed product outcome the tour contributed to, alongside other work, not a result attributable to the tour alone.

• A shipped feature isn't an adopted feature; discovery is part of the design.
• A pragmatic workaround is fine when its trade-offs are stated and the real fix is recorded.