Флоу оформления подписки Rutube Premium

Обзор

Редизайн страницы выбора тарифа, оплаты и управления подпиской для сервиса с миллионной аудиторией.

Проблема

Пользователи бросали оформление подписки, не доходя до оплаты: тарифы описаны неявно, условия автопродления скрыты в мелком шрифте, нет ощущения завершённости после оплаты.

Rutube: подписка

Процесс

Схема шире экрана — разведите пальцы, чтобы приблизить

Это не разовая схема под этот кейс, а процесс, который я выстроил для себя и повторяю в большинстве проектов. Discover и Define идут до первого эскиза, чтобы решение отвечало на подтверждённую проблему, а не на предположение. Test стоит до Handoff: если гипотеза не подтвердится на прототипе, дешевле вернуться в Design, чем переделывать готовую документацию. Design Review в конце служит контрольной точкой: решение сверяется с командой, прежде чем считать его завершённым.

Rutube: подписка

Конкуренты

Прямые

видеохостинг
User Generated Content
просмотр без подписки
подписка = отключение рекламы + плюшки

Непрямые

OTT (Over-The-Top) / SVOD (Subscription Video On Demand)
non-UGC
подписка = обязательный вход

Контекст входа	Навязчивость	Понятность ценности	Прозрачность цены	Пробный период	Кол-во шагов до оформления	Удобство оплаты	Понятность отмены

—	—	—	—	—	—	—	—

хорошо реализовано приемлемо, но с нюансами плохо или отсутствует — не применимо (нет подписки как таковой)

Rutube: подписка

Отзывы

Нравится	Не нравится	Игнорят	Про подписку
огромный выбор контента удобный плеер лучшие рекомендации	реклама, «дожим на премиум» политика модерации иногда сбоит в РФ	умные настройки	ценят за отсутствие рекламы + офлайн-функции
доступность эксклюзивный ру контент VK экосистема	нерелевантные рекомендации реклама глюки, баги, лаги	офлайн-функции	—
кино+всё на свете качество контента удобно яндекс юзерам	слабый каталог дорогие доп пакеты автопродления/списания	тонкие настройки плеера подписка ≠ всё включено	выгодно, если Плюс и так нужен
большой каталог удобство фильтрации акции/промо	«неожиданные списания» вторая касса (часть контента платная даже при подписке)	отключение автопродления	скидки «ловушка на автоплатёж»
качество контента широкие разделы экосистемные пакеты	вторая касса автозапуск трейлеров «было дёшево, стало дорого» (эффект акции)	бесплатный контент «подписка + отдельные покупки» — это норм	ожидание «всё включено»
дёшево эксклюзивы ТНТ	узкий контент, подписка ради одного сериала слабый поиск	нишевый сервис, не универсальный кинотеатр	качество приложения ≠ цена автопродление раздражает
все архивы ТВ в одном месте бесплатно	плохой UX/UI тонна рекламы поломки	объём архива доп разделы	—

Приоритизация
по MoSCoW

Must Have

Понятность ценности
Free vs Paid
Прозрачность цены
Понятность отмены

Should Have

Контекст входа
Навязчивость
Кол-во шагов до оформления

Could Have

Пробный период
Удобство оплаты

Rutube: подписка

Архетипы

ЦА

Основная аудитория — 25–34: платёжеспособна, зрела в цифровых продуктах, уже привыкла жить на подписках. Но внутри неё — не один сценарий поведения.

Метод

Глубинные интервью с представителями аудитории показали: за одинаковым действием — оформлением подписки — стоят разные мотивы, страхи и ожидания.

Рациональный контролёр

Контекст

Использует видеосервисы регулярно
Цифрово грамотен
Замечает логику интерфейса
Следит за расходами

Мотивация

Хочет пользоваться подпиской осознанно, при полном контроле

Ключевая потребность

Прозрачность и управляемость

Страх

Автосписание без уведомления
Повышение цены без уведомления
Скрытые условия

Поведенческий паттерн

Частично читает интерфейс
Замечает несоответствия
Раздражается при отсутствии логики
Сравнивает бесплатное и платное
Ищет подтверждение ценности

Критерий успеха

Понимает, за что платит
Видит дату списания
Может отменить в 1–2 клика
Видит явное сравнение тарифов

Прагматик «без лишнего»

Контекст

Видео = вечерний отдых
Не хочет разбираться

Мотивация

Убрать рекламу и смотреть спокойно

Ключевая потребность

Простота

Страх

Навязчивость, апселлы, лишние шаги

Поведенческий паттерн

Не читает текст
Принимает быстрые решения
Бросит процесс при фрустрации

Критерий успеха

Минимум шагов
Один тариф
Без давления

Rutube: подписка

4 силы

Рациональный контролер

Push (что толкает от бесплатной версии)

Раздражающая реклама
Ограничения
Отсутствие контроля
Невозможность точно понимать, что получаешь

Pull (что привлекает к подписке)

