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

…Или, если быть точнее, данный проект называется: «Разработка страницы с графическим представлением данных о позициях менеджеров в рейтинге по продажам».

Согласны, название не самое интригующее, но за ним кроется ооочень интересная, абсолютно новая для нашей компании задача, которую мы с успехом решили, отправив в дальнее плавание 30 менеджеров по продажам. Уже интереснее?

Чтобы в процессе прочтения кейса не пытать вас длинным названием, далее будем называть данный проект «игра».

Немного о клиенте

Компания «Ладья» — крупнейший региональный представитель и активный участник российского рынка строительных материалов по всей Кемеровской области и в городе Новосибирске с более чем 15-летней историей деятельности.

«Ладья» уже много лет является клиентом веб-студии AXI — от разработки сайта до его непрерывного совершенствования. Все сложные задачи компании руководство доверяет специалистам нашей студии, что очень ценно для нас!

Так как же родилась идея данного проекта?

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

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

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

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

Поплыли по процессу разработки

Поплыли по процессу разработки

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

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

Очень-очень грубый прототип
Очень-очень грубый прототип

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

  1. Трасса. Та часть экрана, на которой расположен вид на солнечное побережье, море и яхты участников (менеджеров).
  2. Мини-карта. Позволяет увидеть, на какой позиции относительно остальных участников находится авторизованный пользователь.
  3. Пользовательский блок. Блок с информацией по текущей Регате (название, имя участника, занимаемое им место).
  4. Вкладка «Чемпионаты». Содержит в себе рейтинговую таблицу по итогам Регат прошлых месяцев по всем участникам.

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

Самая первая зарисовка
Самая первая зарисовка

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

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

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

Обзор сверху

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

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

Имена на палубе

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

Яхты в шахматном порядке

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

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

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

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

Внешний вид мини-игры

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

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

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

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

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

Регата готова

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

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

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

Турнирная таблица

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

Финиш

Хотелось бы поблагодарить наших коллег из компании «Ладья» за крутую идею, многолетнее доверие к нашей веб-студии и постоянную вовлеченность в работу! Желаем вам выполнять план продаж и всегда быть на плаву!

Финиш

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

Перейти на сайт

Полный текст статьи читайте на CMS Magazine