Игровые тренажеры для курса английскогоРабочий кейс

Контекст

Amakids — это школа дополнительного образования для детей в возрасте от 5 до 14 лет, предлагающая как онлайн, так и офлайн курсы по различным школьным предметам, и не только, например, финансовая грамотность и многое другое.

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

Я присоединилась к проекту в самом начале разработки курса как единственный продуктовый дизайнер на этом проекте и довела его до стадии MVP. Я проектировала разделы "Челлендж" и "Игры". Они являются частью курса английского и созданы для повторения материала, изученного на уроках.

Проблема

Обычные домашние задания часто выполняются «из-под палки», усвоение знаний при этом минимальное. Они однообразны — подчеркни, впиши и т.д., — и быстро надоедают ребёнку. Без чёткого ощущения достижения целей мотивация снижается. Игровые тренажёры превращают выполнение задания в увлекательный процесс. Ребёнок получает цель и мгновенную обратную связь, что поддерживает интерес. В дополнение к знаниям развиваются внимание и мышление.

Задача

1. Спроектировать навигацию платформы.
2. Спроектировать разделы домашнего задания «Челлендж» и «Игры».

Что сделала

1. Вместе с методистами разобрали игры, определили их отображение на мобильных устройствах, внесли изменения в документацию.
2. Исследовала интересы и увлечения аудитории, посмотрела конкурентов, предыдущие курсы компании.
3. Построила информационную архитектуру, набросала скетчи, скринфлоу, согласовала.
4. Вместе с разработчиками согласовала основные элементы интерфейса и начала собирать UI-kit.
5. Выяснила у аналитика распространенные размеры экранов, по одному для десктопа, планшета и мобилки.
6. Разработала макеты платформы, челленджа и игровых тренажеров с атомарным UI-kit.
7. По мере реализации игр проводила дизайн-ревью и выпускала их в MVP.

ЦА

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

Скринфлоу

Собрала скринфлоу по схеме информационной архитектуры и созданным скетчам.

User flow: Выполнение домашнего задания

Юзер флоу с разными точками входа в тренажёр английских слов:

1. Через задание от учителя. После урока учитель формирует домашнее задание в личном кабинете, указывая слова, пройденные на уроке. Ученик запускает тренажёр с набором из Словаря.
2. Случайный набор слов. Пользователь самостоятельно запускает тренажёр с рандомным набором слов из разных тем для дополнительной практики.
3. Из выбранного набора слов. Пользователь выбирает конкретный тематический набор и запускает тренажёр со словами только из этого набора.

Решение

Happy path

Ученик выполняет домашнее задание, выданное учителем после онлайн или оффлайн урока. Вход в сценарий — из меню платформы.

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

Ученик знакомится с правилами тренажёра. Здесь же дублируется список настроек, выставленных учителем.

После этого нажимает кнопку «Играть» и проходит тренажёр.

Когда игра закончена, ученик видит свой результат.

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

Экран, когда ученик заканчивает прохождение Челленджа.

Список игр

39 игр было создано за время разработки курса. Каждая из них прокачивает определенный навык или набор навыков.

Адаптивы

Для каждой игры и платформы был создан адаптив под мобильные устройства.

Библиотека компонентов

Система отступов

Чтобы упростить работу разработчиков, я создала систему отступов.

Атомарный UI-kit

У курса 4 цветовые схемы — по одной на каждый уровень, поэтому возникли сложности с неймингом цветов и организацией UI-kit в целом. В результате появился UI-kit по атомарному дизайну.

Результаты

Адаптивность

Челлендж подразумевает детальное подтягивание отдельных учеников по конкретным темам. Это значит, что если учитель видит ученика А, отстающего по теме “Числа”, он назначит ему индивидуальный тренажёр на отработку этой темы.

Интерактивность

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