Отсутствие рекламы
Эксклюзив
Чёткое описание преимуществ
Прозрачные условия
Возможность управлять подпиской
Видимая дата следующего списания

Anxiety (что пугает)

Автосписание без уведомления
Повышение цены после пробного периода
Мелкий текст
Скрытые условия
Неочевидное управление подпиской

Habit (что удерживает в бесплатной модели)

Можно и так смотреть
Лень разбираться
Привычка обходиться без подписки
Альтернативные сервисы

Прагматик «без лишнего»

Push

Слишком много рекламы
Неудобство

Pull

Быстро убрать рекламу

Anxiety

Апселл
Сложный флоу
Телефон / спам

Habit

Бесплатно тоже работает
Не хочет тратить время

Вывод

Главный Push — раздражающая реклама

Главный Pull — отсутствие рекламы + ощущение контроля

Главная Anxiety — автосписание и непрозрачность

Главная Habit — «и так можно бесплатно»

Rutube: подписка

CJM (контролёр)

Этап	Триггер	Страница подписки	Выбор тарифа	Ввод карты	Завершение оплаты	После оплаты
Действия пользователя	Видит рекламу / ограничение	Изучает условия подписки	Анализирует доступные тарифы	Вводит платёжные данные	Завершает оплату	Возвращается к просмотру. Получает напоминание о списании. Решает продлевать или нет
Мысли	Надоело. Возможно, стоит оформить подписку	Что входит? Есть ли подвох?	Почему мне предлагают именно это? В чём разница?	Когда спишут? Смогу ли отменить? Не поднимут ли цену?	Это всё? Где подтверждение?	Реклама пропала. Когда следующее списание? Стоит ли продлевать?
Эмоции	Раздражение	Настороженность	Сомнение	Тревога, настороженность	Нейтральность, лёгкое недоумение	Облегчение в начале. Тревога ближе к дате списания, если нет напоминания
Боли	Реклама мешает	Перегруз текста Нет чёткого сравнения бесплатного и платного Условия описаны неявно	Нет объяснения различий Нет явной логики выбора Несколько вариантов без приоритета	Автопродление включено по умолчанию Нет напоминания о списании Нет видимой информации об управлении подпиской	Нет ощущения завершённости Неочевидно, когда следующее списание Неочевидно, где управлять подпиской	Нет напоминания о списании. Сложно найти, где отменить. Не понятно, какие плюшки даёт подписка
Возможности для улучшения	Чётко показать ценность подписки	Чёткая визуальная иерархия Таблица free vs premium Прозрачная стоимость без мелкого текста	Обоснование рекомендуемого тарифа Один основной вариант + альтернативы Краткое объяснение «кому подойдёт»	Явная дата следующего списания Информация о напоминании до списания Видимая ссылка «управлять подпиской»	Яркий экран подтверждения Дата следующего списания Кнопка управления подпиской	Push/email с напоминанием за 3 дня. Видимая ссылка «управление подпиской». Информация о следующем списании в самом success-экране

Rutube: подписка

CJM (прагматик)

Этап	Триггер	Страница подписки	Выбор тарифа	Ввод карты	Завершение оплаты	После оплаты
Действия пользователя	Смотрит видео, сталкивается с рекламой	Переходит на страницу оформления	Быстро сканирует варианты	Вводит карту	Завершает оплату	Возвращается к просмотру, про подписку больше не думает
Мысли	Да сколько можно уже	Где кнопка?	Мне просто без рекламы, остальное не важно	Быстрее бы закончить	Теперь рекламы не будет?	Наконец без рекламы, красота
Эмоции	Раздражение	Нетерпение	Сомнение, если слишком много вариантов	Раздражение, если шагов больше одного-двух	Облегчение, если эффект моментальный	Облегчение, дальше — ноль внимания к теме
Боли	Реклама мешает	Перегруз текста Несколько тарифов Непонятно, что выбрать	Избыточный выбор Апселл Сложная структура	Лишние поля Телефон Подписки сверху Предложения «улучшить тариф»	Непонятно, активировалась ли подписка Нет явного подтверждения	Не отслеживает списания, узнает о продлении только по факту в банке, не помнит что и как отменить если понадобится
Возможности для улучшения	Дать быстрый, очевидный переход к подписке без лишнего текста и объяснений	Один основной тариф, крупная кнопка, минимум второстепенной информации на первом экране	Чётко обозначить базовый сценарий: «Без рекламы — X ₽ в месяц». Всё остальное — вторично	Минимум полей, линейный процесс, без апселлов на этом этапе	Мгновенное исчезновение рекламы + короткий, понятный success-экран	Одно ненавязчивое уведомление сразу после оплаты (без рекламы + где отменить), дальше не трогать

Rutube: подписка

IA

Главная

Персонализированный контент

Каталог

Shorts

Подборки

Обзор

Поиск

Видео

Каналы

Shorts

Плейлисты

Каталог

