Иммерсивный 3D-город для Russ

Главное о кейсе

Группа Russ — крупнейший российский оператор рекламы вне дома, работающий в четырех направлениях: Outdoor, Indoor, Airport и Transit.

Для компании мы создали промо-сайт — интерактивный город, который помогает создать эффект полного погружения в экосистему рекламных форматов оператора.

Работа в цифрах:
— разработали пять полноценных 3D-сцен, соответствующих направлениям компании;
— обработали 58 рекламных форматов и структурировали их в рамках этапа аналитики;
— 53 рекламных формата добавили в финальную версию сайта;
— создали 212 видео для десктопа и мобильной версии, включая реверсивные пролеты.

Проект завоевал золото на премии WDA в номинации «Сайт для крупнейшей компании».

Как проект изменил жизнь пользователей

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

Бизнес-задача и ее решение

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

Крафт (мастерство), реализация, технические детали

Основной концепцией сайта стал виртуальный 3D-город, объединивший узнаваемые черты российских пространств — от «Москва-Сити» до «Ленинградского вокзала».

Для каждого направления Russ мы создали 3D-сцену, доступную через интерактивную карту на главной странице сайта.

Навигация внутри сцен реализована через скролл, что обеспечивает плавное перемещение. Цвета направлений Russ аккуратно интегрированы в элементы интерфейса и в оформление самих сцен. При этом общий стиль сохраняет преемственность с основным брендом благодаря глубокому синему цвету.

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

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

Из интересных технических решений можно отметить:
— отложенную фоновую загрузку видео, не влияющую на время загрузки сайта;
— кэширование видео на уровне сессии для предотвращения повторной загрузки видео при переходах по комнатам,
— современный формат видео WebM (также предусмотрена поддержка MP4);
— оптимизированные версии видео для мобильных устройств для ускорения загрузки и уменьшения потребления трафика;
— ресайз окна браузера, позволяющий отслеживать тип устройства в реальном времени, на основе чего загружаются нужные видео;
— использование сложных SVG анимаций при помощи библиотеки lottie-react в прелоадере и пинах на карте города;
— кэширование запросов на бэк с использованием стратегии SSG на Next.js. Благодаря этому запросы на бэк отправляются только один раз при сборке сайта. В дальнейшем для пользователей статичный контент (т.е. все страницы) будет возвращаться из кэша, что значительно ускоряет загрузку сайта.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Особую роль в проекте сыграли аналитика и тестирование гипотез.

Благодаря этому мы:
— систематизировали все рекламные форматы, оценили их объем и грамотно распределили по сценам;
— разработали интуитивный пользовательский путь. Изначально на сайте предполагалась облегченная разводящая страница в виде карточек или абстрактного виртуального пространства, но поскольку все сцены — объекты городской инфраструктуры, мы сразу разместили их на схеме города. Это решение позволило показать весь масштаб рекламных возможностей Russ в рамках одного экрана;
— выбрали оптимальные технические решения для реализации.

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

Прочая информация о кейсе

Видео: https://vk.com/video-93729242_456239199

Пресс-релиз: https://www.sostav.ru/publication/russ-zapustila-interaktivnyj-3d-sajt-o-napravleniyakh-svoej-deyatelnosti-79102.html

Скриншоты

Комментарий заказчика

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