Интерактивный музей ХК «Авангард» к 75-летию клуба

Легендарному хоккейному клубу “Авангард” в 2025 году исполнилось 75 лет. К этой дате было организовано масштабное празднование, наша задача была – полностью взять на себя всю разработку диджитального проекта к этому событию: программирование, тестирование, создание механик и геймплея. Цели проекта – “отпраздновать” дату в цифровом пространстве, создать памятный опыт для болельщиков и увеличить количество подписчиков в официальном Telegram-канале клуба.

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

Это цифровая “машина времени”, которая перемещает зрителя по истории клуба сквозь года, от самого основания и до наших дней. Каждая «раздевалка» – это новая эпоха, где можно изучить детализированное изображение, просмотреть эксклюзивный видеоролик об эпохе, принять участие в игре по поиску скрытых шайб и получить виртуальные трофеи за успешное выполнение заданий. Трофеи определяют позицию пользователя в общем рейтинге и предоставляют шанс выиграть реальные призы от клуба. 

Для доступа к контенту пользователю требуется подписаться на официальный Telegram-канал «Авангарда».

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

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

Мотивация – лидерборд и розыгрыш призов среди самых активных участников. Механика доступа – обязательная подписка на канал для входа.

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

Пользовательский путь:

1. Пользователь видит рекламу проекта в Telegram-канале «Авангарда».

2. Переходит по ссылке в мини-приложение, где система проверяет подписку. Если подписки нет — предлагает подписаться.

3. После входа пользователь попадает на главный экран с витриной трофеев и списком раздевалок.

4. Открыта только первая раздевалка. Пользователь заходит в нее.

5. Внутри раздевалки он может:

        - изучать детализированное изображение с реальными предметами того времени

         - посмотреть видеоролик и получить игровые попытки 

         - нажать кнопку «играть» и начать поиск 10 скрытых шайб, вслепую тапая по экрану

6. После нахождения 10 шайб пользователь получает 3D-трофей (шайбу с символикой эпохи), который отображается в его личной витрине и который можно виртуально «покрутить в руках» и рассмотреть со всех сторон 

7. Игру можно проходить многократно в одной и той же раздевалке, увеличивая множитель трофея (x2, x3 и т.д.), что повышает шансы на победу в общем зачете

8. Раз в два дня автоматически открывается следующая раздевалка

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

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

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

Контент и призы для проекта подготовила команда «Авангарда». Всего в миниаппе 6 видеороликов, по одному на эпоху. 

Разработка велась параллельно по нескольким направлениям:

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

         - Фронтенд. Пользовательский интерфейс и визуальная часть мини-приложения были собраны на стеке React + TypeScript + Vite. 

Для игровых механик и 3D использовали Three.js, React Three Fiber и Phaser.

Интеграция. Была реализована интеграция с Telegram API

Затем проведено тестирование функционала, и в назначенный срок проект был запущен.

Наш проект – машина времени, которая переносит пользователя в раздевалку легендарного клуба. 6 локаций – 6 эпох становления и развития «Авангарда». 

Общее количество сыгранных игр составило 52252, более 125 тысяч часов провели участники в нашем виртуальном музее. 10847 уникальных пользователей увидели проект, 7962 человека запустили игру и подписались на ТГ-канал клуба, 6269 своих друзей пригласили сами пользователи