Преодолеть преграды в игре, а затем — в учёбе и в жизни. Такую цель перед пользователями поставило агентство Go Mobile, создав игру для онлайн-платформы GeekBrains. В этой статье расскажем, как сделали увлекательную лендинг-игру на JavaScript всего за неделю и привлекли тысячи новых пользователей на образовательный портал.
Платформа GeekBrains создает образовательные продукты как для опытных специалистов, так и для тех, кто хочет освоить новую профессию. GeekBrains предлагает интенсивы, краткосрочные и долгосрочные курсы в разных сферах, но курсы об информационных технологиях преобладают: программирование, дизайн, маркетинг, аналитика, креатив и т.д.
Цель: привлечение новых пользователей
Перед нами стояла задача создать игру, которая привлечёт на платформу новую аудиторию. Чтобы не просто создать трафик, а по-настоящему вовлечь аудиторию, мы добавили анкету. В ней пользователи рассказывали о своих предпочтениях и профессиональных планах, а в обмен получали скидку на обучение на подходящем им курсе.
Также пользователи оставляли на платформе контакты, чтобы принять участие в розыгрыше ценных призов от GeekBrains в стриме блогера Wylsacom.
Механика игры: ловить или избегать
Все началось с идеи. Мы хотели сделать игру, которая не просто развлекает, а вдохновляет на перемены. Стремились донести посыл: «Развивайтесь, несмотря на препятствия».
Мы искали интуитивно понятную механику, чтобы пользователь легко мог начать игру. При этом нам было важно вызвать азарт у пользователей.
Рассматривали два варианта механики. Первый: герой постоянно двигается и избегает опасные объекты (как в игре Flappy Bird). Второй: персонаж не даёт объектам упасть (вспомните электронную игру «Ну, погоди!», или «Волк ловит яйца»).
Выбрали первую механику. Она лучше отражает идею преодоления препятствий.
В нашей игре персонаж летает. На его пути возникают объекты, от них нужно уворачиваться. Управление простое: нажимаешь пробел — летишь вверх, отпускаешь — падаешь. Чем больше очков набирает игрок, тем больше скидка на курсы GeekBrains.
Дизайн: хищники, монстры и злые люди
Подготовили три визуальные концепции: «Злые люди», «Хищники» и «Комната страха». В «Хищниках» и «Комнате страха» противниками стали выдуманные существа: антропоморфы или сверхъественные силы. В концепции «Злые люди» герой сталкивался с проблемами, которые близки пользователям, поэтому мы в итоге остановились на ней.
Главный герой — офисный сотрудник в супергеройском плаще. На протяжении пути он постоянно преодолевает препятствия. Всё как в жизни — хочется добиться большего, но что-то мешает:
- начальство, коллега или бабушка с неуместными возражениями
- соблазны — телевизор, диван — и сомнения героя: «А вдруг не получится?»
- мелкие неприятности: яблочный огрызок, ошибка 404 и др.
Все объекты в игре чёрно-белые и размещены на фиолетовом фоне, чтобы соответствовать стилистике GeekBrains. Во время игры фон меняется на чёрный, а затем — на красный. Внизу появляются огоньки пламени и увеличивают эмоциональное напряжение, ведь горящие дедлайны все ближе.
Разработка и вёрстка: неделя на все
Наш разработчик написал игру на JavaScript. Не обошлось без трудностей. Мы столкнулись с проблемой адаптации игры в полноэкранном режиме на мобильных устройствах.
На создание игры у нас было чуть больше недели, но мы всё успели и не поступились качеством. К моменту розыгрыша призов игра была полностью готова и много раз протестирована гоуллегами.
Дизайн дополнительных материалов
Помимо игры мы создали дизайн промоматериалов: баннеров и email-рассылки. Сохранили в них стилистику игры и усилили акцент на розыгрыше.
Предполагалось, что пользователь увидит наш баннер, перейдёт по нему и оставит контакты, чтобы начать игру. На почту придет рассылка с более подробными условиями и ссылкой на анкету, которую нужно заполнить для участия в розыгрыше.
4 совета тем, кто создает игры для брендов
- Устраивайте встречи с клиентом как можно чаще: показывайте промежуточные варианты, просите обратную связь.
- Тестируйте готовую игру много раз. Привлекайте людей из команды, которые не участвуют в проекте. Свежий взгляд поможет отыскать неочевидные нестыковки.
- Не бойтесь сжатых сроков у сложных задач, если у вас сильная и организованная команда.
- Кайфуйте <3
Команда проекта
Анастасия Асташова, арт-директор
Кристина Симакова, проджект-менеджер
Диана Леймоева, иллюстратор
Никита Беляков, верстальщик-разработчик
Марина Науменко, копирайтер
Пётр Дремлюгин, джедай переговоров
нравится кейс, круто, что в статье не просто описали как сделали JS-игру, а раскрыли креативную сторону процесса – как выбирали механики, какой отклик ожидали от пользователей и так далее.
очень часто кейсы выглядят пусто и скучно потому что то как они делаются – это no-rocket-scince, а вот то, что за подготовкой кейса лежит большой креативный процесс рассказывают редко, а по-моему, это более интересно, чем пара непривязанных ни к чему метрик и список использованных технологий
за раскрытие креатива отдельный респект!
И веовь комментарии от аффилированных с компанией людей… Сколько можно-то?
я и не скрываю, что я сотрудник этого агентства, но почему это должно запрещать мне выражать мои эмоции по поводу того, что делают мои коллеги? :-)
Но Вы и не сообщаете об этом сразу в дисклеймере к комментарию. Согласитесь, это придаёт Вашему комментарию несколько иной окрас. Ну например, это показывает, что вы пришли сюда по ссылке из корпоративного чата, в котором всех попросили поставить плюсы и написать комментарии.
И судя по всему, заплюсовать комментарии коллег тоже.
хм, это довольно странное требование.
получается, что все комментаторы должны в каждом комментарии писать дисклеймер, потому что если человек не сотрудник одной из упомянутых в статье компаний, он может оказаться сотрудником конкурирующей организации, или же партнером.
правда мне кажется, что именно для этого на сайте есть возможность посмотреть информацию о комментаторах и сделать вывод об их аффилированности с автором статьи.
но вообще мне гораздо интереснее другой вопрос – а как вам кейс, да и сама статья? понравился ли ход творческой мысли, понравилась ли подача?
учитывая, что мне и правда не чужды упомянутые в статье люди, я искренне хотел бы узнать как коллеги, находящимся более или менее в том же рынке, оценивают такую деятельность
Комментарий недоступен
Комментарий недоступен
Судя по надписи на заборе, там проститутошная, а на самом деле - дрова.
Судя по надписям на сайте Гикбрейнс, там курсы, на самом деле — наебалово.
"Кайфуйте <3" 😄👍🏻
Нереально крутая идея! я в восторге
Крутой кейс, я бы еще хотел видеть, если это возможно перформанс значения вплоть до ДРР :-))
"Выбрали первую механику. Она лучше отражает идею преодоления препятствий"
Или просто потому что это один в один игра от Икеа? Проще было содрать! Так честнее будет)