Subtitle Pro

AI Powered Subtitle Application in Canva

Created a subtitle application that allows users to seamlessly add subtitles to any video. Designed with an intuitive, minimalist, clean design that utilizes Canvas Design System components and accessibility guidelines.

Year 2023 - 2024

Role UX/UI Designer

Client Freelance

About Subtitle Pro

Subtitle Pro is a Canva application designed to help content creators with AI-powered, automatic, and professional-quality subtitles. The idea for this app came from an unmet need within the Canva marketplace: an easy-to-use, highly customizable, and fully integrated subtitling tool.

This application was built to bridge that gap, streamlining the subtitling process so users could effortlessly add captions directly to their Canva projects. It offers a wide range of options for extensive customization, allowing users to personalize colors, fonts, and animations with a live preview. With the use of AI, the app can support over 99 languages, making content accessible to a global audience.

My Role

I was responsible for the end-to-end design for Subtitle Pro. Guiding the product from the initial concept to the final user interface, I used a user-centered approach from discovery to handoff.

The main goal was to create a clean, minimalistic design with an intuitive user experience, with a key focus in providing users with extensive customization while minimizing task completion time and the overall number of steps.

To achieve these goals, my process involved user research and analysis, where I conducted competitive analysis and developed user personas. I then designed user flows and information architecture to structure the application. Moving into ideation, exploring layout solutions through sketching and wireframing, to then creating high-fidelity prototypes. Throughout the entire process, I worked closely with the product founder, ensuring our design choices aligned with the product vision and business goals. I also designed the marketing visuals for the app's Canva page

Challenge 1

Create a highly customizable application with a minimal and intuitive user interface.

This application needed to offer the most extensive customization on the market, allowing users to effortlessly personalize colors, fonts, and animations with a live preview, as well as seamlessly edit their transcriptions. The core challenge was achieving this complex functionality while also minimizing the number of steps and screens required to complete the task, all while integrating with Canva’s design system.

My Solution:

I designed the interface using a progressive disclosure model. Instead of presenting all customization options on a single, complex screen, I organized them into logical, collapsible dropdown menus. This approach provides full customization in a minimal view and is compatible with Canva’s guidelines.

A central feature of the design was the live preview panel. This allowed users to see the immediate effect of their customization choices without having to generate the video, providing instant feedback and reducing the need for constant back-and-forth between screens.

Challenge 2

Optimizing a Multi-Step User Flow with Technical Constraints

While designing for a minimal interface, a significant challenge was optimizing the user flow to reduce the number of steps a user must take to complete the subtitling task. This was particularly complex due to technical requirements, as the process required two separate loading stages: one for transcribing the audio and a second for rendering the final video. My design solution needed to feel fast and efficient, even with these required pauses in the user journey.

My Solution:

I designed a new page titled “Edit Captions” to allow users to either edit their existing captions that were detected by out AI, or add new captions manually.

If a video was uploaded without any spoken words, an error would appear letting the user know they needed to manually add in their own captions. The page provides a clear error message: "No subtitles found in your video. To create your video, add custom text.” This design intentionally blocks them from proceeding until they manually add text. This prevents the user from creating a blank video.

My Solution:

To minimize the screen count, I combined the "Customize Design" and "Edit Captions" stages onto a single screen. This allowed users to jump directly between customizing the visual style and editing the text, eliminating the need to navigate between two separate pages and streamlining the core editing loop.

I designed the initial "Choose Style" screen to empower users with a fast path to completion. By providing a selection of pre-designed templates, users could quickly pick a style and skip the detailed customization options.

The two loading stages were unavoidable; therefore, I designed them to be as informative and reassuring as possible, letting the user know exactly what is taking place at each stage.

Challenge 3

Creating Videos Without any Spoken Words

Post-launch, we identified a user scenario where creators were uploading videos to Subtitle Pro that did not contain any audio, therefor our AI could not detect any spoken words, and their video was created without any captions. After discovering this, we learned that these users wanted the ability to add their own captions manually to their video’s. The challenge was to then design a clear and intuitive option for users to manually add their own captions.

Marketing & Visual Design

Beyond the core application experience, I also designed the promotional materials and logo for the Subtitle Pro app listing on the Canva App Marketplace. The goal of these thumbnails was to effectively communicate the app's key benefits and features to potential users at a glance. The designs were created to be visually striking and informative, using a clean layout that aligns with both the app's aesthetic and Canva's brand.

Key Features Highlighted

  • Automatic Subtitling: Highlighting the ease of adding captions with a single click.

  • Live Preview & Customization: Visually demonstrating the ability to customize fonts, colors, and animations.

  • Multi-Language Support: Clearly showing the app's support for a wide range of languages to appeal to a global audience.

  • Powerful Templates: Illustrating the quick-start options for users who want a professional look without extensive customization.

Project Conclusion

The Subtitle Pro app has been live on the Canva App Marketplace for 6 months now, and it’s been a huge success. With over 45,000 users, people are finding the app valuable, and the design is working! By navigating technical constraints and addressing unexpected user behavior, we successfully delivered an application that not only met the original product vision but also positioned the product for future growth.

As for deliverables, I provided the founder and engineer with the following: user stories, information architecture, wireframes, user flows, and a high-fidelity prototype within Figma.

I continue to communicate with the founder, tracking the product's growth and remaining available to help with new user behaviors and feature requests. The founder's vision for Subtitle Pro includes making it a pro feature to maximize revenue and eventually transitioning it into a standalone web application to allow for more users and expanded functionality.