Как Nutnet создали MVP онлайн-плеера для школы танцев NextPro
В 2020 году школа танцев NextPro пришла к нам с запросом: сделать удобную платформу для онлайн-обучения. Они хотели проводить занятия в прямом эфире, загружать записи и давать ученикам доступ к урокам. Но после анализа мы поняли, что главное — не сложная система, а удобный видеоплеер, адаптированный под потребности танцоров.
Рассказываем, как шла работа, какие технологии использовали и что получилось в итоге.
Как все начиналось: запрос клиента
Школа танцев NextPro — одна из самых известных в Ижевске. У них собственное профессиональное пространство для занятий, сильные преподаватели и регулярные мастер-классы от звездных танцоров. Школа участвует в чемпионатах, проводит флешмобы и активно продвигает себя в соцсетях.
Когда началась пандемия, NextPro решили уйти в онлайн и попробовать запустить дистанционные занятия танцами. Первоначальной идеей было сделать полноценную онлайн-школу с личным кабинетом и календарем эфиров. Однако чёткого видения того, как должен работать онлайн-формат, у клиента на тот момент не было.
Главная сложность: в офлайне ученикам NextPro всегда помогали педагоги, можно было видеть себя со стороны и поправлять движения. В онлайн-режиме этих возможностей не хватало, а попытки просто публиковать уроки на YouTube или использовать Zoom не решали задачу.
Решение: команда Nutnet провела анализ и выяснила, что ученикам важно, чтобы видеоплеер позволял одновременно видеть инструктора и себя в камере с разных ракурсов (спереди/сзади). Так появился проект kamon.dance.
Первоначальный запрос был шире
Клиент хотел «и прямые эфиры, и записи, и календарь». Однако без понятной MVP-версии (минимально жизнеспособного продукта) проект рисковал утонуть в сложностях.
Основная идея: сначала быстро сделать удобный плеер как ядро платформы и проверить, будут ли онлайн-занятия востребованы.
Рассылка: как вести бизнес в России
Раз в неделю присылаем самые важные новости и лайфхаки для развития вашего бизнеса
Этапы реализации: как за 4 месяца сделали MVP и подготовили его к запуску
Чтобы сделать процесс разработки понятным и прозрачным, мы разделили работу на 6 последовательных этапов — от исследования аудитории до запуска готового продукта.
Этап 1. Анализ аудитории и поиск технологического решения. Сначала мы структурировали собранную информацию и детализировали задачи пользователей. Важно было понять, кто будет пользоваться платформой, какие у них задачи и какие технологии могут их решить.
Собрали User Flow для двух типов пользователей: постоянные и новые.
Провели интервью с людьми из каждой роли.
Изучили существующие решения: Zoom, YouTube, разные LMS. Поняли, что они не подходят танцорам. Вот почему:
- Нет интерактивности. Нет быстрой смены ракурсов, нельзя включать учителя и ученика одновременно.
- Ограниченное управление видео. Нет плавной перемотки, невозможно зациклить фрагмент или изменить темп.
- Неудобно заниматься с телефона. Маленький экран, ученикам сложно рассмотреть детали движений.
- Трудности с просмотром на ТВ. Люди часто ставят смартфон или ноутбук далеко, чтобы снять себя. В таком случае не получается качественно наблюдать за уроком на экране.
Мы увидели, что пользователям нужен не просто плеер, а инструмент для точного повторения движений. Он должен решать задачу «зеркала» и помогать ученику постоянно сверять себя с преподавателем. Эта идея и стала основой будущего продукта.
Этап 2. Проверка гипотезы и запуск MVP. Нужно было проверить, какие функции действительно помогают ученикам и без чего занятия онлайн будут некомфортными. Для этого создали минимально рабочую версию плеера (MVP). Плеер создавали не с нуля, а взяли open-source решение plyr.io и доработали его под задачи Kamon.
- Переключение ракурсов (вид спереди/сзади). Ученики выбирают, какой ракурс смотреть. Чтобы переключение ракурсов происходило мгновенно, мы не синхронизировали два видеопотока, а заранее нарезали видео по шаблону — два экрана склеены, а фронтенд просто показывает нужный кадр.
- Перемотка на ±15 секунд. Позволяет легко возвращаться к сложным моментам.
- Зеркальное отображение видео. Функция помогает повторять движения без путаницы с направлениями.
- Список глав урока. По нему ученик может быстро переключаться между частями занятия.
- Зацикливание. Можно повторять выбранный фрагмент видео для отработки движений.
- Изменение скорости воспроизведения. Замедление видео помогает разобрать сложные движения.
- Выбор качества видео. Система использует HLS-видеопоток, который подбирает оптимальное качество под скорость интернета. Видео воспроизводится стабильно даже при слабом соединении.
Далее загрузили в систему первый тестовый видеоурок, который специально сняли в NextPro. На этом этапе дизайн не делали — главное было убедиться в удобстве функционала.
Этап 3. Дизайн и сборка сайта по технологии PWA. После успешной отработки базовых функций плеера приступили к дизайну:
- подготовили макеты в Figma, следуя принципу Mobile First (сначала для смартфонов, затем сделали адаптацию под десктоп и ТВ);
- создали UI-kit, учитывая фирменные цвета NextPro;
- зарегистрировали домен kamon.dance, разработали логотип и иконки.
В это время NextPro разрабатывали свой фирменный стиль — параллельно с нашей работой. Поэтому у нас была задача со звездочкой: важно было учитывать их изменения и своевременно адаптировать интерфейс под новую айдентику.
Почему выбрали PWA
NextPro изначально хотели мобильное приложение, но для полноценного мобильного приложения под iOS и Android — нужен отдельный бюджет, долгий цикл разработки, согласование в сторах... Мы предложили альтернативу — PWA (Progressive Web App). Это гибрид между сайтом и приложением.
PWA позволил быстро протестировать идею и понять, нужен ли отдельный мобильный клиент. При этом, если в будущем NextPro решит расширить аудиторию через App Store/Google Play, бэкенд и фронтенд готовы к интеграциям.
А вот как все было реализовано с точки зрения разработки:
- Фронтенд (то, что видят пользователи) сделали на Nuxt 3 (VueJS), а для встроенного плеера использовали plyr.
- Бэкенд (серверная часть, которая отвечает за логику и работу данных) построен на Laravel 8 (Rest API).
- Для управления контентом и настройками в админке (панели управления сайтом) использовали Laravel Backpack.
Этап 4. Альфа-версия и тестирование. Когда дизайн был готов, а плеер работал стабильно, мы собрали альфа-версию. В неё добавили несколько тестовых уроков и открыли доступ ограниченному числу пользователей. Это были ученики и преподаватели NextPro, которые готовы были попробовать новый формат онлайн-занятий.
Что добавили:
Сплитскрин. Экран разделился на две части. В одной — преподаватель, в другой — ученик, которого снимает фронтальная камера.
Зеркальное отображение. Ученик мог увидеть себя так, как видит преподавателя. Это помогало правильно повторять движения, не путая стороны.
Раньше танцорам приходилось записывать себя отдельно, пересматривать и только потом корректировать движения. Теперь это можно было делать сразу в процессе занятия.
Платформа должна работать на смартфонах с разными экранами, планшетах и ноутбуках. Сплитскрин выглядел идеально на одном устройстве, но мог «поехать» на другом.
- настроили пропорции видео, чтобы картинка не искажалась;
- проверили, как выглядит интерфейс на телефонах с разными диагоналями;
- доработали синхронизацию плеера с фронтальной камерой, чтобы движения не запаздывали.
Этап 5. Тестирование и подготовка к запуску. Для первого тестирования платформы собрали фокус-группу из танцоров NextPro. Для них создали специальный раздел в админке и настроили доступ по логину и паролю — так мы могли контролировать тестирование и собирать точечную обратную связь.
На тот момент в Kamon уже работал сплитскрин. Но мы не стали сразу делать трансляцию на ТВ. Хотели сначала убедиться, что всё работает на телефонах и планшетах.
Что выяснилось в процессе теста:
- некоторые кнопки в приложении были не там, где их искали пользователи;
- в разных частях платформы проявились баги;
- ученики сами рассказали, какие уроки им нужны и сколько должно длиться занятие;
- большинство хотели заниматься именно на большом экране телевизора.
Самое ценное в таком тестировании — это фидбэк от людей, которые реально будут пользоваться платформой. Например, мы не планировали сразу делать вход по СМС. Но после тестов поняли, что это нужно в первую очередь — людям надоело запоминать пароли. В рамках MVP сделали код авторизации на почту — для экономии и минимализма.
Что сделали после тестов:
- упростили вход в приложение — теперь только по СМС;
- передали запросы на контент команде NextPro — они начали снимать новые уроки;
- взялись за разработку трансляции на экран телевизора (Airplay, Chromecast, Smart TV) — это оказалось самым частым пожеланием.
Этап 6. Подписка, личный кабинет и инструкции. После тестирования стало ясно: Kamon работает, ученики занимаются, но без платной подписки проект не станет самостоятельным бизнесом. NextPro решили монетизировать платформу. Также понадобились личный кабинет и инструкции для подключения к ТВ.
Ввели подписку. На старте решили подключить разовую оплату за доступ к курсу, без автопродления. Так проще: пользователи не боятся, что деньги спишутся неожиданно. Не нужно было сразу подключать сложные платежные системы. Если модель покажет себя хорошо, можно добавить рекуррентные платежи или пакеты подписки.
Создали полноценный личный кабинет. В нём пользователи могут:
- управлять подпиской — покупать доступ, продлевать его;
- следить за прогрессом — смотреть, какие уроки уже прошли;
- редактировать личные данные.
Добавили инструкции. В ходе тестов стало понятно: люди хотят смотреть уроки на большом экране, но не все знают, как его подключить. Поэтому добавили инструкции по подключению через AirPlay, Chromecast, HDMI. Теперь ученики могут поставить телефон на штатив, вывести урок на телевизор и заниматься в полный рост — почти как в настоящем танцевальном зале.
Так платформа вышла на новый уровень: пользователи получают удобный инструмент для занятий, а NextPro — дополнительный источник дохода и возможность расширять аудиторию.
Главные выводы из кейса
Не стоит делать всё сразу. Если бы мы начали с масштабной платформы с эфирами, CRM и календарями, проект мог бы затянуться на годы. Вместо этого сосредоточились на главном — удобном плеере, и уже через 4 месяца получили рабочий продукт.
Анализ аудитории раскрывает настоящие болевые точки. Оказалось, что без удобного плеера ученики попросту не хотят заниматься онлайн.
Open-source + кастомизация = быстрее и дешевле. Использовали готовые решения (plyr.io + HLS + Vue), но адаптировали их под задачи клиента. Это ускорило разработку и сократило расходы.
Что дальше
Команда Nutnet продолжает поддерживать и развивать проект Kamon. В планах:
- Запуск мобильных приложений для iOS и Android, если NextPro решит продвигаться через App Store и Google Play.
- Разработка Android TV-версии, чтобы уроки можно было смотреть сразу в приставках и смарт-телевизорах.
- Подключение автопродления подписки — чтобы монетизация была стабильной.
Мы не просто сделали IT-продукт, а помогли NextPro перевести бизнес в онлайн. Приложение запустилось, собрало первую пользовательскую базу и дало старт дальнейшему развитию платформы.
