Битва Жиров - лендинг для конкурса по трансформации тела с призом 500 000 рублей

Задача

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

Бриф требовал того, что соответствовало бы драйву проекта: смелого, энергичного и способного превращать скептичных посетителей в платящих участников до того, как обратный отсчёт дойдёт до нуля.

Исследование

Исследование аудитории выявило два серьёзных риска отсева: посетители, которые сразу не понимали механику призов, уходили; те, кто понимал, но упирался в барьер на регистрации, отваливались. Работу определили три связанные проблемы:

1. Нет сигнала срочности - у события была жёсткая дата старта, но без живого обратного отсчёта дедлайн ощущался абстрактно и не мотивировал.
2. Разрыв в доверии к призу - заявке о 500 000 рублей нужны визуальные и структурные доказательства, чтобы в неё поверили; сухой текст этого не вытянет.
3. Трение при регистрации - каждый лишний клик между «я в деле» и «я зарегистрирован» съедает конверсию, особенно на мобильных.

Рассмотренные варианты

1. Готовый конструктор лендингов (Tilda, LP) - отклонено. Шаблоны не могли обеспечить насыщенную мультимедиа, построенную на параллаксе эстетику, которую требовала концепция, а клиенту нужно было самостоятельно управлять контентом после запуска.
2. Кастомная статическая сборка - отклонено. Отсутствие CMS означало, что любое обновление контента требовало бы разработчика, из-за чего последующий этап доработок был бы неработоспособен.
3. Кастомный лендинг на WordPress - выбрано. Дал полную свободу дизайна, позволил анимированные и параллакс-слои, предоставил клиенту привычный админ-интерфейс и оставил открытой дверь для долгосрочной поддержки и развития функций.

Решение

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

Реализация

Первый экран открывается суммой приза во весь экран и живым таймером обратного отсчёта - два элемента, которые вместе создают немедленную срочность и задают ставки ещё до того, как посетитель начал прокрутку. Формат «город против города» (Челябинск, Тюмень, Екатеринбург, Пермь) вынесен в первый экран, чтобы каждый посетитель сразу понимал, относится ли он к этому.

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

Три уровня участия (Бронза / Серебро / Золото) представлены в сравнительной таблице с цветовым кодированием цен, делая путь апселла самоочевидным. Единственная форма захвата внизу страницы - единственная точка конверсии: никаких отвлечений, никакой регистрации аккаунта, только имя и телефон.

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

Результат

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

Макет сайта

Страница целиком в окне браузера, десктоп и мобильная версия, прокручивается как живой сайт.

‹›

aA🔒битважиров.рф/

⇧▢+

DDesktopMMobile

Static snapshot — scrollable Safari preview

Мобильная версия

Первый экран - отсчёт и приз

Навигация и секция приза

Сайт в работе

Сайт в работе на битважиров.рф в 2016 году, в варианте «Челябинск против Екатеринбурга»: десктопная версия, снятая с монитора, и мобильная на iPhone, где уже идёт обратный отсчёт до старта.

Десктоп

Мобильная версия

Промо-видео

Видео с конкурса