rschip.net — увеличиваем мощность лендинга

Мы делаем сайты, чтобы решать бизнес-задачи клиентов. Бывают исключения — дизайн ради дизайна, сайты «чтобы лучше чем у конкурента» и прочие «социальные сети как фейсбук, но с оплатой регистрации».

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

Именно такой была работа над новым лендингом RSChip.net .

Компания занимается разработкой и реализацией модулей увеличения мощности автомобилей. Работает на рынке с 2010 года и занимает лидирующие позиции в России и Европе. Один из каналов продаж — посадочная страница

Задача

Изначально заказчик обратился к нашим коллегам из отдела маркетинга. Было поставлено три цели — получать с лендинга 100 лидов в день, снизить цену лида (CPA), укладываться в цену продажи (CPO) .

Выяснилось, что текущий лендинг не решает задачу. Основная гипотеза — дизайн, заметно проигрывающий конкурентам. Решили подключить отдел проектов для разработки нового лендинга.

Задачи маркетинга (100 лидов, уменьшить CPA, уложиться в CPO) превратились в следующие требования к лендингу:

  1. Персонализированная информация для пользователя.
  2. Адаптивность — предполагалось активное использование трафика с мобильных устройств, т.к. он значительно дешевле.
  3. Результатом должна стать отчуждаемая верстка — у заказчика есть штатный программист, поэтому мы делаем только проектирование, дизайн и верстку.

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

Решение

Проектирование

Обычно самое сложное в проектировании — погрузиться в предметную область заказчика, понять его бизнес-процессы и аудиторию. Благодаря маркетинговому исследованию и активному участию заказчика, этот болезненный для менеджера процесс прошел стремительно.

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

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

  1. Формы, в которые автоматически подставляются марка и модель автомобиля пользователя;
  2. Заголовки и изображения содержащие марку и модель автомобиля пользователя;
  3. Не абстрактные цифры прироста, а конкретные лошадиные силы для автомобиля посетителя…

и многое другое.

Клиенту такие возможности понравились, а вот верстальщик потом долго ругался.:)

Модульная сетка главного экрана rschip.net — никаких Lorem Ipsum

Рис. — сетка первого экрана. Никаких lorem ipsum.

Технологические красоты

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

Наши технологи справились на 100%. Вот простой список фишек:

  1. Вариант Другая и связанные поля форм . Выбрали марку, вам покажут список моделей. Выбрали модель, список модификаций. Но на каждом шаге у пользователя также есть возможность выбрать вариант Другая (марка, модель, модификация) и ввести данные вручную.
  2. Все формы на сайте связаны. Марку и модель пользователь может ввести в трех разных местах (не считая того, что эти данные могли определиться автоматически). Глупо заставлять пользователя вводить что-то заново — все формы синхронизированы.
  3. Плавные перемещения между экранами при нажатии на кнопку.
  4. Появление динамической диаграммы, при прокручивании до определенного места.
  5. Пять диаграмм для вывода результатов повышения мощности . На SVG, чтобы все было красиво и адаптивно.
  6. Видео на фоне.
  7. Счетчики обратного отчета.
  8. Всплывающие окна и слайдеры, стилизованные поля ввода и выпадающие списки и многие другие сравнительно «стандартные» эффекты.
За каждым элементом этого списка стоит не только верстка и JS-код, но и длительное тестирование и отладка. Работа была проделана большая. А тут еще и адаптивная верстка.

Адаптивность

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

Однако, то что хорошо для людей и гугла, превращается в настоящую головную боль для технолога. Адаптивная верстка, это 4 вида разрешений экрана, тестирование не только в разных браузерах, но и на iPad, iPhone и android-телефонах.

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

Адаптивность rschip.net

Рис. — новый лендинг отлично выглядит на любых устройствах

Отчуждаемая верстка

Работа со сторонним программистом (у заказчика был свой специалист в штате) — нестандартный сценарий для нас. Необходимо было сделать верстку отчуждаемой, чтобы работать с ней мог любой программист, даже без использования модулей и наработок ИНТЕРВОЛГИ для интеграции верстки.

Для решения этой задачи, а также для «неконфликтного» совмещения большого количества различных частей (блоков) страницы мы воспользовались методологией БЭМ от Яндекс . Сама методология призвана бороться со сложностью верстки.

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

Полученная таким образом верстка без проблем переносится на любую CMS, не только на 1С-Битрикс.  

Вывод

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

К сожалению, все данные по статистике нового лендинга мы раскрыть не можем. Но главную цифру скажем — конвертация посетителей в лиды уже сейчас повысилась в два раза. Плюс, возможность «накачивать» недорогой мобильный трафик привела и к снижению CPA.

Так что, основную бизнес-задачу мы выполнили — тюнинг мощности сайта был успешным.:)

Сайт: rschip.net
Участники проекта:

Комментарии (0)