Разработка корпоративной игры для компании «Ладья»

В филиалах компании трудится более 30-ти менеджеров по продажам, и, конечно же, в начале каждого месяца всем им ставится план продаж.

Погоня менеджеров за планом не так уж проста и весела. Чтобы как-то скрасить трудовые будни и разжечь соревновательный дух у менеджеров, руководители компании «Ладья» решили разработать игру, которая будет мотивировать сотрудников на увеличение продаж. Цель этой игры: борьба за место лучшего продавана компании.

Со своей идеей они обратились к нам в веб-студию, и мы отреагировали всеми руками «за».

Так как компания называется «Ладья», было решено делать игру в «морской» тематике. Название подобрали соответствующее — «Регата».

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

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

Основными составляющими Регаты, согласно прототипу, стали:

Трасса. Та часть экрана, на которой расположен вид на солнечное побережье, море и яхты участников (менеджеров).

Мини-карта. Позволяет увидеть, на какой позиции относительно остальных участников находится авторизованный пользователь.

Пользовательский блок. Блок с информацией по текущей Регате (название, имя участника, занимаемое им место).

Вкладка «Чемпионаты». Содержит в себе рейтинговую таблицу по итогам Регат прошлых месяцев по всем участникам.

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

Оказалось не так-то просто разместить 30 яхт так, чтобы они вошли на первый экран старта, были адекватного размера, не перекрывали друга друга, а на их бортах были читаемые имя и фамилия участника.

К решению этой задачи мы шли несколькими путями. (Внимание! Далее — черновые, очень черновые, очень-очень черновые варианты!).

Для начала мы выбрали самый простой путь и взяли угол обзора сверху. Но, в таком случае, не решалась задача по размещению ФИО участников на борту яхты и парусе. Эту проблему мы решили с помощью баблов — всплывающих окон с ФИО участника при наведении на яхты.

Такой вариант не удовлетворил заказчика, и мы стали думать дальше.

Далее была идея разместить ФИО на палубе, но при увеличении количества яхт на экране, эта задумка потерпела фиаско.

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

Мы разместили яхты в шахматном порядке, что позволило, во-первых, изобразить их максимально реалистичными, во-вторых, разместить ФИО в читаемом виде и, в-третьих, расположить 30 яхт без особого труда на линии старта.

Для заднего плана Регаты было выбрано солнечное побережье южного города (который как бы намекает: «Приплывешь первым, получишь премию и будешь сидеть вон под той пальмой».).

Мы даже добавили в игру живности (дельфинов, чаек и… акулу!), дабы периодически веселить участников гонки.

А меню и мини-карта игры расположились вверху экрана.

Для визуализации результатов менеджеров мы реализовали «приёмник», в который 1С заказчика отправляет необходимые данные. Приёмник, получив эти данные, записывает их в базу данных сайта, в нужном для вывода виде. Периодический обмен данными позволяет следить за передвижением лодок в реальном времени.

Для удобного представления результатов за основу было решено взять Swiper — один из популярнейших плагинов карусели, так что вопрос механики переходов по этапам отпал сам собой.

Немного математики для расчета позиционирования лодок в зависимости от счета пользователей, плюс магия svg-фильтров feTurbulence и feDisplacementMap для имитации волн на статичной картинке воды.

И вуаля — Регата готова!

В процессе разработки игры был добавлен новый функционал. В Регате участвуют менеджеры из Новокузнецка, Кемерова, Новосибирска, поэтому было решено добавить фильтр по городам и фильтр Сибирь, показывающий общий зачет.

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

Также мы разработали турнирную таблицу, в которой располагается подробная информация о прошедших и текущей Регатах: общий зачет за месяц по всем подразделениям, итоги каждого подразделения, а также общий годовой зачет.

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

Нужно создать мотивирующую игру для повышения вовлеченности ваших сотрудников в работу и перевыполнения планов? Теперь вы знаете, к кому обратиться за помощью в разработке! А тематику и средства передвижения мы поможем вам придумать и реализуем всё в лучшем виде! ;-)