Процесс разработки сайта «Fence39.ru»

Задача:

  • Создать сайт для ранжирования по низкочастотным запросам.
  • Сделать его удобным и информативным для клиента.
  • Продавать штакетник онлайн.

Сравнение аналогичных сайтов

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

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

http://shtaketnik.pro/
  • Тип сайта: landing page.
  • Работает по всей России.
  • Заказ оформляется через менеджера.
Превью
http://shtaketnik.info/
  • Тип сайта: landing page.
  • Работает в Перми.
  • Заказ оформляется через менеджера.
Превью
https://shtaketniki.ru/
  • Тип сайта: landing page + блог.
  • Работает по всей России.
  • Заказ оформляется через менеджера.
Превью
https://фенсер.рф/
  • Тип сайта: каталог.
  • Работает по Калининграду.
  • Оформить заказ нельзя.
Превью

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

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

https://fence39.ru/
  • Тип сайта: визитка.
  • Работает по Калининграду.
  • Заказ оформляется через менеджера.
SEO анализ

Структура проекта

Большинство конкурентов выбрали путь длинной портянки и попытались решить все проблемы пользователя на одной странице. Аргумент «За» — это положительно влияет на SEO (в длинный сайт можно вместить больше ключей). Аргумент «Против» — такая портянка на смартфоне выглядит огромной и несуразной, и пользователь устает скролить сайт в поисках своего ответа.

Выходит, делая длинный сайт я усложню поиск по содержимому, а значит и снижу процент заявок.

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

У меня получилась такая вот блок-схема, где у каждой страницы своя роль:

  • «Главная страница» (голубой) — её единственная функция показать, что здесь можно купить штакетник онлайн и в идеале она должна привести клиента на страницу заказа.
  • Страница штакетник (жёлтый) — рассказывает более подробно о товаре, условиях его заказа, вариативности. Именно эти страницы, думаю, станут ключевыми для заявок.
  • «Калькулятор» (фиолетовый) — страница для увеличения вовлеченности посетителя.
  • «Оформить заказ» (зелёный) — по сути — самая главная страница сайта. Здесь будет только форма заказа и ничего не должно посетителя сбить с толку.
  • «Вопрос пользователя» (серый) — закладка на будущее. Эти страницы решают сразу две задачи: во-первых они приводят посетителей на сайт по расширенным тематическим запросам, во-вторых, они отвечают на вопрос посетителя.

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

Скриншот доказывает важность дизайна для мобильных устройств.

Распределение посетителей сайта fence39.ru по типам устройств.

Как делали мобильную версию конкуренты

http://shtaketnik.pro/

Недостатки:
Кривая вёрстка. Орфографические ошибки. Длинный путь от выбора до покупки. Чтобы узнать цену, нужно навести курсор на карточку (сомнительное дизайн-решение).

http://shtaketnik.info/

Недостатки:
Нет оптимизации под мобильники. Для любого действия нужно зумить интерфейс. Задача для скептиков: попробуйте что-нибудь заказать на калькуляторе.

https://shtaketniki.ru/

Недостатки:
Длинный путь от выбора до покупки. Спрашивается: «Зачем я заполнял все эти поля, если всё сводится к тому, что вы мне перезвоните и многие пункты было бы удобнее озвучить по телефону?»

https://фенсер.рф/

Недостатки:
Дизайн сбивает с толку. Товар оформлен в виде карточек, а цена в виде кнопки, но перейти внутрь нельзя. Здесь обратная проблема — недостаточно информации о продукте.

Какой вывод?

Главная страница должна донести суть — продажа штакетника онлайн. Для этого она будет лаконичной и вести сразу на заказ (для постоянных клиентов), экраном ниже выведена витрина товаров. Она простая и не вызывает затруднений в выборе.

Главная страница

Так, а где фон?
Фон специально убран (он остался только на десктопе), так как снижает читаемость текста и не настолько заметен на мобильном устройстве, чтобы усилить информацию. 

Пруф

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

Вопрос дня: на чём сделан акцент? На кнопке, плашке сбербанка или заголовке?

Ещё пруф

Ну что, сильно фон помог понять, что вообще происходит на этом экране?

Как думаете здесь акцента нет или акцент на всём?

Охуенный пример

Изображение дополняет происходящее. По контексту очевидно, что это страница с рецептом блюда.

Ошибки проектирования

Дизайн главной страницы. Первая версия

Ошибка №1

Первоначальный дизайн главной страницы был лаконичным на столько, на сколько это было возможным.

Короткая страница оказалась не понятна посетителям и после нескольких попыток поскролить ниже, закрывалась. 

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

Пользователи видели все формы на одной странице и могли делать выбор в пользу своего вкуса.

Ошибка №2

Противоположна первой. У конкурентов были довольно интересные решения, но по факту они не пригодились аудитории. Они пролистывались без особого интереса и пользователь возвращался в начало экрана.

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

Ошибка №3

Сложные названия полимерных покрытий.

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

Следующее решение — переименовать сложное название в простое и показать на фото в чём разница.

 

Эволюция главной страницы

К сожалению ни один из перечисленных вариантов не удалось протестировать на работающем проекте. Лично мне по вкусу последний вариант.

Текущая рабочая версия проекта

http://shtaketnik.pro/
http://shtaketnik.info/
https://shtaketniki.ru/
https://фенсер.рф/

Итоги продвижения, 2 месяца спустя

Отчёт сделан в сервисе SeRanking.

Креативы для рекламных кампаний

Для привлечения трафика главным каналом стала рекламная площадка ВК, чуть позже я настроил ещё рекламу на Директе.

В ВК я показывал рекламу в рабочие часы (за час до окончания рабочего дня показы не шли), что бы в случае заявки менеджер мог обработать заявку. Моя аудитория от 24 лет. Интересы: Ремонт, стройматериалы и инструменты, Дача, Покупают онлайн, Доставка еды.

Если навести на креатив вы увидите количество кликов, просмотров и траты. Попробуйте до наведения угадать, какой баннер самый кликабельный, какой нет, какой самый дорогой.

310 кликов

49632 показов

2723 руб потрачено

120 кликов

38026 показов

2548 руб потрачено

108 кликов

20167 показов

1275 руб потрачено

133 кликов

33314 показов

1698 руб потрачено

107 кликов

13572 показов

1040 руб потрачено

0 кликов

21 показ

0 руб потрачено

49 кликов

13511 показов

624 руб потрачено

455 кликов

54029 показов

6825 руб потрачено

0 кликов

19 показов

0 руб потрачено

UX для формы заказа

Первоначальная форма заявки на примере ниже.

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

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

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

Суть заключалась в том, что бы пользователь заполнял только для себя понятные шаги (форма, цвет, цена), а вся техническая часть уточнялась по телефону.

Надеюсь история была интересной, а опыт полезным.