Overview
Speechlab is an AI startup backed by Andrew Ng's AI Fund. Its first product focuses on automating video dubbing across multiple languages.
As the product designer, I noticed a significant drop-off between user registration and video dubbing completion. To address this, I conducted user research to identify the problems throughout the process and worked on optimizing the whole workflow to make AI dubbing more intuitive, ultimately improving conversion rates.
Product Designer
Role
July - August 2024
Time
1 Product designer;
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 at its early stage
What’s dubbing?
The process of replacing the original spoken audio in a video or audio with a different language.
Leverage AI
Speechlab uses generative AI to automate the traditional process, making it more efficient.
New Challenge
A new workflow to video production that is unfamiliar to enterprise and individual users.
Problem
Because the user flow is lengthy and difficult to navigate, significant drop-offs occur at every stage of the dubbing process.
Losing conversions in every funnel
Blockers in the User Flow
Research methods: Behavioral Analytics; Usability testing; Experience walkthrough.
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.)
Understanding
The blockers in the lengthy user flow
Current 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.
What stops users from dubbing?
Excessive Clicks
Even though transcription is a required part of the process, users must click a separate "Transcribe" button after uploading their file. This extra step creates friction in the workflow.
Hidden Next Steps
Users struggle to navigate the process due to the lack of clear prompts or visual feedback on the status of each step.
Unclear UX Writing
Technical terms and unclear labels across the interface make it difficult for users to understand their options and make decisions.
Non-English Speaker Friction
Hotjar data shows drop-offs among users relying on browser translation, likely due to unclear machine-translated content.
It wasn't the first place that I went, I was checking if there was anything else I needed to click.“
“I don't know what to do next. The projects don’t really look like something you can click on.”
“ I don't know what CPS (characters per second) stands for.”
Hotjar sampling shows that 17% of drop-offs occur among users relying on browser translation.
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.
Before
After
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.
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.