Редизайн RUTUBE Studio
RUTUBE Studio — ключевой инструмент для авторов по управлению контентом и монетизацией. За внешней простотой скрывались хардкод, технический долг, разрозненные макеты в Figma и непроработанные пользовательские сценарии.
Масштаб продукта и команды делал задачу особенно интересной — впереди предстояла большая работа.
Масштаб продукта и команды делал задачу особенно интересной — впереди предстояла большая работа.
// Представленные скриншоты отражают лишь верхнеуровневое понимание задачи, без детализации процессов и проблем
Контекст и причины
Нет единой точки истины
Параллельно существовало 5–7 UI-китов без единого стандарта и владельца
Отсутствие единой интерфейсной логики
Интерфейсы RUTUBE и Studio не были унифицированы; даже внутри Studio схожие механики работали по‑разному
Ограничения на реализацию пользовательских запросов
Исходя из исследований и поддержки, многие пожелания пользователей либо не могли быть реализованы по техническим/организационным причинам, либо внедрялись слишком медленно.
Накопленный хардкод
Большая часть интерфейсных решений была жёстко зашита и плохо масштабировалась
Задача
- Перейти на новую DS с доработками по всем разделам (постараться избегать доработки со стороны Backend)
- Все решения проверять через лабораторию или проводить самостоятельные исследования
- Проверить все компоненты DS (которые есть) и доработать
- Унифицировать дизайн похожих элементов и функционала
- Собрать библиотеку решений Studio на основе новой DS
- Провести DesignCheck совместно с тестировщиками и UX-редакторами
// Если описывать кратко, какая масштабная работа была проделана
Основные страницы
Новая загрузка видео
На основе исследований был разработан вариант, который максимально подходит авторам.
Добавлены новые статусы загрузки видео и подробная информация о причинах отклонения. Все необязательные настройки собраны в «Расширенные настройки», которые будут постепенно дополняться.
Добавлены новые статусы загрузки видео и подробная информация о причинах отклонения. Все необязательные настройки собраны в «Расширенные настройки», которые будут постепенно дополняться.
Унифицированный выбор контента
Для выбора и добавления видео теперь используется один сценарий с большой кликабельной зоной всей строки видео, без лишних переходов и ненужной мета-информации.
Все сценарии загрузки, дозагрузки, поиска контента и empty-стейты были унифицированы — не только в модальных окнах, но и во всём продукте.
Все сценарии загрузки, дозагрузки, поиска контента и empty-стейты были унифицированы — не только в модальных окнах, но и во всём продукте.
Новый элемент
Виджет отражающий статусы виде и переноса видео, что в нем может быть отражено:
А также следить за загрузкой и переносом видео можно из каждого раздела студии, вносить изменения и публиковать видео.
- статусы загрузки видео ;
- до 5 одновременно загружающихся видео;
- статусы переноса видео.
А также следить за загрузкой и переносом видео можно из каждого раздела студии, вносить изменения и публиковать видео.
Библиотека решений
По ходу перехода Studio на новую DS была собрана библиотека решений со всеми повторяющимися элементами
Результат
Студия получила обновлённый визуал. По результатам финального исследования дизайн получил наивысшие оценки среди респондентов.
Авторы отметили свежий внешний вид, исправление багов и расширение функциональности, что привело к значительному росту CSAT.
Команда получила полноценную дизайн-систему, сократила time-to-market, освоила использование лаборатории в полном объёме и перешла к проведению самостоятельных исследований.
Авторы отметили свежий внешний вид, исправление багов и расширение функциональности, что привело к значительному росту CSAT.
Команда получила полноценную дизайн-систему, сократила time-to-market, освоила использование лаборатории в полном объёме и перешла к проведению самостоятельных исследований.
Проблемы
В процессе перехода на новую дизайн-систему крупного продукта команда столкнулась
с рядом проблем — как мелких, так и критичных.
Основные проблемы:
Результат:
Несмотря на это, новая DS успешно вышла в продакшен. Команда приобрела ценный опыт
и новые навыки.
Я горд потраченным временем и всей командой, спасибо им за такой опыт, ведь результат превзошел наши ожидания 🤍
с рядом проблем — как мелких, так и критичных.
Основные проблемы:
- Оценка ресурсов дизайна и разработки;
- Не декомпозиция крупных задач;
- Постепенно сжимающиеся сроки.
Результат:
- Дизайнеры работали с высокой нагрузкой: для одной фичи приходилось поддерживать два макета, а небольшие изменения увеличивали время сохранения файлов (до 2 мин.);
- Редкие сценарии и мелкие детали, важные для пользователей, часто не были отражены;
- Большой список доработки после релиза
Несмотря на это, новая DS успешно вышла в продакшен. Команда приобрела ценный опыт
и новые навыки.
Я горд потраченным временем и всей командой, спасибо им за такой опыт, ведь результат превзошел наши ожидания 🤍
