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

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

Общее количество товаров на сайте свыше 35 000 единиц, более 20 марок строительных материалов, 32 000 м2 складских помещений и 19 торговых точек.

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

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

Тип сайта:
Корпоративный портал
Отрасль:
Торговля

Процесс работы

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

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

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

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

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

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

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

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

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

Поплыли

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

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

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

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

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

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

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

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

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

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

Еще один вариант

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоговый результат

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

Проектная группа

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

Создаем и продвигаем сайты с 2007 года. Знаем, как привлечь клиентов в любой бизнес

Похожие работы

Корпоративные сайты
НЗТО
Корпоративные сайты
Aвтосервис «Автодром»
Корпоративные сайты
КузбассОблГаз