Интерактивная карта для IT-конференции "Стачка"

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

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

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

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

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

Для визуального разделения зон использовались акцентные цвета. 

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

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

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

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

Самой трудоёмкой задачей стала ручная расстановка каждого элемента (стоек, залов, значков) на карту в виде отдельных кликабельных объектов, а не единого изображения. Много времени заняла настройка зон клика для близко расположенных объектов, чтобы избежать пересечений и ложных срабатываний. Из-за обилия графики важным было оптимизировать приложение, но сохранить качество картинки. За счёт переноса информации в админку и хранения её там, нам удалось достичь баланса по производительности и привлекательности. 

Особое внимание уделили поведению всплывающих окон («шторок»). Изначально они просто закрывались крестиком, но после тестирования была доработана механика смахивания, привычная для мобильных пользователей.

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

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

Тестирование прошло достаточно гладко благодаря предварительной оптимизации дизайна и продуманной архитектуре. Основные доработки, выявленные на этапе тестирования, касались улучшения пользовательского опыта (UX): была добавлена механика смахивания шторок и уточнены зоны клика для мелких объектов. Серьёзных технических трудностей или багов, повлиявших на запуск, выявлено не было.

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

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