Как мы переняли опыт e-commerce для корпоративного портала b2b компании

Внутренний портал – это главный инструмент внутренних коммуникаций ПГК: здесь наши коллеги узнают новости компании, участвуют в опросах и конкурсах и даже ведут собственные блоги с постами и историями. Чтобы сделать наш портал ещё более вовлекающим для пользователей, мы решили интегрировать привычные для e-commerce механики, которые обычно применяются для различных скидочных или бонусных акций.

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

Идея создать подобный интерактив на внутреннем портале появилась при подготовке коммуникационных активностей к Новому году 2025 — мы думали, как ненавязчиво порадовать сотрудников и поднять им настроение перед праздниками. Критерии для создания вовлекающего инструмента были довольно простыми:

Выбор пал на «Колесо фортуны», механизм которого можно описать одним предложением: пользователь нажимает на кнопку, крутится «барабан» и игроку выпадает разное количество призовых ПГКоинов.

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

При наполнении контентом «Рулетки безопасности» было подготовлено 73 вопроса (по 14 вопросов на день) каждый из которых имел три варианта ответа (правильные и шуточные). А картинки к вопросам генерили в нейросети сами коллеги из отдела охраны труда. Чтобы одно и то же задание не попадалось пользователю дважды, мы предусмотрели и прописали в системе условия повторов. На этапе тестирования была обнаружена интересная особенность: изначально первый вариант ответа всегда был правильным. Мы исправили ситуацию и сделали выбор правильного ответа случайным.

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

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

Мы максимально оптимизировали код с точки зрения разработки, но в основном искали готовые решения для отрисовки анимации. Нагрузка в данном случае ложилась не на сервер, а на пользовательские устройства. Нужно было учитывать скорость сдвига изображений и плавное замедление анимации. Изначально у нас был самописный код, однако, этот код обеспечивал низкий FPS и вызывал зависания.

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

Дизайн и интерфейс новогоднего «Колеса фортуны» в значительной степени мы делали сами. При разработке второго варианта – «Рулетка безопасности», мы ориентировались на сервисы Яндекса, у которых заимствовали идею прокрутки.

Для реализации механизма перемещения элементов в «Рулетке безопасности» мы использовали готовый инструмент, который позволял нам управлять анимацией.

Примечательно, что нагрузка на сервер оказалась несущественной – количество пользователей не влияло на производительность системы.

Новогоднее «Колесо фортуны» было приятным развлекательным бонусом для коллег, поэтому мы не стали перетягивать все внимание пользователей постоянными всплывающими окнами, а реализовали его на отдельной странице.

А вот «Рулетка безопасности» на неделе охраны труда требовала другого подхода: в мероприятии должны были участвовать все сотрудники, поэтому мы выбрали вариант с всплывающим окном на главной странице портала. Из-за того, что офисы нашей компании находятся в 14 регионах страны, мы выставили таймеры на 9:00 и 14:00 в каждом часовом поясе, чтобы коллеги могли участвовать в активностях в рабочее время.

Вероятность выигрышей в нашей первой, новогодней, карусели была закодирована. Сначала мы использовали формулу для расчета шансов. Например, если у нас было 2000 пользователей, из которых 70% могли участвовать, то каждый прокрутит рулетку примерно полтора раза в день. На основе этого мы рассчитывали общее количество попыток и определяли бюджет на призы. Но после запуска проекта мы корректировали эти данные. У нас была статистика по выданным ПГКоинам, и в зависимости от результатов рандома, мы либо увеличивали, либо уменьшали призы.

При разработке новогодней рулетки мы планировали, что пользователи смогут получить крупный приз только один раз. Решение принималось для упрощения механики и уменьшения нагрузки на систему. Но в итоге мы отказались от этой идеи, полагаясь на шансы – если кому-то повезет, он сможет забрать два больших приза, но это было скорее исключением.

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

У нас не было опыта в реализации подобных проектов, и мы не учли возможность читерства со стороны сотрудников. В результате мы столкнулись с ситуациями, когда некоторые участники использовали уязвимости системы. В первый же день запуска проекта пришлось устранять баги безопасности. По правилам рулетка открывалась на портале для каждого пользователя один раз в день, проверка происходила при загрузке страницы. Некоторые сотрудники открывали несколько вкладок одновременно, что позволяло им взаимодействовать с рулетками на каждой из этих страниц. Система блокировала повторные попытки, но на уже открытых вкладках рулетки продолжали работать.

На стороне сервера были внедрены более жесткие проверки: мы отслеживали активность пользователей, их ответы и время участия. Например, мы сохраняли данные о действиях пользователя за текущий день, включая ответы на вопросы о безопасности труда (наш второй игровой проект). Если кто-то пытался ответить сверх установленного лимита, система уведомляла о невозможности сделать это и предлагала остановиться.

Мнения пользователей разделились. Некоторые находили идею очень классной и выражали благодарность, в то время как другие отмечали некоторые негативные моменты. Например, раздражало, что рулетка всплывает снова через короткое время после закрытия. Если пользователь не хотел отвечать на вопросы и переходил по ссылке на статью, он снова сталкивался с рулеткой. После получения такого фидбека мы внесли изменения: теперь система отслеживает закрытие и показывает рулетку снова только через 10 минут.

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

Стоит отметить, что некоторые пользователи опасались участвовать в «Рулетке безопасности», полагая, что неверный ответ может повлечь за собой последствия. Мы же изначально рассматривали это как шуточную викторину и не предполагали, что кто-то воспримет её всерьез.

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