Сделали из «Синхронизации» образовательный 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. Описание реализации кейса и творческого пути по поиску оптимального решения

Дизрапт за 7 дней

У команды «Синхронизации» были свои наработки по видению продукта и данные из исследований. На проработку дизрапта у нас была неделя.

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

• Обновляемый контент на главной. Блок «Смотрим и читаем в этом месяце». Здесь показываем пользователям, что новые курсы появляются регулярно.
• Персональные рекомендации без ИИ. Предложили простой алгоритм, который подбирает курсы по тематикам, близким к тем, что пользователь уже изучал. Для этого даже не потребуется внедрять и обучать ИИ — то есть технологии нет, а ощущение умной персонализации есть.
• Акцент на лекторах. Отдельный раздел с преподавателями. Пользователи выбирают не только тему — они выбирают харизматичную личность, у которой будут учиться.
• Шортсы с фрагментами уроков. Короткие видео на главной мы задумали как входную точку в продукт: они цепляют внимание, вовлекают и мягко подталкивают перейти на страницу курса, а дальше уже к покупке.
• «Продолжить просмотр» в хедере. Так незавершённая лекция всегда будет на виду.
• Геймификация. Медали и ачивки за просмотр и завершение курсов для положительного подкрепления. Снова работаем на возвращаемость.
• Что смотрят друзья. На кастдевах пользователи говорили, что им хочется делиться лекциями с близкими. А ещё им нравится смотреть видео вместе, чтобы потом было что обсудить, поэтому мы . Решили добавить кнопку «Поделиться», чтобы отправлять лекции друзьям было проще.
• Добавление лекций в календарь. Предложили интеграцию с Гугл Календарём, чтобы пользователи могли добавлять новые лекции в расписание и не откладывать просмотр на потом.
• Бонусная программа. В профиле мы предложили показывать, сколько бонусов пользователь получит за приглашение друга.
• Отображение прогресса в сайдбаре. Раньше под плеером располагались таймкоды, позволяющие пользователю отслеживать прогресс просмотра и видеть, что будет дальше. Аудитория их плохо считывала и почти не пользовалась ими. Мы же предложили вынести содержание ролика в сайдбар.
• Табы в навигации. Мы предложили собрать всё меню в компактные табы — чтобы находить нужное на главной можно было быстрее. Раньше всё было разбито по строкам, и из-за этого пользователям приходилось долго скроллить страницу.

Наше видение продукта покорило продакт-оунера «Синхронизации», и мы продолжили сотрудничество после такого вот периода знакомства)

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

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

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

В итоге на время проекта у нас сложилась такая вот общая команда с клиентом. Мы проводили 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