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.