DubSmart — дизайн и развитие AI-платформы для медиа
DubSmart объединяет инструменты для дубляжа, озвучивания, клонирования голосов, генерации изображений и субтитров в одной платформе. Я работала над развитием продукта в течение двух лет: проектировала новые функции, улучшала ключевые сценарии, поддерживала UI kit и помогала делать интерфейс более понятным, цельным и масштабируемым.
DubSmart уже был рабочим AI-продуктом с платными пользователями и одной из ранних реализаций AI Dubbing. По мере роста платформы интерфейс начал хуже справляться с новыми задачами: пользователям было сложно ориентироваться в функциях, сценарии становились перегруженными, а старые решения хуже подходили для масштабирования.
Команде нужно было не просто обновить внешний вид, а сделать продукт более понятным, профессиональным и готовым к росту.
Мой вклад в проект
Я проектировала ключевые пользовательские сценарии, редизайнила интерфейсы AI-инструментов и помогала сделать платформу более понятной, цельной и масштабируемой.
01
UX-сценарии AI-инструментов
Проектировала флоу для загрузки файлов, настройки параметров, обработки, редактирования и экспорта результата.
Что это дало
AI-сценарии стали понятнее и предсказуемее для пользователя.
AI workflows
02
Редизайн ключевых разделов
Работала над AI Dubbing, Text to Speech, Voice Cloning, Speech to Text, Text to Image, Speech Separator, дашбордами и страницами проектов.
Что это дало
Разные разделы платформы стали выглядеть и работать более цельно.
Product redesign
03
Дизайн-система и UI kit
Расширяла и поддерживала дизайн-систему: обновляла компоненты, состояния, паттерны и UI kit для новых сценариев.
Что это дало
Интерфейс стал консистентнее, а продукт — проще для масштабирования.
Design system
04
Дашборды и управление проектами
Улучшала структуру карточек проектов, статусы, действия и навигацию между разными типами задач.
Что это дало
Дашборд стал рабочим пространством, а не просто списком файлов.
Dashboard UX
Контекст и задача
DubSmart уже был рабочим AI-продуктом с пользователями и платными подписчиками, но по мере роста платформы интерфейс начал хуже справляться с новыми задачами. В продукт добавлялись новые функции, сценарии становились сложнее, а пользователям было не всегда легко быстро найти нужный инструмент и пройти путь до результата.
Команде нужно было не просто обновить внешний вид интерфейса, а сделать продукт более понятным, профессиональным и готовым к масштабированию. Важно было сохранить существующую логику сервиса, но при этом улучшить структуру ключевых сценариев, навигацию, визуальную консистентность и работу с новыми функциями.
Главная задача — сделать DubSmart удобнее для регулярной работы: от выбора AI-инструмента и загрузки материала до обработки, редактирования и получения результата.
Что нужно было улучшить
Существующий интерфейс уже закрывал базовые задачи продукта, но хуже подходил для следующего этапа роста. Пользовательские сценарии становились сложнее, количество инструментов увеличивалось, а интерфейсу нужно было поддерживать больше действий, состояний и типов проектов.
01
Сложность интерфейса
Пользователям было не всегда просто понять, где находится нужная функция и как быстрее перейти к результату.
02
Устаревшая визуальная система
Продукту нужно было выглядеть более современно, профессионально и убедительно для платных пользователей и крупных клиентов.
03
Слабая масштабируемость
Старые решения хуже подходили для добавления новых функций, инструментов и состояний интерфейса.
04
Разрозненность сценариев
Разные разделы платформы нуждались в более единой логике, чтобы продукт ощущался цельной системой.
Ключевое решение 01
AI Dubbing Studio: от набора настроек к рабочей среде
AI Dubbing был одним из самых сложных сценариев в продукте. Старый интерфейс решал базовую задачу, но с ростом функциональности стал хуже масштабироваться: текст, перевод, спикеры, видео и настройки воспринимались как отдельные части, а не как единый рабочий процесс.
В новой версии интерфейс был переосмыслен как студия редактирования: с таймлайном, видео-превью, дорожками, текстовыми блоками и более явной связью между переводом, аудио и результатом.
Old Design New Design
Что не работало в старом дизайне
Интерфейс выглядел как набор отдельных полей и настроек, а не как цельная рабочая среда.
Сценарий плохо масштабировался под новые функции и более сложные задачи.
Видео, текст, перевод и настройки воспринимались как разрозненные части.
Пользователю было сложнее контролировать процесс и понимать структуру проекта.
Что улучшилось в новой версии
Интерфейс стал больше похож на полноценную рабочую студию.
Появился таймлайн, который помогает видеть структуру проекта во времени.
Видео-превью, дорожки и текстовые блоки стали частью единого процесса.
Пользователь получил больше контроля над редактированием и результатом.
Ключевое решение 02
Dashboard: от витрины функций к рабочему пространству
Вместе с ростом DubSmart нужно было переосмыслить dashboard. Старая версия больше работала как витрина основных инструментов: пользователь видел доступные функции, но структура хуже подходила для регулярной работы с проектами, статусами и новыми сценариями.
В новой версии dashboard стал более рабочим и масштабируемым: навигация стала понятнее, инструменты — лучше организованными, а проекты и их статусы — заметнее. Интерфейс стал больше похож на пространство для ежедневной работы с AI-проектами, а не просто на стартовый экран продукта.
Old Design New Design
Что не работало в старом dashboard
Главный экран больше напоминал витрину функций, чем рабочее пространство.
Карточки инструментов занимали много внимания, а проекты выглядели второстепенно.
Навигация хуже масштабировалась под рост количества AI-инструментов.
Интерфейс выглядел менее зрелым для продукта с платными пользователями и крупными клиентами.
Что улучшилось в новой версии
Dashboard стал рабочим пространством для управления AI-проектами.
Навигация стала более структурированной и готовой к добавлению новых инструментов.
Пользователь быстрее видит актуальные проекты, их статусы и доступные действия.
Интерфейс стал выглядеть более профессионально, цельно и подходяще для регулярного использования.
01
Масштабируемая навигация
Боковая навигация помогла организовать растущее количество AI-инструментов и сделать нужные разделы быстрее доступными.
02
Фокус на проектах
Интерфейс сместил акцент с демонстрации функций на проекты, статусы и быстрые действия, необходимые в ежедневной работе.
03
Понятная иерархия
Главные действия, список проектов и навигация стали визуально яснее, благодаря чему интерфейс проще считывается и лучше направляет пользователя.
04
Более зрелый образ продукта
DubSmart стал выглядеть более профессионально и убедительно для платных пользователей, команд и крупных клиентов.
Ключевое решение 03
Расширение функциональности без усложнения интерфейса
В DubSmart регулярно появлялись новые функции и сценарии, поэтому важно было добавлять их так, чтобы интерфейс не становился сложнее для пользователя.
Я работала над тем, чтобы новые инструменты логично встраивались в продукт: через пользовательские сценарии, UI-компоненты, состояния проектов и отображение в dashboard.
Как новая функция встраивается в продукт
Новая функция
→
UX Flow
→
UI Components
→
Project State
→
Dashboard Integration
Схема показывает, как новая функция проходила путь от отдельного сценария до полноценной части платформы.
01
Не отдельный экран, а часть продукта
Новая функция должна была работать не изолированно, а как часть общей платформы: с понятной навигацией, едиными паттернами и связью с проектами пользователя.
02
Сценарий от начала до результата
Для каждой функции важно было продумать полный путь: как пользователь создаёт проект, какие параметры выбирает, что происходит во время обработки и как он получает результат.
03
Масштабирование без визуального хаоса
Новые инструменты должны были использовать общие компоненты, состояния и правила интерфейса, чтобы продукт оставался консистентным при росте функциональности.
Результат
Работа над DubSmart помогла перевести интерфейс платформы на более зрелый уровень: продукт стал выглядеть современнее, профессиональнее и лучше подготовленным к росту функциональности.
Ключевые сценарии стали понятнее для пользователя: AI Dubbing был переосмыслен как полноценная рабочая студия, dashboard стал удобнее для управления проектами, а новые функции начали встраиваться в продукт через более единую систему сценариев, компонентов и состояний.
Для меня этот проект стал важным опытом работы с реальным AI-продуктом, где дизайн должен был решать не только визуальные задачи, но и помогать продукту масштабироваться, сохранять понятность и поддерживать доверие пользователей.
01
Более понятные AI-сценарии
Пользовательский путь стал яснее: от выбора инструмента и загрузки материала до обработки, редактирования и результата.
02
Более зрелый интерфейс
Платформа стала выглядеть современнее и профессиональнее для пользователей, команд и крупных клиентов.
03
Масштабируемая продуктовая система
Новые функции стало проще встраивать в интерфейс через общие паттерны, состояния и компоненты.
04
Единый пользовательский опыт
Разные инструменты платформы стали ощущаться как части одного продукта, а не как отдельные несвязанные разделы.
