Subtitle Pro

TIMELINE

Nov 2023 - Dec 2024

PLATFORM

Canva Web Application

MY ROLE

Product Designer

Timeline

Nov 2023 - Dec 2024

PLATFORM

Canva Web Application

MY ROLE

Product Designer

Impact

70K

70K

acquired users in one year

acquired users in one year

46%

46%

increase in paid user retention by adding new features

increase in paid user retention by adding new features

40%

40%

daily app usage increase after latest update

daily app usage increase after latest update

Overview

Content creators using Canva had no easy-to-use, customizable video subtitling tool in the marketplace. Existing solutions were too complex, lacked customization, or forced creators to leave Canva entirely. I designed Subtitle Pro, an AI-powered app that lets users add and customize subtitles in 99+ languages, with live previews and integration with Canva.

I led end-to-end design from concept to launch, including competitive analysis, user research, UI design, developer handoff, and marketing materials. The app launched in mid-2024 and reached 45,000 users in 6 months.

My Role

I led end-to-end design for Subtitle Pro as the sole designer, working directly with the founder from concept to launch.

  • Conducted competitive analysis and developed user personas

  • Designed information architecture and user flows

  • Created wireframes and high-fidelity UI in Figma

  • Designed logo and marketing visuals for Canva marketplace listing

  • Handled developer handoff and stayed involved post-launch for iterations

Research & Discovery

I ran a competitive analysis on existing subtitle tools in the Canva Marketplace. Competitors either lacked subtitle customization or seamless integration into their projects. This validated our opportunity to build something highly customizable while maintaining an intuitive integration with Canva.

I created two user personas to guide design decisions. The first was content creators who needed speed with templates and one-click solutions. The second was brand focused creators who needed control over fonts, colors, and animations to match their brand guidelines. These personas guided decisions around templates and customization options.

I ran a competitive analysis on existing subtitle tools in the Canva Marketplace. Competitors either lacked subtitle customization or seamless integration into their projects. This validated our opportunity to build something highly customizable while maintaining an intuitive integration with Canva.

I created two user personas to guide design decisions. The first was content creators who needed speed with templates and one-click solutions. The second was brand focused creators who needed control over fonts, colors, and animations to match their brand guidelines. These personas guided decisions around templates and customization options.

Design Challenges

01 / Extensive Customization Within a Minimal Interface

Subtitle Pro needed to do a lot: offer deep customization, stay clean and minimal, keep the flow short enough that users wouldn't drop off, and meet Canva's design system requirements. Getting all of those things to work together was the real challenge

Solution

Instead of showing all customization options at once, I organized them into collapsible dropdown menus. Users saw a clean interface by default but could expand sections when they wanted more control. I also added a live preview panel so users could see changes instantly without generating the full video, keeping the experience fast and reducing unnecessary steps.

For users who wanted to skip customization entirely, I designed a "Choose Style" screen with pre-made templates as a quick starting point. This gave users two paths: quick and simple, or detailed and custom.

02 / Optimizing Multi-Step Flow with Technical Constraints

The app required two unavoidable loading stages built into the flow. The first happened after users chose their style, when the app needed to transcribe the spoken audio so users could edit it. The second happened when users clicked "Create Video," which is when the credit was used, and the final video was rendered.

Two loading screens in a single flow aren't ideal, so my goal was to make them feel as natural as possible.

Solution

The key design decision was combining "Customize Design" and "Edit Captions" onto one screen with a toggle, which hides the first loading state. This meant users could switch between customizing their style and editing their transcription while the audio was being processed in the background, completely hiding the first loading state.

When users clicked "Edit Captions" during the loading state, I added the message "You can customize the design while you wait," turning a technical constraint into productive time.

For the second loading state, users were waiting for their final video so there was no way to hide it. I kept the messaging clear and reassuring, "Get excited, we're creating your video!", with an estimated wait time so users knew what to expect.

03 / Supporting Videos Without Spoken Words

After launch, we noticed users were uploading videos without any spoken words. In these cases, we determined that users wanted to add their own subtitles manually. The app relies on AI to detect audio, so when there was nothing to transcribe, users were spending money on videos that came out completely blank and had no way to fix it.

Solution

I designed an error state on the "Edit Captions" screen that appeared when no audio was detected. A clear message at the top told users exactly what to do: "No subtitles found in your video. To create your video, add custom text." I also highlighted the input fields they needed to fill in to progress so users knew exactly where to go and what to add.

This prevented users from creating blank videos and gave them a clear path forward, even without spoken audio.

Testing across different subjects like Biology, History, and Psychology showed that 7 out of 8 students could successfully navigate the core features, which proved the interface hid the system's complexity while staying intuitive for students.

Solution

I designed a modular component system that could accommodate different content types and assignment structures while keeping the student experience simple. I created a consistent left-hand panel that gave students access to Progress, Resources, and Skillset no matter what type of assignment they were working on. I also added collapsible sections so students could hide content if it became distracting or overwhelming.

Handoff

I handed off all designs to the engineer and founder as a full prototype in Figma, including wireframes and a complete user flow. I stayed involved throughout development to answer questions and ensure accurate implementation.

Visual Design

In addition to the app itself, I designed the logo and all promotional materials for the Subtitle Pro listing on the Canva App Marketplace, including thumbnails and marketing images to communicate the app's key features to potential users.

Outcomes & Impact

Subtitle Pro launched in mid-2024 on the Canva App Marketplace and reached 45,000 users in its first 6 months. The app filled a clear gap in the marketplace and continues to grow.

I still work with the founder, helping with new feature requests and design updates as the product evolves. The founder's next steps include making Subtitle Pro a pro feature and eventually building it into a standalone web app.

Key Deliverables:

  • User personas and competitive analysis

  • Information architecture and user flows

  • Wireframes and high-fidelity prototypes in Figma

  • Logo and marketing visuals for Canva App Marketplace listing

LinkedIn

Discord

Twitter

LinkedIn

Discord

Twitter

LinkedIn

Discord

Twitter