#webapp

#web

#Figma

TSUB

TSUB is a software for making subtitles owned by Tujju Media. This software is used by internal freelance translators of the company.

Country

Indonesia

Year

2021

My Role

Designer

Country

Indonesia

Year

2021

My Role

Designer

Background & Context

Before TSUB, Tujju Media relied on external subtitling tools. While functional, these tools often slowed the workflow. Aligning subtitles with audio was time-consuming, small formatting errors were easy to miss, and moving between applications interrupted focus. Tujju Media needed a platform that addressed these issues and fit seamlessly into daily translation tasks.

Users

Freelance translators

Create and edit subtitles

Freelance translators

Create and edit subtitles

Reviewers

Check accuracy and consistency

Reviewers

Check accuracy and consistency

Goals

Shorten the turnaround time for subtitle projects

Reduce errors with built-in quality control

Provide translators with an efficient, user-friendly interface

Decrease reliance on external software

Research & Discovery

Discussions with freelance translators revealed several recurring issues:

Difficulty matching subtitle timing with audio

Frequent manual corrections for minor errors

Inefficient workflows caused by switching tools

The feedback highlighted the need for a single platform that combined translation, synchronization, and error checking.

Problem Statement

The challenge was to create a focused subtitling tool that reduced time spent on manual corrections, simplified audio synchronization, and allowed translators to manage their tasks in one place.

Design Process

The design went through several stages to ensure the software fit the needs of translators and reviewers:

Defining the Workspace Layout

• Created a split screen with subtitles on the left and video preview on the right. • Ensures translators can see both text and visual context at once.

Defining the Workspace Layout

• Created a split screen with subtitles on the left and video preview on the right. • Ensures translators can see both text and visual context at once.

Workspace layout

Building Editing Capabilities

• Added an input text editor with essential formatting tools. • Included insert, split, and merge functions to handle different subtitle needs.

Building Editing Capabilities

• Added an input text editor with essential formatting tools. • Included insert, split, and merge functions to handle different subtitle needs.

Input text, formatting, and subtitle tools

Building Error Detector

• Developed an error report panel to flag capitalization and line break issues. • Provided one-click fixes to reduce manual corrections.

Building Error Detector

• Developed an error report panel to flag capitalization and line break issues. • Provided one-click fixes to reduce manual corrections.

Error detection and quick fix

Designing Synchronization Features

A waveform timeline at the bottom allows precise alignment of subtitles with audio.

Designing Synchronization Features

A waveform timeline at the bottom allows precise alignment of subtitles with audio.

Synchronization of subtitle and audio

Setting Up Project Visibility

• Placed assignment details (translator name, due date, project ID) in the top bar. • Supported clearer accountability for both translators and managers

Setting Up Project Visibility

• Placed assignment details (translator name, due date, project ID) in the top bar. • Supported clearer accountability for both translators and managers

Project details visibility

Testing & Iteration

Testing was carried out with translators, and reviewers to refine the workflow:

User Testing Findings:

Reviewers tested the platform on real projects and noted the need for direct feedback to translators. Without an in-tool feedback system, reviewers had to rely on email or chat, which slowed revisions.

User Testing Findings:

Adjustments:

A Comments feature was added, allowing reviewers to leave notes on specific subtitle lines. Translators could see reviewer comments and reply them directly in the platform, making revisions faster and reducing miscommunication.

Adjustments: