Transcript
Subtitle

Languages

EnglishUnited States of AmericaSource
TranslatedAlready translated — select a language to display its transcript.
Merge Mode
Share Hire a professional

9,932 minutes remaining

Search or run a command⌘K
Export

Leadership talk...

1.0x
0:00/0:16
English
0:010:020:030:040:050:060:070:080:090:100:110:120:130:140:150:160:170:180:190:200:210:220:230:240:250:260:270:280:290:300:310:320:330:340:350:360:370:380:390:40
0:00

Translate.video: redesigning the editor

My role
Product Designer | Solo | End-to-End
Timeline
2 Months
Platform
Web App
Team
CEO · COO · 3 Engineers
~15 → ~5 min
core editing task,
timed by hand
8 → 4
toolbar actions,
regrouped into tiers
8–12
enterprise users,
2 test rounds

Translate.video lets teams transcribe, translate, subtitle and dub video into 75+ languages. In 2023 I redesigned its editor. I added no new features. Everything the old editor did, the new one does too. What changed is whether people could understand it.

01 · SYMPTOMS

Problem: we couldn't name it yet

People were slow in the editor, and nobody could say why. They hovered over the toolbar, flipped Play English / Play Japanese to work out what it did, and looked for speed in two places. None of it was a bug anyone could file.

Nobody asked for more features. Every session went the same way: open the editor, stare at it, work out what it wanted. The AI was doing its job. The interface wasn't showing anyone what it had done.

IN HINDSIGHTThe old editorAt the time it just felt slow. Redrawn from the original Figma file, it had thirteen things wrong.
02

The argument

Leadership wanted to ship more: AI tools, export options, a command palette. I played them recordings of users hesitating over the toolbar instead. We agreed to restructure alongside feature work, not instead of it.

03

Two dead ends

Fewer buttons. Cleaner, but “I still don't know where things are.” Hiding actions doesn't give anyone a mental model.

Step-by-step tabs. Tested well as a concept and failed in use: “But I need to go back and forth.” Localization isn't a line.

01Fewer buttons
02Step-by-step tabs
THE ACTUAL PROBLEM

The problem wasn't how many actions there were, or their order. Every action was asking for attention at the same time.

04 · INFORMATION ARCHITECTURE

Solution: Four tiers, four zones

I mapped every action on two axes: how often it's used, and how much deliberate intent it needs. Frequent actions stay on the editing surface. Infrequent ones sit in the top bar. Deliberate ones live in context panels, and actions that cut across the editor are a search away in the command menu.

The editor now has four zones: context panels, transcript cards, video preview and a live timeline. The active card follows the playhead, and languages are always visible.

BEFOREBeforeThe old editor, as audited above.

The screens above are from my draft, made before the editor moved onto Aero, the design system I built at Vitra. The shipped editor is built from Aero’s tokens and components, so the colours, buttons and spacing the audit flagged come from one system instead of being drawn by hand.

05

The button nobody saw

In testing, people edited the source text, then couldn't find how to re-translate it. The Translate button sat between the two columns and looked like a divider. We moved it to the bottom of the card and made it activate only when the source had changed. In the second round, translation mistakes dropped noticeably.

05Translate: from the divider to the bottom of the card
06

What changed

A core task went from about 15 minutes to about 5. I timed it by hand, so read it as “roughly a third of the time,” not a lab result.

When software does most of the work, the interface has a different job. It isn't where the work happens anymore. It's where people understand the work.