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

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

«Синхронизация» — большая образовательная платформа с аудиторией 157 000 пользователей и библиотекой из 100+ курсов. Контент у ребят крутой и сильный, но продукт начал тормозить в росте из-за *одной известной устаревшей LMS*. Её интерфейс был перегружен и уже не тянул масштаб, из-за чего страдали метрики.

Например:

• Sticky Factor упал до 7%;
• пользователи заходили на платформу в среднем всего 2 раза в месяц;
• LTV ограничивался всего 1-2 платежами, то есть, на платформе задерживались всего пару месяцев.

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

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

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

Нам нужно было переосмыслить продукт и превратить LMS в стриминговый сервис. Ещё нам предстояло:

• поднять retention и Sticky Factor;
• адаптировать новый дизайна под запуск мобильного приложения;
• внедрить персонализацию вместо одинакового контента для всех..

Сроки были сжатые: 2 месяца на дизайн и 6 месяцев на весь проект вместе с разработкой.

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

Этап 1: Продуктовый спринт и стратегия

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

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

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

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

Этап 2: Дизайн-концепция и визуальный язык

Единого визуального языка у бренда на старте не было. Поэтому мы сделали с фаундерами воркшоп и спросили: «А что для вас „Синхронизация“?» Так родились метафоры, которые мы взяли за ориентир: свет как знание, магия открытия, галерейное пространство.

А вот как мы выразили это визуально.

Лайк решили сделать не просто кликом, а маленьким моментом магии. Анимация растворения в звёздочки — это отсылка к тому самому озарению, когда что-то щёлкает в голове.

Иконки собрали свои, кастомные, с нуля, чтобы во всех уголках платформы опыт был одинаковым. Например, иконку перехода на главную оформили в виде храма искусств или греческого Парфенона.

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

А ещё мы сделали многослойные карточки. Чёрный фон в них — не просто заливка, а динамический элемент, который собирается из самого видео. Вот как это устроено:

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

В итоге фон всегда подстраивается под контент, выглядит живо и не выбивается из изображения. Тот же принцип работает и на мобильных.

Полная синхронизация

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

Мы проводили 2-3 воркшопа в неделю и параллельно работали в одной Figma.

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

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

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

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

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

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

Автовоспроизведение контента

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

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

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

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

Рандом-блок

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

Этап 4: нативные возможности (iOS/Android)

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

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

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

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

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

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

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

Этап 5: Развитие системы и наследие

Для дальнейшей разработки мы собрали UI Kit. Эта система стала ядром продукта — единым источником правды для всех интерфейсов. В неё вошли токены (цвета, шрифты, отступы), библиотека компонентов и принципы их использования. А архитектуру кита изначально спроектировали для лёгкого масштабирования на веб, мобильные платформы и маркетинг,

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

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

А дальше случилось классное

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

• переделала личный кабинет;
• обновила фронтовую часть (фасад);
• привела к единому стилю внешние коммуникации.

Пример — онбординг с «Моими интересами»

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

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

Проект уложили в срок: дизайн сделали за 2 месяца. Мобильное приложение собрали всего за 1-1,5 недели вместе с разработкой, а на дизайн ушло вообще 0 часов времени, потому что всё уже было продумано в адаптиве.

• После релиза цифры приятно выросли:
• Retention D3 вырос с 33% до 37%,
• Retention D7 — с 23% до 30%,
• Вовлеченность прибавила ещё 5-8%.

Авторизация тоже сильно подтянулась: за неделю показатель вырос с 65% до 91%.

И главное — это конверсия в покупку: +32% в первый день и +25% по итогам недели.

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

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