СМИТАП — геймификация онлайн-курсов
Атвинта — статьи и проекты ·
Добавили игровые механики на платформе подготовки к ЕГЭ: левелы, ачивки, персонажи
Наш заказчик — онлайн-школа подготовки к ЕГЭ СМИТАП. С компанией работаем уже 3 года. За это время с нуля разработали и внедрили образовательную платформу, в которой можно смотреть уроки, выполнять домашние задания и готовиться к экзаменам. Внутри сервиса — более 100 курсов разного формата по 8 предметам.
С этим проектом мы одержали победу на ключевом диджитал-конкурсе Tagline Awards — получили бронзу за «Лучшую образовательную платформу». А еще стали финалистами не менее масштабной премии G8 в номинации «Рост», где жюри оценивали вклад веб-сервисов в развитие бизнеса.
Сервисом каждый день пользуются от 5 000 до 8 000 школьников — платформа помогает успешно подготовиться к экзаменам и поступить в лучшие вузы страны.
Предстояло внедрить геймификацию в образовательный процесс платформы СМИТАП.
Мы с клиентом постоянно работаем над улучшением продукта — увеличиваем производительность, устраняем баги, добавляем новые фичи. Все для того, чтобы создать идеальный пользовательский опыт и сделать обучение максимально комфортным.
После первого релиза сервиса были покрыты все основные функции. Для учеников мы добавили просмотр уроков, выполнение домашних заданий, конспекты, дневник и даже дашборд, чтобы не пропустить ни один дедлайн.
Для кураторов сделали проверку заданий и журнал. А еще облегчили работу методистов — для них создали конструктор курсов, который позволяет быстро собрать любую программу: от экспресс-марафона до полноценного обучения на полугодие или год.
Еще на старте проекта сформировали бэклог доработок, и следующим большим шагом после основного релиза стала игрофикация.
В эдтехе игровые механики очень популярны, они помогают решить следующие задачи:
На основе модели Ю-Кай-Чоу и результатов опроса 1 000 учеников онлайн-школы отобрали наиболее интересные и мотивирующие учеников СМИТАП инструменты игрофикации: систему уровней и достижений.
Далее продумали логику повышения левелов и получения ачивок. Дизайнеры создали макеты для нового функционала — на этом этапе особое внимание уделили отрисовке игровых иконок.
С технической стороны сделали под игрофикацию отдельный бэк. Для учета действий пользователей проработали систему логирования и сбора необходимых данных. И, конечно, сверстали и зарелизили новый раздел, чтобы ученикам было еще интереснее выполнять задания и смотреть уроки.
Наши аналитики изучили игровые механики на эдтех-рынке и провели масштабное исследование пользовательского опыта.
В основе геймификации обучения лежит система Ю-Кай-Чоу. Она базируется на 8 видах потребностей, которые мотивируют включаться в процесс и активнее взаимодействовать с интерфейсом.
Игровые механики воздействуют на различные стимулы, и это пробуждает интерес. Например, левелы и ачивки, которые мы внедрили на платформе, работают на следующие триггеры:
Мы провели опрос среди 1 000 учеников СМИТАП, которые занимались в том числе на других образовательных платформах.
По мнению респондентов, игровые механики действительно пробуждают азарт и интерес к учебе, однако не все из них вызывают положительные эмоции. Например, многие ответили, что рейтинги и сравнение с другими учениками расстраивает их.
В топе самых интересных фич оказались:
Идею с уровнями и достижениями поддержали больше всего респондентов — за них проголосовали 606 и 579 учеников соответственно. Плюс эти инструменты покрывают почти все стимулы по Ю-Кай Чоу, а значит, смогут обеспечить наиболее высокую силу мотивации. Поэтому в качестве ключевых элементов геймификации решили взять систему уровней и систему достижений.
Самые залипательные игры — те, где надо прокачивать персонажа. На нашей платформе ученики сами становятся героями, которые переходят с одного уровня на другой и покоряют «босса» в виде ЕГЭ.
Мы разработали систему из 36 уровней. Чтобы повысить левел, ученик должен посмотреть определенное количество уроков и выполнить нужное количество заданий — это ключевые критерии прогресса по курсу. Для присвоения уровней на бэке добавили функционал, который собирает данные пользователя и рассчитывает левел по специальной формуле.
У СМИТАП широкая линейка курсов, и на платформе ученик может проходить сразу несколько предметов. В этом случае прогресс будет отслеживаться отдельно по каждой программе. Полученные уровни отображаются на общей странице игрофикации.
Систему уровней отразили в виде карты. Это создает ассоциацию с приключениями и квестами. У каждого уровня — своя иконка и уникальное тематическое название, например: «Укротитель ЕГЭ», «Герой СМИТАП», «Лаборант». Такие формулировки еще больше погружают в атмосферу обучения.
Достижения или ачивки — это награды за выполнение определенных действий. Ключевое в их проработке — данные и действия пользователя, которые учитываются в системе.
В нашем случае это:
Сложность в том, что исходя из набора довольно стандартных действий нужно было придумать нескучные и разнообразные ачивки, которые порадуют учеников. Всего сгенерировали 25 креативных достижений.
В нейминге искали забавные аналогии и отсылки, чтобы подбодрить ребят. Например, за просмотр 5 уроков вручаем статус «Преданного зрителя». А за просмотр урока в записи дается ачивка «Назад в будущее».
Важная часть здесь — иконки. В геймификации образования визуал должен вызывать эмоции и поднимать настроение, особенно в момент похвалы и новости о достижении.
Карина Скородинская; ex-дизайн-лид
Каждой иконке добавили анимацию для дополнительного взаимодействия с пользователем. Такой визуал создает ощущение праздника или вручения подарка в особой атмосфере.
https://player.vimeo.com/video/936216248
Анимация иконки
Cоздали друга, который поддерживает учеников мотивирующими фразами. Персонаж разработан все в той же мягкой и дружелюбной стилистике.
Из-за формы и цвета команда ласково прозвала его Фасолинкой :)
У персонажа большой потенциал. В бэклоге лежит идея кастомизации, например, его можно будет одевать, выбирать цвет кожи и давать имя. Еще Фасолинка может стать полезным как помощник ученика — от имени персонажа можно рассылать уведомления или добавить его на этап онбординга, когда пользователь знакомится с платформой.
А если идти еще дальше, то можно сделать персонажа маскотом бренда и добавить коммуникацию от его имени в маркетинг и SMM.
Функционал продукта постоянно расширяется, и задача дизайнеров — органично вписать в интерфейс новые разделы и возможности.
Еще на старте разработки сервиса мы создали подробный UI-Kit и дизайн-систему. С ними было легко спроектировать раздел игрофикации, а также подобрать стилистику и структуру для ее страниц.
Сначала разработали прототипы, на которых отразили функционал системы уровней и достижений.
Далее приступили к макетам. За основу взяли текущую цветовую гамму, паттерны, кнопки, поля и оформление блоков.
Разработка продуктов отличается гибкостью — команда может менять решения, фокус и пробовать разные гипотезы. Так было и в нашей игрофикации — во время работы решили сместить акцент с персонажа и уделить больше внимания ачивкам и уровням. Поэтому в процессе макет раздела несколько раз менялся.
Новым атрибутом интерфейса стали игровые иконки. В них мы отошли от пастельных тонов и позволили себе более яркие, но все же не выбивающиеся из общего визуала цвета. Добавили плавную анимацию, а в стилистике придерживались настроения платформы: уют, комфорт, поддержа, мягкость.
Кроме нового раздела игрофикацию нужно было отразить в конструкторе, где методисты собирают обучающие программы. Для этого добавили специальный тумблер на этапе создания курса.
Чтобы интегрировать игрофикацию в пользовательские пути, создали модальные окна и сообщения с отображением ачивки и уровня. Они появляются на экране в момент присвоения награды.
https://player.vimeo.com/video/936223293
Согласно опросу клиента, средняя оценка удобства платформы учениками равняется 90%. А вот цитаты из отзывов в социальных сетях СМИТАП — пользователям нравится наш личный кабинет :)
Эля Смит; Основатель, CEO СМИТАП
На платформе СМИТАП появился инструмент, дополнительно мотивирующий учеников на успешное выполнение заданий и просмотр уроков. Геймификация — это про дружелюбный и внимательный подход к обучению, когда достижения поощряются системой и поднимают интерес к полному прохождению курсов.
Для внедрения игровых механик провели большой пул работ:
В дальнейших планах по развитию сервиса: увеличение производительности платформы, добавление новых функций и подготовка к следующему учебному году.