Перезапуск культурной платформы «Синхронизация»

Синхронизация

Осенью ’24 года к нам обратилась директор по продукту «Синхронизации» Таня Лунина.

До пандемии они собирали людей офлайн и проводили увлекательные лекции про искусство, науку и историю. Теперь они делают лучшие онлайн-лекции на русском языке. Основное отличие от конкурентов — качество. Лекторы с профильным образованием и большим опытом, профессиональная съемка и монтаж видео. В общем, лекции, на которые сложно попасть вживую, доступные онлайн.

При этом пользовательский опыт оставлял желать лучшего. Курсы было сложно найти, была даже проблема с тем, чтобы продолжить смотреть с того момента, где остановился. За рекордные 3 месяца мы вместе с Синхронизацией переделали «движок» и запустили «Netflix для культурного контента». Сейчас расскажем, как мы это сделали.

Проблема

У Синхронизации хороший продающий лендинг, проблемы начинаются после регистрации, в личном кабинете:

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

Конечно, всё это отражалось в аналитике — 15% купивших подписку пользователей не добавляли себе ни одного курса, а продлевали подписку только 20%.

Обычно перезапуск подобной системы занимает 6–12 месяцев. У «Синхронизации» не было столько времени — команда хотела успеть к сезону в новом году.

Решение

Сначала наш архитектор и операционный директор провели детальные интервью с «Синхронизацией»: вместе мы расписали все боли бизнеса и зафиксировали текущую техническую архитектуру.

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

Спроектировать личный кабинет с удобной навигацией и новым видео-плеером

Разработать новую архитектуру
не поломать связи с промостраницами и реализовать поэтапную раскатку

Пересобрать контентную админку без больших ресурсов разработки

3 месяца — безумно маленький срок для перезапуска такой платформы. Чтобы успеть, мы расписали понедельный план на 3 месяца вперед и в результате выкатили первую версию в прод ровно в назначенный день — 3 февраля. В это трудно поверить и мы этим очень гордимся!

Новый интерфейс
личного кабинета

Дизайном интерфейсов занимались ребята из студии MateÇa (Маца). Наша же задача была — всё это воплотить, чтобы страницы летали и ничего не тормозило. Для этого фронтендеры использовали Vue3 и TypeScript.

Найти свои курсы теперь можно за один клик вместо пяти

Раньше были пользователи, которые записывали свой прогресс в тетрадке, теперь всё работает как в Netflix

Стандартную LMS-платформу заменил стильный темный интерфейс — чтобы комфортно смотреть вечером

Дизайнеры вложили очень много любви в детали: шрифты, разные форматы карточек, свои иконки, плавные анимации, понятные тултипы, фронтендеры всё это аккуратно воплотили

Новая архитектура
и поэтапный запуск

Раньше Синхронизация активно использовала GetCourse — самую популярную площадку для курсов в рунете. «Геткурс» слабо кастомизируется и требует целеустремленности со стороны пользователя. Как уж тут конкурировать с Netflix и Ютубом, в которых от контента отделяет один клик?

Сразу заменить «Геткурс» целиком — слишком большой риск. Мы сделали такую архитектуру, чтобы «Геткурс» и новая система могли работать параллельно. Тут было важно не поломать старые связи с промостраницами продуктов — и аккуратно передавать данные о покупках, подписках, возвратах.

Такая архитектура открыла бизнесу штуку, о которой многие мечтают — поэтапную раскатку. В начале мы дали доступ к новой платформе только самым лояльным пользователям. Благодаря такому «тестированию на проде» мы собрали обратную связь от реальных пользователей, исправили недочеты. Когда что-то не работало — клиент всегда мог открыть старую версию, и бизнес ничего не терял.
‍
В новой системе мы заложили большую гибкость на будущее: например, можно разбить курсы на этапы с отдельной оплатой. На «Главной» сделали модульность: теперь добавить новый блок со своей логикой на бекенде — задача пары часов. Мы думали не только о том, что платформа умеет сегодня, но и о цене её развития в будущем.

Центр «Синхронизации» — видео контент. При этом делать свою собственную систему доставки видео и видеоплеер — дорого и непрактично. Мы интегрировали Kinescope — готовую платформу для видео. При этом важно не оказаться заложником внешнего вендора. Мы сделали такую интерацию, чтобы в будущем можно было безболезненно сменить видеоплатформу.

Простая и эффективная админка

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

Поэтому на этапе проектирования мы помогли сформировать требования так, чтобы данные можно было представить в основном в табличном виде. Это дало возможность использовать стандартную админку Django.

В результате, контент-менеджеры «Синхронизации» получили инструмент с продвинутыми функциями, такими как версионирование, практически без дополнительных затрат. Благодаря нашей экспертизе в Django и гибкости клиента мы ускорили запуск минимум на месяц.

Если в будущем структура данных или требования усложнятся, команда сможет доработать кастомную админку — как мы уже сделали для «Вебиума».

При этом мы внимательно слушали обратную связь контент-менеджеров и вносили недорогие правки, которые упрощают им работу. Отзывы говорят сами за себя:

Почему всё получилось

Смогли на старте договориться с клиентом о минимальном продукте

Нашли решение, которое подходило под сжатые 3 месяца, вместо того, чтобы закрыться на год со словами «Всё переделать!»

Шли навстречу друг-другу

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

Работали как единая продуктовая команда

Дизайнер «Синхронизации» стал частью дизайн-студии, а наша разработка подхватывала макеты прямо в середине спринта (недели) и была на постоянной связи с продактом «Синхронизации»

Использовали готовые решения, чтобы сэкономить время

Вместо разработки собственного видеохостинга взяли Kinescope. Вместо самописной админки обошлись готовой админкой фреймворка.

Что дальше

Прямо сейчас собираются цифры, которые покажут реальный результат нашей работы. Для этого мы настроили всю продуктовую аналитику: Mindbox, Amplitude и другие. Как только цифры накопятся, обязательно добавим их сюда. А что у «Синхронизации» уже есть, это отзывы пользователей:

А еще мы разрабатываем мобильное приложение «Синхронизации». Чтобы конкурировать с ютубом и нетфликсом, нужно быть на домашних экранах смартфонов и планшетов. Приложения мы разрабатываем на веб-технологиях, так что не приходится заново переделывать то, что уже сделали для сайта.  Об этом расскажем отдельно позже.

Параллельно мы помогли «Синхронизации» собрать свою команду разработки.
Для этого привлекли лучших эйчаров из NEWHR — они поставляют кандидатов, мы проводим технические собеседования, клиент — собеседование на culture fit. Если кандидат всё прошёл, мы включаем его в работу, а своих ребят постепенно убираем.   

В результате, у «Синхронизации» есть запущенный продукт, настроенные инструменты CI/CD, процессы и команда, которая отлично разбирается в проекте. И главное — высокие, но реалистичные ожидания бизнеса от разработки и здоровая рабочая культура между разработкой и остальными частями бизнеса.