Этап 1. Разработка концепции и согласование дизайна лендинга.

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

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

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

3D-модель поезда для главного экрана разрабатывали и анимировали с нуля. Помимо основной модели, сделали несколько 3D-композиций, чтобы использовать их в письмах и баннерах.

Под анимацией добавили окошки адвент-календаря, которые открываются по заданному расписанию. Внутри них оферы от партнёра торговой сети «Пятёрочка» — начисление баллов на карту лояльности «Х5 Клуба» при покупке товаров от Mondelēz. А также дополнительные бонусы от брендов: AR-игры, рецепты праздничных блюд, приложения для тематических новогодних селфи и открыток, брендовые стикер-паки для общения с близкими в Telegram. 

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

Этап 2. Создание промокоммуникаций.

После согласования дизайна лендинга мы приступили к созданию остальных материалов проекта: email-рассылок, сообщений в Viber и mobile-push, а также макетов для раздела «Специально для вас» в мобильном приложении «Пятёрочки».

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

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

Это помогало пользователю считывать, что пришло сообщение именно о новогоднем промо «Поезд подарков от „Пятёрочки“».

Этап 3. Разработка пользовательских сценариев и вёрстка лендинга.

📌 Сценарии для pop-up-окон на лендинге

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

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

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

4. Размещение проекта на серверах агентства.

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

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