Как мы сделали из неудобной LMS образовательный Netflix за 2 месяца. Синхронизация

«Синхронизация» — образовательная платформа, в которой можно найти курсы про искусство, кино, музыку, литературу, психологию и даже вино. У компании больше 100 курсов по 20 направлениям, 157 тысяч слушателей, а сама платформа существует уже 6 лет.

На момент обращения к нам «Синхронизация» столкнулась с рядом проблем:

1. Sticky Factor упал до 7%. Для сравнения: Sticky Factor у Duolingo — 29%, и для EdTech такие показатели — норма.

2. MAU — в 4 раза ниже среднерыночных показателей.

Пользователи заходили на платформу в среднем 2 раза в месяц.

3. LTV — всего несколько месяцев.

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

Причины: устаревшая LMS на GetCourse, сложная навигация, отсутствие истории просмотров и рекомендаций. Вишенка на торте — огромное количество кликов до целевого действия. В отзывах пользователи с чувством юмора (и отчаянием) буквально подсчитывали количество этих кликов, чтобы донести боль взаимодействия с системой.

Команда пришла к нам с целью полностью переосмыслить онлайн-образование и превратить LMS в стриминговый сервис.

Если декомпозировать эту цель, то нам предстояло:

1. увеличить Sticky Factor;

2. повысить удержание;

3. продлить LTV;

4. стимулировать продление подписок;

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

На перезапуск платформы у «Синхронизации» было полгода. Концепцию продукта вместе с дизайном нам нужно было завершить за 2 месяца.

Мы предложили пересобрать устаревшую LMS в стриминговый сервис: внедрили обновляемый контент, блок «Продолжить просмотр» в один клик и короткие форматы для вовлечения и ещё много-много всего, о чем расскажем ниже.

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

За неделю мы проанализировали best practices стримингов и успешных зарубежных эдтехов, вдохновились такими гигантами, как Netflix, HBO, Кинопоиск, MasterClass, Instagram (запрещенная в России соцсеть; принадлежит компании Meta, признанной экстремистской организацией и запрещенной в РФ), YouTube.

Так предложили 11 решений, в числе которых: обновляемый контент с привязкой к месяцам, шортсы для вовлечения, персонализированные рекомендации без ИИ, но с «хитрым» алгоритмом, вынос «Продолжить просмотр» в хедер, навигация через табы вместо бесконечного скролла, прогресс в сайдбаре, геймификация с медальками и отдельный раздел с лекторами.

Подробно на дизрапте останавливаться не хотелось бы, там очень много всего напридумывали, рассказывать можно бесконечно:) Так что полетели дальше.

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

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

В итоге на время проекта у нас сложилась такая вот общая команда с клиентом. Мы проводили 2-3 воркшопа в неделю и работали в одной Figma в реальном времени.

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

У бренда не было единого визуального языка. В разных точках касания с компанией пользователь сталкивался с разными стилями, поэтому этим нужно было заняться в первую очередь.

Мы провели воркшоп со стейкхолдерами и задали вопрос: «Что такое Синхронизация?».

Ответы нас вдохновили. Из разговора родились четыре образа: свет, который дает знание, переплетение нейронных связей, магия первого открытия и атмосфера современной галереи.

Финальная концепция родилась на стыке двух самых сильных образов. Заказчик выбрал идею, которая объединила в себе нейронные связи (как символ знаний) и волшебство (как эмоцию от открытия нового).

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

Выбрали лаконичный стиль: аккуратные карточки курсов и фирменный шрифт. Цветовая гамма — черный, белый и градации серого, ничего лишнего.

Добавили теги форматов (видео/аудио/смешанные/серия курсов и т. д.), чтобы пользователям было проще дифференцировать тип контента.

Ввели рандом-блок «Поиск своего счастья». На случай, если пользователь не знает, что смотреть, система сама предложит ему курсы.

За пару вечеров собрали дизайн-систему с нуля и сразу отдали в разработку, чтобы команда не простаивала.

Чтобы не тратить время на отрисовку картинок, в баннерах и аватарках использовали известные полотна — они здорово заполнили пустоты и отлично вписались в концепцию.

