Процесс работы
....Или, если быть точнее, данный проект называется: «Разработка страницы с графическим представлением данных о позициях менеджеров в рейтинге по продажам».
Согласны, название не самое интригующее, но за ним кроется ооочень интересная, абсолютно новая для нашей компании задача, которую мы с успехом решили, отправив в дальнее плавание 30 менеджеров по продажам. Уже интереснее?
Чтобы в процессе прочтения кейса не пытать вас длинным названием, далее будем называть данный проект «игра».
Так как же родилась идея данного проекта?
В филиалах компании трудится более 30-ти менеджеров по продажам, и, конечно же, в начале каждого месяца всем им ставится план продаж.
Погоня менеджеров за планом не так уж проста и весела. Чтобы как-то скрасить трудовые будни и разжечь соревновательный дух у менеджеров, руководители компании «Ладья» решили разработать игру, которая будет мотивировать сотрудников на увеличение продаж. Цель этой игры: борьба за место лучшего продавана компании.
Со своей идеей они обратились к нам в веб-студию, и мы отреагировали всеми руками «за».
Так как компания называется «Ладья», было решено делать игру в «морской» тематике. Название подобрали соответствующее — «Регата».
Поплыли по процессу разработки
После встречи с клиентом по обсуждению Регаты, проектная группа вышла, вдохновленная абсолютно новым форматом работ, и приступила к первой части разработки игры — написанию технического задания.
Для начала мы описали понимание задачи, затем подробно расписали требования к доступам, данным и внешнему виду пользовательской части.
Основными составляющими Регаты, согласно прототипу, стали:
- Трасса. Та часть экрана, на которой расположен вид на солнечное побережье, море и яхты участников (менеджеров).
- Мини-карта. Позволяет увидеть, на какой позиции относительно остальных участников находится авторизованный пользователь.
- Пользовательский блок. Блок с информацией по текущей Регате (название, имя участника, занимаемое им место).
- Вкладка «Чемпионаты». Содержит в себе рейтинговую таблицу по итогам Регат прошлых месяцев по всем участникам.
После согласования всех нюансов с клиентом, мы перешли к разработке дизайна. Здесь проектная группа то шла ко дну, то выплывала на поверхность дизайнерских идей.
Оказалось не так-то просто разместить 30 яхт так, чтобы они вошли на первый экран старта, были адекватного размера, не перекрывали друга друга, а на их бортах были читаемые имя и фамилия участника.
К решению этой задачи мы шли несколькими путями. (Внимание! Далее — черновые, очень черновые, очень-очень черновые варианты!).
Для начала мы выбрали самый простой путь и взяли угол обзора сверху. Но, в таком случае, не решалась задача по размещению ФИО участников на борту яхты и парусе. Эту проблему мы решили с помощью баблов — всплывающих окон с ФИО участника при наведении на яхты.
Такой вариант не удовлетворил заказчика, и мы стали думать дальше.
Далее была идея разместить ФИО на палубе, но при увеличении количества яхт на экране, эта задумка потерпела фиаско.
Отмели идею с видом сверху, вернулись к прототипу и первой зарисовке. После недолгих манипуляций мы пришли к оптимальному решению поставленной задачи, разместив яхты следующим образом:
Мы разместили яхты в шахматном порядке, что позволило, во-первых, изобразить их максимально реалистичными, во-вторых, разместить ФИО в читаемом виде и, в-третьих, расположить 30 яхт без особого труда на линии старта.
Для заднего плана Регаты было выбрано солнечное побережье южного города (который как бы намекает: «Приплывешь первым, получишь премию и будешь сидеть вон под той пальмой».).
Мы даже добавили в игру живности (дельфинов, чаек и... акулу!), дабы периодически веселить участников гонки.
А меню и мини-карта игры расположились вверху экрана.
Когда дизайн был отрисован и утвержден с клиентом, программист приступил к оживлению макетов.
Для визуализации результатов менеджеров мы реализовали «приёмник», в который 1С заказчика отправляет необходимые данные. Приёмник, получив эти данные, записывает их в базу данных сайта, в нужном для вывода виде. Периодический обмен данными позволяет следить за передвижением лодок в реальном времени.
Для удобного представления результатов за основу было решено взять Swiper — один из популярнейших плагинов карусели, так что вопрос механики переходов по этапам отпал сам собой.
Немного математики для расчета позиционирования лодок в зависимости от счета пользователей, плюс магия svg-фильтров feTurbulence и feDisplacementMap для имитации волн на статичной картинке воды.
И вуаля — Регата готова!
В процессе разработки игры был добавлен новый функционал. В Регате участвуют менеджеры из Новокузнецка, Кемерова, Новосибирска, поэтому было решено добавить фильтр по городам и фильтр Сибирь, показывающий общий зачет.
Таким образом, каждый участник может отследить свое положение как в рамках своего города, так и в рамках всех подразделений, либо посмотреть, как поживают его коллеги из других городов.
Также мы разработали турнирную таблицу, в которой располагается подробная информация о прошедших и текущей Регатах: общий зачет за месяц по всем подразделениям, итоги каждого подразделения, а также общий годовой зачет.
В итоге у нас получился инструмент, помогающий мотивировать менеджеров по продажам на выполнение плана за счет наглядного и подробного представления результатов продаж в виде яхт и таблиц, а также яркого анимированного интерфейса.
Итоговый результат
Хотелось бы поблагодарить наших коллег из компании «Ладья» за крутую идею, многолетнее доверие к нашей веб-студии и постоянную вовлеченность в работу! Желаем вам выполнять план продаж и всегда быть на плаву!
Нужно создать мотивирующую игру для повышения вовлеченности ваших сотрудников в работу и перевыполнения планов? Теперь вы знаете, к кому обратиться за помощью в разработке! А тематику и средства передвижения мы поможем вам придумать и реализуем всё в лучшем виде! ;-)