Три экрана приложения EWA: книги по уровням, карта 3D-островов с тропой и полки с книгами

Роадмап книг, тестовое на 3 концепции

EWA Тестовое

Задача

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

Книги делятся на группы по CEFR (A1, A2, B1 и так далее), по 4-5 книг на уровень. Пользователь должен чётко понимать, где он в курсе. Нужен был один обзорный экран, визуал свободный, лишь бы не казался чужеродным остальному приложению. Сложность разработки в задании не учитывалась.

Гипотезы

Задачу я разложил на 3 гипотезы и под каждую нарисовал концепцию.

  1. Привычный паттерн. Та же навигация, что в «Уроках» (путь, точки прогресса, маскот), сокращает время на адаптацию. Книги идут привычной «змейкой», уровни вынесены на экран «План обучения». Проверка: A/B на новых пользователях, Time to First Read.
  2. Геймифицированное путешествие. Карта с конечной целью и аватаром-шаром поднимает вовлечённость и Retention 7/30D. Каждый уровень это свой остров. Проверка: Retention против текущей библиотеки, Completion Rate уровня.
  3. Контент в центре. Витрина полок, где доминируют обложки, смещает фокус на контент и поднимает Click-Through Rate. Проверка: CTR обложек, Premium Conversion по заблокированным книгам.
Гипотеза 1: уровни от A1 до B2 и их книги вынесены на отдельный экран «План обучения»
Гипотеза 1: уровни от A1 до B2 и их книги вынесены на отдельный экран «План обучения»
Гипотеза 2: уровень A2 в путешествии, с шапкой, прогрессом и текущей книгой
Гипотеза 2: уровень A2 в путешествии, с шапкой, прогрессом и текущей книгой
Гипотеза 3: внутри уровня главный элемент обложка, по центру всегда одна книга
Гипотеза 3: внутри уровня главный элемент обложка, по центру всегда одна книга

Прототипирование

Спроектировал UI и собрал в Figma 3 high-fidelity прототипа. Все 3D-ассеты островов сгенерировал через AI-плагины.

Концепция 1, Classic. Консервативная: весь курс на одном экране «План обучения», в конце каждого уровня финальный тест.

Концепция 2, Modern journey. Интерактивная карта островов, по одному на уровень, воздушный шар двигается по мере прохождения. Остров бывает пройденным, текущим или недоступным.

Концепция 3, Avant-garde. Интерактивные полки с превью обложек, по которым видна растущая сложность. Внутри группы: «Продолжить читать», «Подробнее» и Reroll.

Концепция 1, Classic: уровень A1, текущая книга на тропе и панель «Читать»
Концепция 1, Classic: уровень A1, текущая книга на тропе и панель «Читать»
Концепция 2, Modern journey: острова-уровни, тропа и воздушный шар
Концепция 2, Modern journey: острова-уровни, тропа и воздушный шар
Концепция 3, Avant-garde: полки с уровнями и кнопки «Словарь» и «Предпочтения»
Концепция 3, Avant-garde: полки с уровнями и кнопки «Словарь» и «Предпочтения»

Прототипы

Интерактивный прототип подгружается из Figma только по запросу.

Открыть в Figma (откроется в новой вкладке)

Состояния книги

Во всех концепциях один набор состояний книги, поэтому прогресс читается по самой обложке. У прочитанной зелёная обводка и кнопка «Читать ещё раз». Текущая пульсирует, показывает шкалу прогресса и предлагает «Продолжить читать». Недоступная десатурирована, с замком и неактивной кнопкой «Недоступно». Последняя карточка уровня это финальный экзамен, его можно пройти досрочно.

Прочитанная книга: зелёная галочка, «Подробнее» и «Читать ещё раз»
Прочитанная книга: зелёная галочка, «Подробнее» и «Читать ещё раз»
Текущая книга: шкала прогресса и кнопка «Продолжить читать»
Текущая книга: шкала прогресса и кнопка «Продолжить читать»
Недоступная книга: обесцвеченная обложка, замок и неактивная кнопка
Недоступная книга: обесцвеченная обложка, замок и неактивная кнопка

Что дальше

Часть сценариев в тестовом осталась за рамками UI, поэтому я описал их идеями.

  • Онбординг в 2 этапа. Отметить любимые жанры тегами с иконками, потом любимые книги, сеткой обложек или Tinder-подобными свайпами. Вправо «хочу прочитать», влево «не моё», вверх «уже читал». За 30 секунд это даёт данные для персонального роадмапа, и первая книга вероятнее совпадёт со вкусом.
  • Reroll. Замена книги в рамках текущего уровня CEFR: крутятся три барабана, пользователь выбирает одну из 3 книг. Число замен ограничено, дополнительные за монетки.
  • Что после чтения. Тест по словам после уровня. Формат надо разнообразить, потому что закрыть 100+ слов одной механикой тяжело.
  • Общая библиотека слов. Отдельный вью со всеми словами из всех уровней и книг, которые пользователь отмечал.
  • Книжный клуб. Подсветка того, что эти же книги читают друзья или другие люди. Это даёт чувство сопричастности без навязчивости.
Финальный экзамен в конце уровня: слова, отмеченные при чтении, можно пройти досрочно
Финальный экзамен в конце уровня: слова, отмеченные при чтении, можно пройти досрочно

Главное

  • 3 различные версии полностью покрывают сценарии чтения и игровой прогресс для проверки гипотез.
  • AI-генерация 3D-ассетов. Самостоятельно создал острова и элементы интерфейса, чтобы визуализировать «Карту путешествия».
  • 100% автономность. Спроектировал архитектуру, сформулировал продуктовые гипотезы и собрал 3 версии UI в краткие сроки (2 дня).

Другие проекты

Все работы