Переосмысление навигации для растущей EdTech-платформы

Контекст

В период с 2020 по 2022 год Skyeng превратился из онлайн-школы английского языка в комплексную образовательную платформу, предлагающую разнообразные курсы как для взрослых, так и для детей. Эта трансформация создала серьёзные вызовы, поскольку архитектура приложения изначально была рассчитана исключительно на обучение английскому языку. Нам необходимо было переосмыслить мобильное приложение — в особенности его навигацию — чтобы адаптировать его к расширяющемуся набору предметов и форматов обучения.

Дизайн-лид • Зима 2022 • Skyeng App

Проблема

Постановка задачи

Бизнес стремился увеличить доход на пользователя (RPU) и повысить вовлечённость студентов. Аналитика показывала, что большинство пользователей взаимодействовали преимущественно с онлайн-уроками и домашними заданиями, проводя мало времени на платформе за пределами этих основных активностей. Для максимизации пожизненной ценности клиента компания сосредоточилась на:

• Стимулировании более глубокого вовлечения внутри приложения.
• Увеличении кросс-продаж предметов, уже доступных на веб-платформе.

Однако существующая система навигации стала барьером для роста, препятствуя усилиям по повышению как вовлечённости, так и расширению выручки.

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

Решение

Процесс

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

Продуктовая архитектура

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

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

Поэтому мы начали с проектирования информационной архитектуры продукта, чтобы определить основные компоненты продуктовой структуры, логики и навигации.

Сессия дизайн-концепций

После завершения работы над продуктовой архитектурой мы провели брейншторминг-сессию для исследования концепций визуального дизайна и навигации нашего продукта. Мы собрали девять продуктовых дизайнеров из разных подразделений организации и трёх геймдизайнеров для генерации инновационных идей. Сессия была сфокусирована на трёх ключевых направлениях:

• Бизнес-стратегия: создание навигации, поддерживающей долгосрочное видение Skyeng по расширению линейки курсов.
• Архитектурная целостность: сохранение системных границ при обеспечении гибкости для будущего роста.
• Пользовательско-ориентированный дизайн: учёт обратной связи от пользователей для создания интуитивной и функциональной навигации.

Финальный дизайн

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

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

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

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

UX-тестирование

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

Результаты:

• 100% понимают, где найти точку входа для переключения между предметами, и положительно восприняли выпадающее меню
• 9 из 10 положительно отреагировали на дополнительный навигационный блок в верхней части экрана

Улучшение системы уведомлений

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

Мы разделили все уведомления на две группы:

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

Результаты и влияние

Мы провели пользовательское тестирование с прототипом в Figma перед запуском обновлённой навигации. Обратная связь была крайне положительной: более 90% сочли новую навигацию интуитивно понятной и отметили улучшение общего опыта по сравнению с предыдущей навигацией. После внесения небольших улучшений на основе обратной связи мы раскатили новую навигацию на группу активных пользователей. Тестирование показало рост вовлечённости пользователей в дополнительные курсы.

Следующие шаги: команда готовится к полномасштабному запуску новой навигационной системы.