1400 участников и 1 интерактивная карта: как мы превратили конференцию в игру

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

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

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

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

Дополнительно в приложение встроили игровую механику. Участники сканировали QR-коды на стендах партнёров, получали баллы и могли обменивать их на мерч или билеты прямо внутри приложения.

Мы готовились к «Стачке» как партнёры конференции — выступали со спикерским докладом и проводили воркшоп. В разговоре с командой мероприятия появилась идея расширить сотрудничество и сделать для конференции интерактивную карту.

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

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

На карте разместили все ключевые объекты конференции: залы, стойки партнёров и зоны активностей. У каждой точки появилась карточка с информацией — расписанием, докладами, спикерами и активностями, за которые можно получить баллы.

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

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

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

Для реализации карты мы выбрали фреймворк Pixi.js. Он хорошо подходит для интерактивных интерфейсов и позволил сделать карту действительно динамичной. Пользователь мог свободно перемещаться по ней, увеличивать нужные зоны и открывать объекты прямо на плане площадки.

Самой трудоёмкой частью стала сборка самой карты. Каждый объект — зал, стойка партнёра или точка активности — добавлялся как отдельный кликабельный элемент. По сути, карту собирали вручную из множества элементов.

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

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

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

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

Механику начисления баллов реализовали через QR-коды. Партнёры размещали уникальные коды на своих стендах или в презентациях. Пользователь сканировал код, и баллы сразу появлялись на его счёте в приложении.

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

Тестирование прошло достаточно спокойно. Основные доработки касались пользовательского опыта: уточнили зоны клика для небольших объектов на карте и добавили жест смахивания для закрытия шторок.

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

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

Конференцию посетили около 1400 человек, и больше половины участников воспользовались приложением во время мероприятия.