Как мы создали веб-игру для GeekBrains за неделю и привлекли 24 тысячи уникальных пользователей

Преодолеть преграды в игре, а затем — в учёбе и в жизни. Такую цель перед пользователями поставило агентство Go Mobile, создав игру для онлайн-платформы GeekBrains. В этой статье расскажем, как сделали увлекательную лендинг-игру на JavaScript всего за неделю и привлекли тысячи новых пользователей на образовательный портал.

Как мы создали веб-игру для GeekBrains за неделю и привлекли 24 тысячи уникальных пользователей

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

Цель: привлечение новых пользователей

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

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

Механика игры: ловить или избегать

Все началось с идеи. Мы хотели сделать игру, которая не просто развлекает, а вдохновляет на перемены. Стремились донести посыл: «Развивайтесь, несмотря на препятствия».

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

Рассматривали два варианта механики. Первый: герой постоянно двигается и избегает опасные объекты (как в игре Flappy Bird). Второй: персонаж не даёт объектам упасть (вспомните электронную игру «Ну, погоди!», или «Волк ловит яйца»).

Как мы создали веб-игру для GeekBrains за неделю и привлекли 24 тысячи уникальных пользователей

Выбрали первую механику. Она лучше отражает идею преодоления препятствий.

В нашей игре персонаж летает. На его пути возникают объекты, от них нужно уворачиваться. Управление простое: нажимаешь пробел — летишь вверх, отпускаешь — падаешь. Чем больше очков набирает игрок, тем больше скидка на курсы GeekBrains.

Дизайн: хищники, монстры и злые люди

Подготовили три визуальные концепции: «Злые люди», «Хищники» и «Комната страха». В «Хищниках» и «Комнате страха» противниками стали выдуманные существа: антропоморфы или сверхъественные силы. В концепции «Злые люди» герой сталкивался с проблемами, которые близки пользователям, поэтому мы в итоге остановились на ней.

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

  • начальство, коллега или бабушка с неуместными возражениями
  • соблазны — телевизор, диван — и сомнения героя: «А вдруг не получится?»
  • мелкие неприятности: яблочный огрызок, ошибка 404 и др.
Как мы создали веб-игру для GeekBrains за неделю и привлекли 24 тысячи уникальных пользователей

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

Разработка и вёрстка: неделя на все

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

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

Дизайн дополнительных материалов

Помимо игры мы создали дизайн промоматериалов: баннеров и email-рассылки. Сохранили в них стилистику игры и усилили акцент на розыгрыше.

Как мы создали веб-игру для GeekBrains за неделю и привлекли 24 тысячи уникальных пользователей

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

Как мы создали веб-игру для GeekBrains за неделю и привлекли 24 тысячи уникальных пользователей

4 совета тем, кто создает игры для брендов

  1. Устраивайте встречи с клиентом как можно чаще: показывайте промежуточные варианты, просите обратную связь.
  2. Тестируйте готовую игру много раз. Привлекайте людей из команды, которые не участвуют в проекте. Свежий взгляд поможет отыскать неочевидные нестыковки.
  3. Не бойтесь сжатых сроков у сложных задач, если у вас сильная и организованная команда.
  4. Кайфуйте <3

Команда проекта

Анастасия Асташова, арт-директор

Кристина Симакова, проджект-менеджер

Диана Леймоева, иллюстратор

Никита Беляков, верстальщик-разработчик

Марина Науменко, копирайтер

Пётр Дремлюгин, джедай переговоров

2626
13 комментариев

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

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

за раскрытие креатива отдельный респект!

5
Ответить

И веовь комментарии от аффилированных с компанией людей… Сколько можно-то? 

4
Ответить

Комментарий недоступен

4
Ответить

Комментарий недоступен

1
Ответить

Судя по надписи на заборе, там проститутошная, а на самом деле - дрова.

1
Ответить

"Кайфуйте <3" 😄👍🏻

1
Ответить

Нереально крутая идея! я в восторге

1
Ответить