← Назад ко всем проектам

Клиентский проект

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

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

Технологии

WordPressPHPJavaScriptCSS AnimationsParallaxLanding Page

Услуги

  • Прототипирование - иерархия информации и путь конверсии
  • UI/UX-дизайн - агрессивная эстетика конкурса, тёмная палитра с акцентами
  • Фронтенд-разработка - параллакс, анимированные отсчёты и эффекты появления
  • Интеграция CMS WordPress и настройка админки
  • Настройка формы захвата и сбора лидов
  • Доработки после запуска и текущая поддержка

Результаты

  • Полностраничный лендинг на WordPress с параллаксом и анимацией
  • Живой таймер обратного отсчёта, привязанный к дате старта конкурса
  • Трёхуровневая сравнительная таблица участия
  • Форма захвата лидов (имя + телефон, без регистрации аккаунта)
  • Админка CMS для всего контента, чувствительного ко времени
  • Адаптивная вёрстка под мобильные на всех брейкпоинтах

Задача

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

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

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

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

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

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

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

Решение

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

Реализация

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

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

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

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

Результат

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

Макет сайта

Полностраничный десктопный макет - нажмите для увеличения.

Битва Жиров - полный десктопный макет

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

Битва Жиров - мобильный первый экран

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

Битва Жиров - мобильная навигация и секция приза

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

Промо-видео

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

Открыт для работы по контракту

Я доступен для работы по контракту. Если у вас есть интересная идея проекта, запишитесь на звонок через Calendly.

Записаться на 30-минутный звонок