МТС проводит TRUE TECH CHAMP — олимпиаду для it-профи и школьников, в которой каждый может побороться за приз до 3.000.000 ₽ и получить оффер на работу в компании. Под это событие было необходимо разработать интерактивный квест с вопросами, который являлся бы отборочным этапом на it-ивент.

Суть игры

Я взялся за дизайн квеста. Было сделано: дизайн игрового поля, дизайн экрана с правилами и дизайн лидерборда, а также дизайн мотивирующих pop-up окон, которые всплывают после верного ответа на вопрос квеста. Все элементы и их состояния упакованы в figma в «component set», типографика и палитра оформлены в стили, игровые экраны объединены в «auto layout». Дизайн выполнен по принципу pixel perfect, чтобы разработчикам было удобно верстать.

/ pop-up после верного ответа

Игрок оказывает в офисе МТС. Перед ним 7 поинтов, каждый из которых необходимо разблокировать. Давайте сделаем это вместе с вами — жмите на кнопку со стрелкой, чтобы перейти к следующим поинтам.

Стартовый экран

[+]

У каждого из объектов отрисовано по 3 состояния + анимация по завершению игры. Состояния: 1 - неактивный, серый (игрок ещё не дошел до объекта), 2 - активный, ярко-красный (текущий вопрос), завершенный (игрок перешел к следующим вопросам)

Игровые элементы

[+]

Показать backstage

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

Квест

[+]

Ответить на вопрос

Показать backstage

Чтобы пройти игры и отборочный этап игроку необходимо правильно ответить как минимум на 4 вопроса из 7. При выполнении этого условия на игровом поле включается анимация и игроку показывает сообщение с информацией о том, что он успешно завершил квест.

Финал