Сделали из платформы «Синхронизация» образовательный Netflix за 2 месяца

1. Вводная задача от заказчика, проблематика, цели

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

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

• Sticky Factor упал до 7%. Для сравнения: Sticky Factor у Duolingo — 29%, и для EdTech такие показатели — норма.
• MAU — в 4 раза ниже среднерыночных показателей.
• Пользователи заходили на платформу в среднем 2 раза в месяц.
• LTV — всего несколько месяцев.

Кастдевы показали, что люди покупали курсы… и не могли их найти на платформе. Причины — устаревшая LMS на *одной известной платформе*, запутанная навигация, отсутствие привычных вещей вроде «продолжить просмотр» и рекомендаций.

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

«Синхронизация» пришла к нам полностью переосмыслить онлайн-образование и превратить LMS в стриминговый сервис.

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

В понедельник мы получили вводные. Во вторник уже показали первые идеи. А дальше случилась череда синков, уточнений, интервью, разборов стриминговых сервисов вроде MasterClass, HBO «Кинопоиска».

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

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

Объединили команды и ускорили работу над продуктом

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

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

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

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

Собрали мудборды и разработали дизайн-концепцию

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

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

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

Вооружившись этими метафорами, мы отправились исследовать лучшие образцы рынка — изучили, как работают с визуалом «Кинопоиск», MasterClass и HBO. Собрали мудборды.

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

Как изменили главную страницу

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

• Выбрали лаконичный стиль: аккуратные карточки курсов и фирменный шрифт. Цветовая гамма — чёрный, белый и градации серого, ничего лишнего.
• Добавили теги форматов (видео/аудио/смешанные), чтобы пользователям было проще дифференцировать тип контента.
• Ввели рандом-блок. На случай, если пользователь не знает, что смотреть, система сама предложит ему курсы.

Дизайн-система и визуалы

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

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

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

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

Авторизация

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

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

Библиотека курсов и фильтры

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

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

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

Карточки с курсами

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

Страница курса

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

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

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

Страница лекции

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

На мобильных устройствах боковую панель заменяет компактное меню с кнопками «Все лекции» и «Следующая лекция», чтобы быстро переключаться между уроками. Рядом закреплена анимированная кнопка «Палец вверх» — пользователь может поставить реакцию прямо во время просмотра.

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

Монетизация

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

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

Дополнительные материалы

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

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

Адаптация мобильной логики — наш главный джокер

Так как изначально мы заходили именно на переосмысление платформы, времени на дизайн под iOS и Android с нуля у нас не было. Но оказалось, что базовая архитектура, которую мы заложили с самого начала, позволила всё адаптировать без боли всего за 7-10 дней.

Вот как мы пересобрали интерфейс под мобильные устройства.

Страница лекции (плеер)

На десктопе мы делали интерфейс в стиле YouTube-плеера. На мобилке места меньше, поэтому пришлось переизобрести подход.

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

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

Курс не растягивается в бесконечную ленту

На страничках курсов может быть и 20, и 30 видео, и если показать их все подряд, скролл превращается в мучение. Мы это убрали: пройденные темы автоматически сворачиваются в аккордеон. На экране остаётся только то, что предстоит пройти.

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

Нативные возможности (iOS/Android)

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

Добавили поддержку режима «картинка в картинке» (PiP)

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

Офлайн-режим

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

Сквозная навигация

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

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

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

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

Google Play

AppStore

3. Результаты сотрудничества

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

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

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

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

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

4. Заключение

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

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

Наш сайт

Мы на Dprofile

Мы в Телеграм