Звёздочки — символ магии знаний — интегрировали в иконки и микроанимации. К примеру, над каждым курсом отображается количество просмотров — это социальное доказательство, которое помогает пользователям оценить популярность контента. В иконку глаза мы интегрировали звезду, чтобы подчеркнуть эту идею.

Полетели дальше, сейчас расскажем про ключевые разделы сервиса)

Главное при переезде на новую платформу — не потерять пользователей и дать им зайти под старыми email'ами. Мы упростили этот момент до предела: авторизация через почтовые сервисы в один клик, без больших форм ввода.

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

Библиотека — раздел с множеством фильтров. Мы старались собирать макеты таким образом, чтобы разработать их можно было как можно быстрее. То есть не плодили новые сущности, а переиспользовали готовые.

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

Ещё больше упростили пользователям поиск с помощью акцента на лекторах. Теперь не обязательно скроллить всю библиотеку в поисках курсов конкретных спикеров — достаточно зайти на страницу с преподавателями, прочесть об их экспертности и выбрать то, что по душе.

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

На странице курса собрали всю ключевую информацию: тип и описание урока, содержание. Структуру сделали линейной с разбивкой на модули, а навигацию вынесли в закрепленную левую панель. Она не пропадает при скролле — можно листать лекцию и в любой момент переключиться на другой раздел.

Сверху добавили закрепленные табы с основной информацией (лекции, преподаватели, описание), чтобы быстро переходить между ними.

А для контроля прогресса в той же боковой панели показываем пользователю, какие разделы уже позади, а какие ещё предстоит пройти.

Мы спроектировали страницу лекции по аналогии с YouTube, но устранили одну из его ключевых проблем — неэффективное использование пространства. В нашем интерфейсе видео всегда остаётся в фокусе благодаря фиксированной полосе прокрутки.

Каждая лекция сопровождается описанием и материалами, а плеер поддерживает таймкоды и предлагает персональные рекомендации. Интерфейс также меняется в зависимости от позиции лекции в курсе, помогая пользователю интуитивно двигаться дальше.

Реализовали целую систему состояний для пользователей без подписки:

1. замки на лекциях и курсах, подчеркивающие необходимость подписки;

2. конверсионные баннеры и призывы к покупке;

3. продуктовые лендинги курсов, где можно оформить подписку.

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

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

Мы сразу понимали, что до нативного приложения руки дойдут не скоро, поэтому решили не тратить время на отдельные макеты под него. Вместо этого изначально спроектировали мобильную версию сайта с запасом прочности — так, чтобы потом её можно было без проблем переложить под нативную разработку.

Расчёт оказался верным. «Синхронизация» собрала все наши мобильные наработки, отдала в разработку и зарелизила в сторах:) А вот ссылки: 

Google Play: https://clck.ru/3SnAJz

AppStore: https://goo.su/2t8tsiV

Ну и, как говорится, скачивайте и смотрите лекции, рекомендация от души)

Красота красотой, но проект затевался не только ради неё. Поэтому вот вам цифры. 

Теперь люди чаще возвращаются: удержание на третий день выросло с 33% до 37%, а на седьмой — с 23% до 30%. То же самое с вовлечённостью: она подросла на 5-8% — значит, люди пользуются платформой не разово, а регулярно.

Ежедневная активность тоже пошла вверх: больше живого трафика, выше пиковые значения, стабильнее средние. Платформа стала оживать.

Ещё факт. Если раньше только 65% пользователей успешно проходили авторизацию в течение недели, то теперь — 91%. Ну а конверсия из покупки в авторизацию увеличилась на 32% в первый день после приобретения и на 25% в течение недели.

Итог такой: сделали платформу удобнее → пользователям стало комфортнее → выросли все важные метрики. Так и должен работать редизайн.

А ещё попросили продакта — Таню, записать небольшой видеоролик с отзывом о нашей работе и поделиться впечатлениями о готовом продукте. В итоге получилось несколько минут искренних слов благодарности, что, конечно, очень приятно!