AI Dubbing Made Easy

Crafting an Intuitive User Journey for Speechlab

Overview

Speechlab is an AI-powered product that automates video dubbing across multiple languages. After completing the core features, we shifted our attention to enhancing the user experience.
As the Product Designer, I worked on optimizing the workflow to make AI dubbing more intuitive, ultimately boosting conversion rates.

Product Designer

Role

July - August 2024

Time

Hugo He;
1 Design manager;
2 Product Managers;
1 Developer; QA team

Team

Analyzed existing user flow;
Redesigned first-time experience;
Worked with the developer to launch new version;
Worked with QA team on bug detection.

My Work

Context

AI Dubbing:
From MVP to UX

Meet Speechlab

AI startup backed by Andrew Ng's AI Fund

Early Stage

Need to enhance UX after Core functions complete

New Challenge

AI introduces new workflow to video production

Current Lengthy User Flow

To dub a video, users need to navigate from the dashboard to the editor, specifically upload, transcribe, translate, and dub a video. Users can get lost at every step.

Research

From business problem to user problem

Losing conversions in every funnel

Blockers in the User Flow

Research methods: Behavioral Analytics; Usability testing; Experience walkthrough.

Design Challenge

How might we streamline the user flow to guide more users to the final dubbing step?

Solution Space

Problem 1

Redundant transcribe step

Solution 1

Auto transcription to reduce 1 click

Before

After the file uploaded, users need to click “transcribe” in a separate “ready to transcribe” section.

After

Delete “ready to transcribe” section. Cut the unnecessary step.

Problem 2

Hidden Next Steps

Solution 2

Responsive Process Navigation

dashboard

Before

Users don’t know what to do next due to lack of guide. E.g., after transcription is complete, there is no change in dashboard.

After

Project sections expand automatically to show the current status and remind users of next steps.

Editor

Before: Hard to see any change.

When the translation started/finished, the editor has no noticeable change, thus users don’t know what to do next.

After: Clear path + Auto switch

Switch to the next section automatically to
remind users of next steps.

Problem 3

Hidden CTA

Solution 3

Diminish distractions

Dashboard

Before

Users went to other elements then the “Upload“ section first. Due to the “Upload“ section is not noticeable enough among distractions.

After

Create a intuitive onboarding experience by only showing the upload section for the first-time users.

Editor

Before

Users went to other elements then “Add new translation“ button first. Due to the button is not noticeable enough.

After

Guide users to move to the translation step by making “add new translation” more noticeable.

Solution

A more intuitive AI dubbing experience.
Even for first-time users.

Auto transcription supporting multiple-file uploads.

Dashboard

Clear navigation to guide users to the dubbing step.

Editor

Impact

23% increase in dubbing completion

  • Boosted success rate of new users completing dubs;

  • Reduced time from sign-up to completed dub.

    (Exact figures are withheld due to NDA.)

Thoughts & Learnings

Use AI to Foster Inclusivity

Working on a product that reduces language barriers has been rewarding. I see it as my responsibility to shape how AI is used for the greater good.

Work with Constraints

In a startup with limited resources, I learned to maximize impact by prioritizing core features and refining the product through iterative processes.