The Hole

Платформа видеостриминга для Medium Quality — крупнейшего паблишера российского YouTube
Содержание

Клиент

Medium Quality

Крупнейший паблишер российского YouTube. Выпускает Внутри ЛапенкоЧто было дальшеBig Russian Boss Show и другие шоу.

Задача

Создать собственную платформу для видеостриминга

2020 год, контент потребляют и создают на мобильных устройствах, а YouTube до сих пор не умеет работать с вертикальными видео (уточнение: в 2021 у YouTube состоялся запуск Shorts в бете).

Medium Quality хочет создать стриминговую платформу, которая будет транслировать контент, удобный для просмотра на мобильном. Один из примеров такого контента — mobile first шоу, которые изначально снимаются под вертикальный формат.

Кроме того, MQ нужно выйти за рамки возможностей YouTube, чтобы делать максимально разнообразный контент: публиковать не только привычные видеоролики, но и интегрировать туда разные интерактивные механики.

Решение

Подготовились

Провели CJM-воркшоп и вместе с командой MQ построили карту путей пользователя: для каждой точки касания описали действия и психоэмоциональное состояние клиента, aha-моменты, барьеры и способы их снижения с помощью будущего продукта.

В процессе нашли одну из моделей монетизации — платные предрелизы шоу за неделю до премьеры на YouTube .

Разработали UX/UI

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

Название The Hole и брендинг появились позже. Название мы обыграли в UI-дизайне с помощью графики и анимаций.

Брендинг The Hole в интерфейсе приложения

Работу над пользовательским опытом начали с изучения UX других видеоплееров. Нашли инсайт, что перемотка вперед должна быть интервалами по 30 секунд, а назад — по 10: потому что вперёд мотают, если скучно, а назад — чтобы повторить или переслушать момент. Это решение, в итоге, оказалось не очень удобным для пользователей: выяснилось, что люди все-таки привыкли к равномерным интервалам.

Удобный плеер с рекомендациями

Выбрали Flutter

У MQ высокие требования к пользовательскому опыту: в приложении очень важны плавность работы UI, анимации перехода между экранами. Мы предложили разрабатывать приложение на кроссплатформенной технологии Flutter: с плавностью и анимациями у него всё хорошо, а ещё он даёт 40% экономии бюджета по сравнению с нативной разработкой.

Единственное, в чём у нас были сомнения, — как Flutter справится с видеоплеером. Поэтому за два дня мы собрали демо для iOS и Android: проверили скорость воспроизведения и перемотки HLS-видео, возможность построить кастомный UI поверх плагинных возможностей управления плеером. Всё получилось: мы убедились, что проблем не возникнет.

Написали бэкенд

Бэкенд сервиса мы разработали на Kotlin, Spring, Kubernetes. Это современный Java-стек, на котором мы разрабатываем большинство бэкенд-систем.

Веб-серверы и CDN (сети доставки и дистрибуции содержимого) размещены у российских хостинг-провайдеров.

  • Скорость ответа максимальная: чем ближе контент к потребителю, тем быстрее работа.
  • Сервису не страшны потенциальные блокировки AWS и Google Cloud.

Оптимизировали бэкенд под ожидаемую нагрузку

Мы рассчитали, что серверы The Hole должны выдерживать 25 тысяч запросов в секунду — тогда они справятся с целевой нагрузкой.

Провели нагрузочное тестирование и замерили, как деградирует производительность микросервисов под нагрузкой. Это позволило ещё до запуска проекта найти и устранить несколько «бутылочных горлышек». После оптимизации бэкенд уверенно справляется с плановой нагрузкой.

Чтобы прогнозировать нагрузку в изменяющихся условиях, скорость работы бэкенда мониторим также со стороны клиента. В приложении используется Firebase Performance Monitoring — с его помощью измеряется время каждого запроса к API. Так мы определяем проблемные места в продакшене и знаем, какие точки надо оптимизировать.

Сделали веб-приложение

Разработали веб-приложение для управления контентом на React + Ant Design. Приложение позволяет публиковать видео и отправлять пользователям уведомления, добавлять мета-информацию и получать статистику о просмотрах в реальном времени.

Экран шоу в веб-приложении

Внедрили аналитику

Нам нужно было реализовать аналитику в реальном времени и иметь возможность строить кастомные отчёты и визуализировать их в веб-приложении. Стандартные системы аналитики мы использовать не могли: данные в них появляются с временной задержкой.

Чтобы получать аналитику по видео в реальном времени, потребовалось развернуть собственное хранилище пользовательских событий. Мы использовали облачную OLAP базу данных от Яндекса — ClickHouse. Эта БД работает под капотом у AppMetrica.

Приложение отправляет пользовательские события о взаимодействии с видео в ClickHouse, а все остальные интересующие нас пользовательские события — в AppMetrica и Firebase Analytics. Это наш стандартный выбор для аналитики, такой связкой мы пользуемся и на других проектах.

Управление сериями на главном экране

Провели бета-тестирование

Прежде чем запустить сервис, мы проверили приложение на тестовой группе. MQ опубликовал в Instagram призыв участвовать в бета-тестировании — так мы получили 5000 бета-пользователей.

Результат

  • Стали для клиента надежным технологическим партнером
    MQ — творческие телевизионщики, продюсеры. Крутые креативные ребята, которые создали Comedy Club и успешные проекты на ТНТ и YouTube. Но они никогда до этого не делали IT-проекты, поэтому с техническими вопросами и дизайном помогли мы. Получился продукт на стыке двух миров. Гордимся им вместе с MQ.
  • Сделали проект в сжатые сроки
    Изначально сказали клиенту, что дизайн и проектирование займут месяц, реализация — три месяца. Так и получилось: мы соблюли сроки. Теперь на практике знаем, сколько времени занимает сделать свой YouTube.
  • Выдержали нагрузку после запуска
    К нам пришло 5 000 бета-тестеров
  • Есть длинный план развития сервиса на будущее
    В первую неделю после бета-релиза пользователи прислали десятки крутых идей по развитию проекта. Мы наладили механизм системного сбора обратной связи и вместе с клиентом определили приоритеты по внедрению новых функций.
  • Справились с челленджем: создали свой YouTube
    Это была интересная и сложная задача для команды инженеров. Архитекторам и разработчикам очень понравилось работать над ней, и теперь они хотят ещё 😉
Давайте создадим мобильное приложение под ваши задачи вместе
Обсудить проект
Обсудить проект