Процесс работы
....Или, если быть точнее, данный проект называется: «Разработка страницы с графическим представлением данных о позициях менеджеров в рейтинге по продажам».
Согласны, название не самое интригующее, но за ним кроется ооочень интересная, абсолютно новая для нашей компании задача, которую мы с успехом решили, отправив в дальнее плавание 30 менеджеров по продажам. Уже интереснее?
Чтобы в процессе прочтения кейса не пытать вас длинным названием, далее будем называть данный проект «игра».
Так как же родилась идея данного проекта?
В филиалах компании трудится более 30-ти менеджеров по продажам, и, конечно же, в начале каждого месяца всем им ставится план продаж.
Погоня менеджеров за планом не так уж проста и весела. Чтобы как-то скрасить трудовые будни и разжечь соревновательный дух у менеджеров, руководители компании «Ладья» решили разработать игру, которая будет мотивировать сотрудников на увеличение продаж. Цель этой игры: борьба за место лучшего продавана компании.
Со своей идеей они обратились к нам в веб-студию, и мы отреагировали всеми руками «за».
Так как компания называется «Ладья», было решено делать игру в «морской» тематике. Название подобрали соответствующее — «Регата».
Поплыли по процессу разработки
![Поплыли Поплыли](/upload/medialibrary/c3b/6us70uxrtaok5leh37i0p2b2lnf7insr/poplyli-_1_.gif)
После встречи с клиентом по обсуждению Регаты, проектная группа вышла, вдохновленная абсолютно новым форматом работ, и приступила к первой части разработки игры — написанию технического задания.
Для начала мы описали понимание задачи, затем подробно расписали требования к доступам, данным и внешнему виду пользовательской части.
![Прототип Прототип](/upload/resize_cache/webp/medialibrary/31d/ai27o0cih3yq1muevkqjf39bma73hr8y/prototip.webp)
Основными составляющими Регаты, согласно прототипу, стали:
- Трасса. Та часть экрана, на которой расположен вид на солнечное побережье, море и яхты участников (менеджеров).
- Мини-карта. Позволяет увидеть, на какой позиции относительно остальных участников находится авторизованный пользователь.
- Пользовательский блок. Блок с информацией по текущей Регате (название, имя участника, занимаемое им место).
- Вкладка «Чемпионаты». Содержит в себе рейтинговую таблицу по итогам Регат прошлых месяцев по всем участникам.
После согласования всех нюансов с клиентом, мы перешли к разработке дизайна. Здесь проектная группа то шла ко дну, то выплывала на поверхность дизайнерских идей.
![Первая зарисовка Первая зарисовка](/upload/resize_cache/webp/medialibrary/fc6/kt6ppu8u6srhipyvkrknwosj2qapihwu/zarisovka.webp)
Оказалось не так-то просто разместить 30 яхт так, чтобы они вошли на первый экран старта, были адекватного размера, не перекрывали друга друга, а на их бортах были читаемые имя и фамилия участника.
К решению этой задачи мы шли несколькими путями. (Внимание! Далее — черновые, очень черновые, очень-очень черновые варианты!).
Для начала мы выбрали самый простой путь и взяли угол обзора сверху. Но, в таком случае, не решалась задача по размещению ФИО участников на борту яхты и парусе. Эту проблему мы решили с помощью баблов — всплывающих окон с ФИО участника при наведении на яхты.
![Еще один вариант Еще один вариант](/upload/resize_cache/webp/medialibrary/076/eyfqji8rlcxq91ywrwu6myo02nhaz8cq/utverzhdeno.webp)
Такой вариант не удовлетворил заказчика, и мы стали думать дальше.
Далее была идея разместить ФИО на палубе, но при увеличении количества яхт на экране, эта задумка потерпела фиаско.
![Имена на палубе Имена на палубе](/upload/resize_cache/webp/medialibrary/7e7/4fltot0v059f5fs7j0byp2kvnqfzmrob/yakhty.webp)
Отмели идею с видом сверху, вернулись к прототипу и первой зарисовке. После недолгих манипуляций мы пришли к оптимальному решению поставленной задачи, разместив яхты следующим образом:
![Яхты в шахматном порядке Яхты в шахматном порядке](/upload/resize_cache/webp/medialibrary/ac8/oyruo3aobx1uog91o3r735snnn9qr0wn/razmeshcheniye_yakht.webp)
Мы разместили яхты в шахматном порядке, что позволило, во-первых, изобразить их максимально реалистичными, во-вторых, разместить ФИО в читаемом виде и, в-третьих, расположить 30 яхт без особого труда на линии старта.
Для заднего плана Регаты было выбрано солнечное побережье южного города (который как бы намекает: «Приплывешь первым, получишь премию и будешь сидеть вон под той пальмой».).
Мы даже добавили в игру живности (дельфинов, чаек и... акулу!), дабы периодически веселить участников гонки.
А меню и мини-карта игры расположились вверху экрана.
![Внешний вид мини-игры Внешний вид мини-игры](/upload/resize_cache/webp/medialibrary/4aa/f46ki65y6dqc50u94gxmq5p7oy9lq1yb/mini_igra.webp)
Когда дизайн был отрисован и утвержден с клиентом, программист приступил к оживлению макетов.
Для визуализации результатов менеджеров мы реализовали «приёмник», в который 1С заказчика отправляет необходимые данные. Приёмник, получив эти данные, записывает их в базу данных сайта, в нужном для вывода виде. Периодический обмен данными позволяет следить за передвижением лодок в реальном времени.
Для удобного представления результатов за основу было решено взять Swiper — один из популярнейших плагинов карусели, так что вопрос механики переходов по этапам отпал сам собой.
Немного математики для расчета позиционирования лодок в зависимости от счета пользователей, плюс магия svg-фильтров feTurbulence и feDisplacementMap для имитации волн на статичной картинке воды.
И вуаля — Регата готова!
В процессе разработки игры был добавлен новый функционал. В Регате участвуют менеджеры из Новокузнецка, Кемерова, Новосибирска, поэтому было решено добавить фильтр по городам и фильтр Сибирь, показывающий общий зачет.
Таким образом, каждый участник может отследить свое положение как в рамках своего города, так и в рамках всех подразделений, либо посмотреть, как поживают его коллеги из других городов.
Также мы разработали турнирную таблицу, в которой располагается подробная информация о прошедших и текущей Регатах: общий зачет за месяц по всем подразделениям, итоги каждого подразделения, а также общий годовой зачет.
![Турнирная таблица Турнирная таблица](/upload/resize_cache/webp/medialibrary/1a5/4srxqhbh8na3mdzh78hrcq1jw12rq5oe/turnirnaya_tablitsa.webp)
В итоге у нас получился инструмент, помогающий мотивировать менеджеров по продажам на выполнение плана за счет наглядного и подробного представления результатов продаж в виде яхт и таблиц, а также яркого анимированного интерфейса.
Итоговый результат
Хотелось бы поблагодарить наших коллег из компании «Ладья» за крутую идею, многолетнее доверие к нашей веб-студии и постоянную вовлеченность в работу! Желаем вам выполнять план продаж и всегда быть на плаву!
![Проектная группа Проектная группа](/upload/resize_cache/webp/medialibrary/9df/pzljwegt06uyiz16rf2h61qgfxf9bg73/proyektnaya_gruppa.webp)
Нужно создать мотивирующую игру для повышения вовлеченности ваших сотрудников в работу и перевыполнения планов? Теперь вы знаете, к кому обратиться за помощью в разработке! А тематику и средства передвижения мы поможем вам придумать и реализуем всё в лучшем виде! ;-)