Приложение для обучения
Как я пересобрал главный экран, чтобы студенты стали чаще возвращались в приложение
CSI:
+19%
Sticky Factor:
+4%
Ru Store Rate:
+0,9 балла
О проекте
Контекст
Главный экран спроектировали несколько лет назад, когда приложение было просто каталогом курсов. Продукт вырос, а архитектура страницы не поменялась
Проблемы
Сценариев стало больше, и старая архитектура перестала помогать студентам возвращаться к обучению. Это било по основным метрикам (CSI и Sticky Factor). Абсолютные цифры под NDA, но отрицательная динамика была устойчивой
Цели проекта
Нужно было понять, что мешает студентам быстро возвращаться к учёбе, и спроектировать архитектуру, которая выдержит рост продукта и новых сегментов пользователей
Моя роль
Senior Product Designer
Что делал
- Исследовал проблему
- Формулировал продуктовые гипотезы
- Проектировал новую архитектуру главного экрана
- Отвечал за UX/UI-дизайн
- Проверял решения на usability-тестах
Платформы
iOS, Android
Исследования
Кастдев главной страницы
Провёл серию глубинных интервью со студентами разных программ вместе с продукт-менеджером. Спрашивал не про интерфейс, а зачем человек вообще открывает приложение в конкретный момент: это и определило логику всего проекта
Пользователи не пользовались блоком «Продолжить занятия»
Вместо ожидаемого урока он открывал начало уже пройденного модуля. Студенты искали нужный урок вручную
Недостаточная информативность прогресса
Прогресс отображается, но не отвечает на главный вопрос: сколько осталось до конца
Список курсов не структурирован
Ни сортировки, ни группировки: найти оплаченный курс превращалось в отдельную задачу при каждом входе
Кастдев страницы курса
На тех же интервью разобрал поведение студентов внутри курса: что студент находит сам, а что теряет по дороге
Скачанные материалы не найти
Студенты искали файлы внутри курса, а не в отдельном разделе приложения. Материалы лежали не там, где их ждали, поэтому часть студентов даже не знала, что функция скачивания существует
Календарь не связан с активным курсом
Расписание существовало отдельным разделом, и туда почти никто не заходил: связь с текущим обучением просто не считывалась
Нет понятного центра уведомлений
Уведомления в приложении терялись или приходили нерегулярно. Студенты проверяли почту, Telegram, сайт: что угодно, кроме самого приложения
Цитаты студентов с интервью
«Нажимаю "Продолжить" и попадаю в начало модуля, который уже прошла»
Студент курса «Разработчик Python»
«Смотрю на полоску прогресса и не понимаю, мне ещё много осталось или уже почти всё»
Студентка курса «Основы маркетинга»
«Нашла скачанные материалы случайно. До этого думала, что функции скачивания вообще нет»
Студент курса «UX с нуля»
«О дедлайне узнал из Telegram. В самом приложении уведомлений не увидел»
Студент курса «Нутрицолог»
Проектирование
Зачем студенты открывают приложение
После интервью выписал все пользовательские сценарии и сгруппировал их по частоте и влиянию на ключевые метрики
Учёба без интернета
Когда еду без сети, хочу открыть скачанные материалы сразу, а не искать их по разделам вручную
Навигация между курсами
Когда учусь на нескольких программах одновременно, хочу быстро найти нужную, а не листать весь список каждый раз
Своевременные уведомления
Когда выходит новый модуль или подходит дедлайн, хочу узнать вовремя, а не случайно
Планирование обучения
Когда планирую учёбу, хочу видеть расписание занятий прямо в курсе
Гипотезы
Пользователи приходили на главный экран с разными задачами, и один сценарий на всех означал бы сплошные компромиссы. Поэтому сформулировал несколько принципиально разных гипотез для главного экрана
Гипотеза №1: Настраиваемый хаб
Предложил собрать главный экран из независимых виджетов. Студент сам решает, какие блоки важнее и в каком порядке они идут, и единая структура никому не навязывается
Гипотеза №1
❇️ Плюсы
Экран под задачу студента
Каждый собирает главный экран под то, зачем он сейчас открыл приложение
Масштабируемость
Новый раздел добавляется ещё одним виджетом, структура экрана остаётся прежней
Всё нужное рядом
Материалы, календарь и уведомления можно держать рядом с активным курсом
🛑 Риски
Сложный интерфейс
Настройка может перегрузить экран и сделать его сложнее для понимания
Настройку могут не заметить
Пользователи могут не обнаружить, что экран можно собрать под себя
Слишком много свободы
Избыточная гибкость может ухудшить восприятие экрана
Гипотеза №2: Главный экран вокруг календаря
Главным элементом стал календарь с ближайшими событиями, дедлайнами и занятиями. Привязка к конкретным датам должна была сформировать привычку регулярно открывать приложение
Гипотеза №2
❇️ Плюсы
Привычка заходить регулярно
Привязка к датам даёт повод открывать приложение в определённые дни
Ближайшее видно сразу
Занятия и дедлайны на первом экране, искать их не нужно
Расписание перестаёт быть отдельным разделом
Календарь живёт на главном экране, а не там, куда никто не заходил
🛑 Риски
Подходит не всем студентам
Сценарий не подходит студентам, у которых нет привязки ко времени
Потерянный путь к обучению
Пользователи, которые редко работают с расписанием, могли потерять основной путь к обучению
Негибкая структура
Структура получалась менее гибкой для масштабирования
Гипотеза №3: Главный экран с блоком под маркетинг
Сверху постоянный блок под маркетинговые коммуникации, ниже основной контент. Команда маркетинга получала бы канал для продвижения курсов без лишней инфраструктуры
Гипотеза №3
❇️ Плюсы
Постоянный канал для маркетинга
Курсы продвигаются на самом посещаемом экране
Без отдельной инфраструктуры
Для коммуникаций не нужны новые разделы и сервисы
🛑 Риски
Борьба за внимание
Блок может конкурировать с основным пользовательским сценарием
Экран теряет фокус на обучении
Первый экран переставал быть сфокусированным на учёбе
Перекос в сторону бизнеса
Ценность для бизнеса может оказаться выше, чем ценность для пользователя
Что ушло в тест
По итогам обсуждения с командой взял в тест первую и вторую гипотезы. От третьей отказался ещё до пользовательских тестов: при всей пользе для маркетинга постоянный маркетинговый блок размывал фокус главного экрана и не решал главную задачу: быстрый возврат к обучению
Тестирование
UX тест главной страницы
Собрал два интерактивных прототипа с одним набором сценариев и прогнал на 8 респондентах. Критерии зафиксировал заранее: как быстро человек находит ключевые сценарии и понимает структуру экрана. И может ли объяснить назначение каждого блока своими словами
Результат теста главного экрана
Первая гипотеза оказалась понятнее второй. Респонденты быстрее определяли, что это за страница, и точнее объясняли, как работает каждый виджет. Входы в другие разделы находили увереннее
Справился сам
Справился с трудом
Не справился
Нашли виджет «Моё обучение»
№1
№2
Поняли, как работает виджет «Мое обучение»
№1
№2
Нашли виджет «Продолжить обучение»
№1
№2
Поняли, как работает виджет «Продолжить обучение»
№1
№2
Нашли виджет «Важные уведомления»
№1
№2
Поняли, как работает виджет «Важные уведомления»
№1
№2
Нашли виджет «Календарь»
№1
№2
Поняли, как работает виджет «Календарь»
№1
№2
Нашли как настроить главный экран приложения
№1
№2
Заявили о потребности в кастомизации экрана
№1
№2
UX тест экрана курса
Экран курса тестировал на той же группе 8 респондентов и проверял, насколько хорошо пользователи ориентируются внутри этого экрана
Результат теста экрана курса
Пользователи быстрее ориентировались и находили нужные разделы
Справился сам
Справился с трудом
Не справился
Правильно поняли, что это за страница перед ними
№1
№2
Нашли разделы скачанное/заметки/календарь
№1
№2
Что ушло в релиз
Четыре виджета на главной
Экран собран из четырёх виджетов. Каждый закрывает конкретную проблему из исследования. Порядок виджетов студент меняет сам. Тем, кто ничего не настраивал, порядок показывается по умолчанию
Виджет «Мое обучение»
Все курсы студента в одном месте. Оплаченный курс находится сразу, без поиска при каждом входе. Так закрыл проблему списка без сортировки и группировки
Виджет «Продолжить обучение»
Возвращает студента к материалу, на котором он остановился. Блок назывался «Продолжить занятия» и открывал начало пройденного модуля. Переименовал его в «Продолжить обучение» и вместе с бэкендом починил возврат к нужному уроку. Прогресс из виджета убрал: полоска не отвечала, сколько осталось, и отвлекала от основного действия
Виджет «Важные уведомления»
Единое место для событий, которые нельзя пропустить: новый модуль, ближайший дедлайн. Студенту больше не нужно искать их в почте и Telegram
Виджет «Календарь»
Ближайшие занятия и дедлайны прямо на главной. Расписание перестало быть отдельным разделом, куда никто не заходил, и привязано к активному курсу
Экран курса
Скачанное, заметки и календарь собрал внутри курса, там, где студент их ищет. Раньше это были отдельные разделы, куда мало кто заходил
Результаты
Метрики
Сравнивал 3 месяца после полной раскатки с 3 месяцами до релиза. Базовые значения под NDA, поэтому только относительный прирост
+19%
CSI
+4%
Sticky Factor
+0,9
балла
Ru Store Rate
Что я узнал
Самые важные инсайты пришли не из аналитики, а из наблюдения за тем, как реальные студенты теряются в простых сценариях
Студенты учатся нелинейно
Прерываются на недели, возвращаются в середину курса, прыгают между модулями. Главный экран должен всегда отвечать на один вопрос: «Где я сейчас?», и держать в контексте всё, что связано с активным курсом. Поэтому «Продолжить обучение» теперь ведёт к конкретному материалу, а не к началу модуля
Контекст решает больше, чем кажется
Скачанные материалы, календарь и уведомления казались холодными разделами. Они стали живыми, когда я привязал их к активному курсу
Масштабируемость начинается со структуры
Прежде чем добавлять новые разделы, экран нужно было привести к чёткой иерархии. Модульную раскладку выбрал так, чтобы новый раздел добавлялся виджетом и не перекраивал главную