Work

tl;dv

tl;dv turns a recorded meeting into searchable video and transcript, but a raw hour-long call is hard to act on. As co-lead designer in a two-person team, I helped take the product from early flow sketches through wireframes to shipped UI: the workspace where someone scrubs a meeting, highlights a moment, and turns it into a snippet worth sharing, plus the design language, colour, components, icons, that gave the team a consistent system to build on.

Role
Co-lead product designer, team of 2
Scope
Meeting workspace, highlight-to-snippet flow, design system
Surface
Web app
Year
2021
tldv.io
The tl;dv meeting workspace: video and transcript side by side, a highlights timeline, and the share-access modal for sending a snippet to a teammate

The challenge

A recorded meeting is easy to capture and hard to use. Somewhere in an hour-long call is the one comment worth acting on, and nobody wants to re-watch the whole thing to find it.

Before any screen was drawn, we mapped the raw flow by hand: how someone finds a moment, marks it, and turns it into something they can actually send to a teammate.

Early tl;dv user-flow sketches in a notebook, mapping how a highlight becomes a shareable snippet
Early flows sketched by hand before a single screen was drawn.

Mapping highlight to snippet

The sketches resolved into a structured flow: watch the video or read the transcript, mark a highlight, then shape it into a snippet with a clear start and finish before sharing it on.

Every state, list, pop-up, success, had to hold up whether someone was skimming a transcript or scrubbing raw video, so the two views stayed in sync throughout.

tl;dv user flow diagram: Video and Transcript views feeding into a Viewer, then a Create Snippet step
From a full recording to one highlight to a shareable snippet, mapped end to end.

A design language to build on

With only two of us designing, consistency couldn't depend on memory. We built the shared language, colour, buttons, icons, form components, so either of us could ship a new screen and have it look like it belonged.

That system is the quiet part of the work: nobody notices a consistent button, but everybody notices when it isn't.

The tl;dv design system: colour tints, button states and an icon set
Colour, buttons and icons, built so two designers could move at the speed of one system.
The workspace shipped, but the system underneath it was the real deliverable: the thing that let a two-person team keep shipping consistently after this project ended.

Next project

Petfinder