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