Шаг 1 — провести брифинг!
До начала брифинга мы изучаем нишу нашего клиента, находим конкурентов и классные идеи, которые сможем внедрить, находим примеры в зарубежной практике.
Александр Кисарьев (UX-специалист, веб-аналитик):
на этом этапе моя задача — в общих чертах увидеть проект, понять — что я могу сделать для более высокого старта процента конверсии. Я ищу лучшие идеи, лучшие мировые практики, чтобы внедрить их в дело.
Римма Назырова (проект-менеджер): дополнив стандартный бриф новыми вопросами специально для каждого отдельного случая, мы созваниваемся с клиентом и начинаем изучать его бизнес. Мы хотим понять кто наш клиент и почему он «крутой». Мы дотошно разрезаем на разные сегменты целевую аудиторию клиента, разбираясь в их половозрастной структуре, опыте работы с интернетом. Мы должны точно понять — как они выбирают товары, какие у них возникают возражения, какие преимущества существенны для них и пр.
В ходе брифинга мы задаем около 100 разных вопросов, чтобы сформировать правильное понимание. После брифинга, чтобы ничего не потерять, мы протоколируем беседу в установленный шаблон и высылаем его клиенту. Кусочек брифа выглядит так:
Шаг 2 — создать прототип!
Прототип — это интерактивная структура будущего сайта, которую каждый клиент может изучить, «прокликать», увидеть как ведут себя разные блоки при разных действиях посетителя. Прототип ускоряет создание сайта почти в полтора раза, потому что структура определяется на том этапе, когда ее быстро можно изменить и переделать заново. И именно прототип определяет будущий успех сайта — как он будет конвертировать, каких результатов в плане продаж можно будет получить.
Андрей Анисимов (руководитель студии): у нас в «Реаспекте» есть три варианта как мы будем делать посадочные страницы — три пакера «Стандарт», «Эксперт» и «Профи». Я искренне не понимаю, зачем кто-то покупает «Стандарт», тогда как там всего один дизайн и одна структура, и нет а/б тестов. Второй и третий пакеты существенно лучше, так как мы создаем несколько вариантов страниц и тестируем их.
Так и для проекта «БНК-Кредит» мы создали два разных прототипа.
Александр Кисарьев: когда мы делаем посадочные страницы по тарифам «Эксперт» и «Профи», мы делаем очень-очень длинные прототипы, предусматривая и вмещая в них все блоки, которые будет уместно использовать для рассказа об этом товаре или услуге.
Андрей Анисимов: причем мы даже не формируем логику движения пользователя по посадочной странице, потому что эти длинные варианты никто не увидит. Мы готовим максимально длинные варианты страниц, чтобы потом из них собрать несколько вариантов, где уже будет стройная логика, для тестов.
В таком виде мы сдаем прототипы клиенту и на них вносим правки. Мы, за исключением редких случаев, не принимаем замечаний «уберите блок», но к пожеланиям «добавить блок» всегда открыты. В прототип при создании посадочных страниц, на которых потом будут идти тесты, обычно вносится мало правок.
Шаг 3 — разработать дизайн!
Два или три варианта прототипов (в зависимости от выбранного типа создаваемой посадочной страницы) передаются двум или трем дизайнерам. Каждый из дизайнеров создает дизайн на основании прототип, своего видения и, безусловно, мы всем исполнителям даем четкие ориентиры: каким должен быть и каким не должен быть дизайн, что мы хотим получить на выходе, что хочет увидеть клиент. Так рождается несколько дизайнов.
Римма Назырова: для проекта «БНК-Кредит» мы создали спокойные дизайн макеты с преобладанием белого и зеленых цветов. Они представлены ниже.
Первый дизайн
Второй дизайн
Андрей Анисимов: мы принимаем почти неограниченное количество правок к дизайну, если эти правки помогут повысить процент конверсии. Но все замечания, которые относятся к «вкусовщине» мы проводим строго — один набор правок в рамках договора — мы не дизайн-студия и нам не интересно делать 50 вариантов иконок.
Римма Назырова: После завершения работы по дизайну мы передаем нарисованные дизайн-макеты в программирование. Кстати, раньше наш процесс был построен не совсем верно — мы писали тексты после того, как закончим программирование. Сейчас этап копирайтинга мы перенесли до дизайна — художникам проще работать на готовом тексте.
Шаг 4 — программирование
Программирование начинается с верстки. Мы верстаем дизайн макет полностью и после этого переходим к работе каждого отдельного элемента: форм, калькуляторов, графиков и прочего. Каждую посадочную страницу мы делаем на CMS «1С-Битрикс»: сейчас нам уже не хватает возможностей базовой лицензии и мы используем расширенную версию «Старт». Благодаря этому каждый клиент получает возможность быстро и просто работать с содержанием своей посадочной страницы в понятном интерфейсе.
Адель Юсупов (middle-программист): моя задача в очень короткий срок сделать полностью рабочие версии посадочных страниц. Они всегда очень длинные, а срок на исполнение — несколько дней, поэтому приходится работать очень быстро и нет возможности допускать ошибки.
На таких посадочных страницах уже формируется определенная логика потребления пользователями информации. Мы показываем в определенной последовательности информацию, которая важна для посетителей при принятии решения о покупке.
Шаг 5 — копирайтинг и наполнение
Проект «БНК-Кредит» стал последним проектом, на котором этап написания текстов проводился после программирования. Это не сказывается негативно на проценте конверсии, но процесс производства получается недостаточно оптимизированным.
Копирайтер для написания текстов проводит свой брифинг, по своим вопросам. Он должен разобраться в продуктах клиента настолько хорошо, чтобы тексты были органичными, убеждающими и простыми для восприятия. Тексты должны формировать доверие, при этом не напрягать.
Валерия Якимова (контент-менеджер): когда готовы посадочные страницы, все тексты, а клиент предоставляет все необходимые фото-видео-текстовые материалы, начинается моя работа. Я должна красиво и аккуратно занести все на сайт.
Шаг 6 — «разбивка» и подготовка экспериментов
Римма Назырова: только после того, как мы спрограммировали, написали все тексты и наполнили 2 или 3 посадочные страницы, мы приступаем к «разбивке». Веб-аналитик, который делал прототип разбивает каждый вариант посадочной страницы на 4. Какие-то будут длинными, какие-то, возможно, будут высотой в один экран (то есть вся информация будет видна при входе на страницу).
Андрей Анисимов: параллельно с «разбивкой» длинных посадочных страниц на 8 коротких, веб-аналитики нашей компании готовят техническую платформу для а/б тестов. Именно так мы будем сравнивать полученные лендинги — все посетители будут разбиты на 8 групп и представитель каждой группы увидит только один из восьми вариантов. После этого мы узнаем: какой из вариантов страницы эффективней побудил пользователя сделать заказ.
После этого наступает время эксперимента. Если у клиента есть контекстная реклама, мы используем ее. Если нет, даем 25% скидки на квартал на ведение рекламных кампаний в нашем агентстве. Контекст — самый быстрый и эффективный способ привлекать качественный трафик. На таких посетителях просто проходят а/б тесты, которые показывают интересные результаты.
Настройка экспериментов на готовых версиях посадочных страниц для БНК-Кредит
Так как в Google Analytics нельзя запустить эксперимент на 8 страниц, мы сделали два эксперимента по 4 версии. Ниже показан пример хода эксперимента для первой группы посадочных страниц.
Через несколько недель у нас все цифры были на руках. Они представлены в таблице ниже.
Как мы видим, победил однозначно вариант №6. У нас возникли какие-то проблемы с вариантом №8, но он сразу начал отставать и система отдавала ему меньший приоритет, поэтому на нем не было конверсий вообще.
Мы остановили работу на значении 22,22% конверсии на 6 варианте. Мы порекомендовали клиенту перевести весь контекстный трафик на этот вариант. На этом работа студии закончилась, а отдел контекстной рекламы продолжает развивать проект! Обе стороны остались довольны.
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.