Главная страница
Главная страница мобильного приложения — это ключевой навигационный хаб помогающий студентам на протяжении всего процесса обучения
Команда
Product designer, Product manager, Front-End, Back-End
Product designer, Product manager, Front-End, Back-End
Длительность
4 месяца
4 месяца
Моя роль
Product designer, UX-research
Product designer, UX-research
Метрики
CSI, Sticky Factor
CSI, Sticky Factor
До редизайна
Проблема
Продукт перешёл в фазу активного роста: расширилась функциональность и обновилось продуктовое видение. В результате требования к интерфейсу существенно выросли, а главная страница в формате простого списка курсов перестала массштабироваться
Бизнес цели
Совместно с командой стратегии и владельцами образовательных направлений мы определили основные цели редизайна страницы обучения:
Услиление платформы
Сделать приложение основной точкой входа в экосистему обучения
Сделать приложение основной точкой входа в экосистему обучения
Рост вовлеченности
Повысить частоту возвратов в приложение и увеличить время, проведённое в обучении
Повысить частоту возвратов в приложение и увеличить время, проведённое в обучении
Масштабирование для B2G/B2
Подготовить инфраструктуру для корпоративных и государственных клиентов
Подготовить инфраструктуру для корпоративных и государственных клиентов
Интеграция маркетинговых активностей
Использовать баннеры и промо-активности как часть сценариев, не отвлекая от обучения
Использовать баннеры и промо-активности как часть сценариев, не отвлекая от обучения
01
ИССЛЕДОВАНИЕ
На этом этапе мы собрали и структурировали все данные о текущем состоянии продукта. В основе этого исследования стояли кастдев и анализ ключевых метрик
Кастдев
Мы провели серию глубинных интервью с пользователями, оценивая восприятие текущей главной страницы и выявляя слабые места интерфейса. Во время бесед изучали не только реакцию на дизайн, но и контекст использования мобильного приложения: когда, где и зачем его открывают, как оно вписывается в повседневную жизнь и чем отличается от опыта во вебе
Уведомления не работают или теряются
Пользователи часто не получают уведомления в приложении и вынуждены проверять почту, Telegram или сайт. Уведомления воспринимаются как ненадёжные: они приходят нерегулярно или теряются
Пользователи часто не получают уведомления в приложении и вынуждены проверять почту, Telegram или сайт. Уведомления воспринимаются как ненадёжные: они приходят нерегулярно или теряются
Нет понятного центра уведомлений
В приложении отсутствует единое и очевидное место, где можно посмотреть все уведомления. Пользователи не понимают, есть ли у них новые сообщения, и сомневаются, всё ли они увидели.
В приложении отсутствует единое и очевидное место, где можно посмотреть все уведомления. Пользователи не понимают, есть ли у них новые сообщения, и сомневаются, всё ли они увидели.
Недостаточная информативность прогресса
Даже когда прогресс отображается, он не даёт чёткого понимания состояния обучения. Пользователям не хватает процентов, шкалы или более наглядного индикатора, который помог бы быстро оценить, сколько уже пройдено и что осталось
Даже когда прогресс отображается, он не даёт чёткого понимания состояния обучения. Пользователям не хватает процентов, шкалы или более наглядного индикатора, который помог бы быстро оценить, сколько уже пройдено и что осталось
«Продолжить обучение» не работает корректно
Пользователи не доверяют кнопке «Продолжить обучение», потому что она часто ведёт не на тот модуль или урок. Кнопка может открывать уже пройденные материалы, сбрасывать точку остановки или вести в случайное место. В результате большинство пользователей предпочитают вручную искать нужный урок, а саму кнопку считают ненадёжной.
Пользователи не доверяют кнопке «Продолжить обучение», потому что она часто ведёт не на тот модуль или урок. Кнопка может открывать уже пройденные материалы, сбрасывать точку остановки или вести в случайное место. В результате большинство пользователей предпочитают вручную искать нужный урок, а саму кнопку считают ненадёжной.
Недостаточная информативность прогресса
Даже когда прогресс отображается, он не даёт чёткого понимания состояния обучения. Пользователям не хватает процентов, шкалы или более наглядного индикатора, который помог бы быстро оценить, сколько уже пройдено и что осталось
Даже когда прогресс отображается, он не даёт чёткого понимания состояния обучения. Пользователям не хватает процентов, шкалы или более наглядного индикатора, который помог бы быстро оценить, сколько уже пройдено и что осталось
Приоритет
Совместно с продуктом мы оценили каждую гипотезу по критериям Reach / Impact / Confidence / Effort. Так появился объективный список приоритетов: какие изменения в интерфейсе принесут наибольший эффект на метрики
Возврат в обучение
Доля пользователей, которые возвращаются к обучению через приложение в течение выбранного периода
Доля пользователей, которые возвращаются к обучению через приложение в течение выбранного периода
Возврат в обучение
Доля пользователей, которые возвращаются к обучению через приложение в течение выбранного периода
Доля пользователей, которые возвращаются к обучению через приложение в течение выбранного периода
02
Формирование гипотез
После анализа пользовательских сценариев и данных стало ясно, что проблемы носят системный характер. Поэтому этап поиска гипотез был направлен на пересборку пользовательского опыта, а не на точечные правки
Идея №1
Главная страницу это единый хаб, в котором собраны все ключевые точки входа в обучение. Теперь экран поддерживает разные сценарии использования и даёт больше контроля пользователю
Множество точек входа
Теперь с главной можно попасть в разные разделы — от курсов до дополнительных функций
Теперь с главной можно попасть в разные разделы — от курсов до дополнительных функций
Кастомизация виджетов
На странице расположены настраиваемые блоки: пользователь сам выбирает, какие элементы показывать и в каком порядке
На странице расположены настраиваемые блоки: пользователь сам выбирает, какие элементы показывать и в каком порядке
Маркетинговые активности
Рекламные баннеры не мешают обучению — их можно скрыть
Рекламные баннеры не мешают обучению — их можно скрыть
Идея №2
В этой концепции мы сохранили главный экран как единый хаб, но добавили новый элемент — статичный баннер в верхней части страницы. Он служит акцентной зоной для коммуникаций и в перспективе может стать точкой входа в сторисы. Остальная логика осталась прежней
Статичный баннер
Верхняя часть главного экрана занята баннером, который привлекает внимание к ключевым активностям и в будущем может превратиться в вход в сторисы
Верхняя часть главного экрана занята баннером, который привлекает внимание к ключевым активностям и в будущем может превратиться в вход в сторисы
Идея №3
В этой версии мы отказались от кастомизации и сделали структуру более строгой. Главный экран построен вокруг календаря как ключевого инструмента планирования обучения. Такой подход задаёт пользователю чёткий сценарий: сначала планирование, потом доступ к материалам и активностям
Календарь в приоритете
Самый заметный и верхний блок экрана — календарь, помогающий пользователю сразу ориентироваться в расписании и планировать обучение
Самый заметный и верхний блок экрана — календарь, помогающий пользователю сразу ориентироваться в расписании и планировать обучение
Фиксированная структура
Самый заметный и верхний блок экрана — календарь, помогающий пользователю сразу ориентироваться в расписании и планировать обучение
Самый заметный и верхний блок экрана — календарь, помогающий пользователю сразу ориентироваться в расписании и планировать обучение
Новая развилка
Развилка для всех топов курсов вынесена на первый шаг. Пользователи сразу понимают, какие курсы активны, завершены или скрыты.
Развилка для всех топов курсов вынесена на первый шаг. Пользователи сразу понимают, какие курсы активны, завершены или скрыты.
03
Тестирование и валидация гипотез
На этапе коридорного тестирования мы сравнили несколько вариантов структуры главного экрана. По результатам быстрых проверок стало очевидно, что пользователи лучше воспринимают вариант с точками входа в верхней части экрана и виджетами ниже
UX тест
Прототип позволил проверить общую логику и иерархию экрана:
как пользователи ориентируются, считывают приоритеты и переходят
к ключевым действиям.
как пользователи ориентируются, считывают приоритеты и переходят
к ключевым действиям.
Быстрый доступ к ключевым разделам
Виджет объединяет основные разделы приложения и помогает пользователю быстро перейти к нужному сценарию без поиска по экрану. Точки входа формируют понятную верхнеуровневую навигацию и задают структуру всей страницы
Виджет объединяет основные разделы приложения и помогает пользователю быстро перейти к нужному сценарию без поиска по экрану. Точки входа формируют понятную верхнеуровневую навигацию и задают структуру всей страницы
01
Возврат к последнему материалу
Виджет показывает последний урок или модуль, на котором пользователь остановился. Он позволяет продолжить обучение в один клик, снижает количество лишних действий и возвращает доверие к функции продолжения обучения
Виджет показывает последний урок или модуль, на котором пользователь остановился. Он позволяет продолжить обучение в один клик, снижает количество лишних действий и возвращает доверие к функции продолжения обучения
01
Всё значимое — в одном месте
Виджет собирает ключевые уведомления, связанные с обучением: дедлайны, изменения в курсах и важные сообщения. Это помогает пользователю не пропускать критичную информацию и снижает зависимость от внешних каналов.
Виджет собирает ключевые уведомления, связанные с обучением: дедлайны, изменения в курсах и важные сообщения. Это помогает пользователю не пропускать критичную информацию и снижает зависимость от внешних каналов.
01
События и дедлайны во времени
Виджет отображает все учебные события, привязанные ко времени: занятия, дедлайны и напоминания. Он помогает пользователю планировать обучение и лучше ориентироваться в ближайших активностях
Виджет отображает все учебные события, привязанные ко времени: занятия, дедлайны и напоминания. Он помогает пользователю планировать обучение и лучше ориентироваться в ближайших активностях
Выводы
Тестирование показало, что выбранная структура главного экрана с точками входа сверху и виджетами ниже воспринимается пользователями как понятная и логичная.
04
Финальная сбора и работа над UI
После тестирования я перешёл к этапу финальной сборки экрана. На этом этапе решения уже не пересматривались концептуально — фокус был на точности, визуальной иерархии и согласованности элементов между собой
05
Результаты
После внесённых изменений в дизайн главного экрана мы провели анализ ключевых метрик, чтобы оценить влияние редизайна. Результаты рост по всем основным показателям:
CSI
Sticky Factor