Фильмы

Сериалы

Телешоу

Спорт

Музыка

Подкасты

Детям

Студия

Загрузить видео

Загрузить Shorts

Создать трансляцию

Мое

Подписки

История просмотра

Плейлисты

Смотреть позже

Комментарии

Понравилось

Настройки

Мои данные

Уведомления

Устройства

Подписки

Покупки

Способы оплаты

Rutube: подписка

JTBD

Контролер

Когда я открываю страницу подписки и не понимаю условий, я хочу найти чёткую информацию о цене, дате списания и отмене, чтобы не чувствовать, что меня обманули.

Когда я только что оплатил подписку, я хочу сразу увидеть дату следующего списания и быстро найти управление, чтобы контролировать ситуацию.

Когда я выбираю тариф и не понимаю, чем платное отличается от бесплатного, я хочу увидеть явное сравнение, чтобы заплатить осознанно, а не вслепую.

Прагматик

Когда реклама прерывает просмотр, я хочу убрать её за минимум шагов, чтобы сразу вернуться к видео без фрустрации.

Когда я вижу страницу оформления, я хочу увидеть один понятный тариф и сразу оплатить, чтобы не разбираться в вариантах и не тратить время.

Когда я только что оплатил подписку, я хочу сразу увидеть, что реклама пропала, чтобы убедиться, что всё сработало, и больше не думать об этом.

Rutube: подписка

User-flow

Диаграмма шире экрана — разведите пальцы, чтобы приблизить

Rutube: подписка

UI

[1]

Просмотр без подписки

[2]

Выбор тарифа

[3]

Оплата

[4]

Успешная оплата

[5]

Ошибка оплаты

[6]

Просмотр с подпиской

[7]

Управление подпиской

Rutube: подписка

Тестирование

Гипотеза

Если сделать условия подписки понятными сразу — явное сравнение тарифов, видимая дата списания, ощущение завершённости после оплаты — пользователи перестанут бросать оформление, а сам процесс станет ощутимо проще. Проверил на модерируемом тестировании кликабельного прототипа: респонденты те же, что и на этапе исследования — это позволило им сравнить старый флоу Rutube и новый прототип на собственном опыте.

№	Шаг флоу	Прошел?	Время	Ошибки и застревания	Цитаты и наблюдения
1	Видео и реклама-баннер	Да	28 сек	Потыкал на кнопку лайка, попытался закрыть плашку снизу	«О нет, черт, реклама. Но я хочу ее пропустить, а просто пропустить я ее не могу»
2	Выбор тарифа	Да	10 сек	—	«Так удобно, потому что здесь есть выгода для меня». Сразу выбрал годовой тариф, оценил сравнение цен
3	Платежная форма	Да	20 сек	—	Сначала выбрал банковскую карту, ввел данные
4	Error-экран	Да	5 сек	Не растерялся	«Не удалось обработать данные карты — давайте попробуем еще раз, но уже наверное лучше СБП». Сразу решил сменить способ оплаты
5	Повторная оплата	Да	5 сек	—	Через СБП — успешно
6	Success-экран	Да	15 сек	—	«Подписка активна, реклама отключена, вижу следующее списание. Даже напоминалка будет — зашибись». Нажал «Продолжить просмотр»
7	Управление подпиской	Не перешел	—	—	Заметил кнопку «Управление подпиской», но не перешел: «Я понимаю что собой представляет управление подпиской — мне на данный момент неактуально»

Rutube: подписка

Инсайты

Флоу подтвердил гипотезу: боли обоих архетипов закрыты, критерии успеха выполнены на 100%.

Архетипы работают как рамка, но не жестко: поведение может отличаться от изначальной классификации в зависимости от контекста.

SEQ 6.3 из 7, SUS 91.7 из 100 — высокая простота и удобство использования.

Найдены две точки роста: error-экран воспринимается как тупик, кнопка отмены на success-экране визуально слабая.

Прозрачность условий и явный контроль над подпиской сняли главный страх — скрытые списания.

Rutube: подписка

Подготовка к разработке

Чтобы решение было пригодно для имплементации, собрана двухуровневая система токенов и UI kit.

Rutube: подписка

Результаты

Кейс прошел полный цикл: от исследования до системы, готовой к разработке.

Что сделано

Собрана база исследования: интервью, конкурентный анализ, приоритизация по MoSCoW
Сформированы два поведенческих архетипа на основе паттернов
Спроектированы информационная архитектура и CJM

Отрисованы ключевые экраны: выбор тарифа, оплата, успех, ошибка, управление подпиской
Собрана двухуровневая система токенов и UI kit из 7 секций
Проведено юзабилити-тестирование: гипотеза подтверждена, ключевые боли архетипов закрыты (SUS 91.7, SEQ 6.3)

Rutube: подписка

Флоу оформления подписки Rutube Premium

Приоритизацияпо MoSCoW

Вывод

Приоритизация
по MoSCoW