Категория: Web-разработка и маркетинг

Завод стройматериалов Руфимаст®. Разработка дизайна сайта и проектирование торговой воронки

Ситуация заказчика:

Заказчик - владелец фабрики по производству кровельной мастики Руфимаст® . Компания производит кровельную жидкую мастику для гидроизоляции крыш, бетона и металлоконструкций, сопутствующие материалы, а так же производит работы по монтажу кровли. Есть несколько своих строительных бригад внутри компании.

Строительная сфера имеет сезонность. Строительный сезон начинается с 1-го апреля, а продажи и заключение договоров на строительный сезон стартуют примерно с 1-го по 10-ое марта. Клиент обратился ко мне в феврале, так как хочет маркетингово подготовиться к строительному сезону.

Проблема

Клиент считает, что прошлые сезоны 2022-2023 отработал сильно хуже, чем мог бы. У него работали рекламные системы Яндекс.Директ в поиске и РСЯ. Но они давали слабый результат, а точнее, по словам заказчика сильно дорогой. Переходы были, но заказов было мало. А в какой-то момент действие рекламы практически остановилось. Любая ставка в аукционе Яндекса не давала нормального количества показов. Было ощущение, что реклама не работает. И в действительности, с бюджета директа списывались копейки. Кликов становилось всё меньше и меньше, хотя был сезон.

Ситуация усугубилась тем, что клиент заказал настройку кампании Яндекс.Директ у менеджеров стороннего агентства, которые настроили рекламу сильно широко, и клиент отображался в поиске по брендовым запросам конкурентов. Конкуренты справедливо сочли это за недобросовестную конкуренцию и подали на клиента в суд, который длился больше года.

Заказчик боится нарваться на очередных "слабых" исполнителей, которые не только плохо маркетингово подготовят компанию к строительному сезону 2024, но и могут опять создать юридические проблемы компании, от которых заказчик устал. Он обратился ко мне, как к опытному, медийному эксперту, которому доверяет.

Что хочет заказчик?

1. Улучшить эффективность рекламы для завода и строительной бригады Руфимаст®;
2. Найти проблемы в текущей настройке Яндекс.Директ;
3. Проанализировать прошлые рекламные активности, найти слабые мест;

Процесс работы

Я сразу сказал заказчику, что проблема 90% пользователей контекстных систем, как Яндекс.Директ, не в настройке рекламы. Контекстная реклама в поиске - это всего лишь официант, который подносит гостю меню и выбранное им блюдо, что приготовила кухня. Если на кухне бардак, продукты просрочены, а даже шеф-повар не умеет готовить, то НИ официант, НИ администратор, НИ маркетолог ресторана ничего сделать не смогут.

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

Если ваш сайт плохо сделан. На нём нет цен. Из содержимого непонятно, чем вы занимаетесь, и почему нужно заказать именно у вас, то Яндекс.Директ не поможет вам в продажах. Люди будут уходить с него.

Обычно всё усугубляется тем, что сайт может быть неадаптированный под мобильные устройства. Хуже, если возникают баги, которые не позволяют пользоваться сайтом со смартфона вовсе. А современный интернет - это 80% переходов на сайты со смартфонов. Процент от сферы к сфере может меняться, но вне зависимости от сферы, скорее всего, 4 из 10 посетителей вашего сайта зайдут к вам со смартфона.

Нет мобильной версии? Вы выкидываете 40% рекламных бюджетов в мусорку

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

Сайт заказчика оказался плох

В момент анализа выявлены следующие критические проблемы:

1. Непонятно, что сайт многостраничный

Нормальное поведение человека - изучение главной страницы. Человек сразу скролит главную. Так делает большинство.

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

Более того. Шапка сайта имела избыточную высоту в 196px, которая на ноутбуках закрывало слишком большой объём контента.

2. Сайт не работоспособен на смартфонах

Меню сайта не адаптивно и перекрывает половину области просмотра страниц. Говоря по-русски, ничего прочитать или изучить на нём не возможно. Потребители воспринимают такой сайт как неработоспособный.

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

3. У главной страницы нет торговой логики

Первый экран. Задача первого экрана:

1. Сразу дать понять посетителю, где он находится.
2. Зацепить внимание через удар в боль потребителя. Дать понять:
   “Я знаю, почему вы пришли на мой сайт. Мне понятна ваша проблема”
3. На первом экране предложить ответ на волнующий вопрос или дать “оффер”, от которого клиент не сможет отказаться.

Чего не должно быть на первом экране:

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

Что такое качество в вашей сфере? Качественный битум, он какой? А все остальные конкуренты продают некачественный? Зачем это писать? Подробней о пункте 2 писал здесь - Качество, комфорт и безопасность в маркетинге

Какую информацию несёт ваш первый экран? Какую боль решает? Как вы цепляете клиента каким-то особым предложением в лоб?

Экран плохо читаем и на нём мало что можно разобрать в принципе. Но даже если у нас получилось прочитать главное предложение первого экрана главной страницы, то создаётся впечатление, что я попал на сайт завода мастики. Да, это действительно так, но клиент сообщил, что компания осуществляет строительные работы, занимается ремонтом и устройством кровли.

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

4. Из сайта непонятно, почему нужно выбрать Руфимаст

Покупателю нет разницы, какие вы классные, профессиональные и крутые. Клиент сам хочет стать классным. Через сайт и рекламу ему нужно сообщить:

Как мой товар поможет тебе стать классным?

На сайте обилие бессмысленных выражений:

1. интуитивно понятный монтаж,
2. долговечность,
3. 20 лет на рынке,
4. экологически чистая.

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

1. Какими свойствами обладает продукт?
2. Как эти свойства работают?
3. Что они мне дают? Как я стану счастливей, используя Руфимаст?

5. Информация о продукте представлена через изображения

Фото-графика - это очень плохой способ представления информации. Чтобы человек ничего не смог прочитать, будет достаточно малого экрана ноутбука в 14 дюймов, среднестатистическая матрица TFT с плохой чёткостью, как у половины населения России и 99% офисных работников строительных компаний, или ещё хуже - слабое зрение пользователя, как у старого председателя гаражного кооператива, которому нужно отремонтировать крыши боксов.

Нормальный вид представление важной информации для сайта - шрифт, то есть текст.

6. Не хватает блока “Кому подходит”

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

О, так это же про меня! Они знают, что я со своей проблемой существую и они делают продукт для меня.

7. Блок “Наши клиенты” неполный

Отзывы и кейсы прекрасно продают. Но есть нюанс. Он не работает от логотипов клиентов, по крайней мере в чистом виде. На сайте Руфимаст просто перечислены логотипы покупателей. Но если мы хотим при помощи этого блока продавать, то надо раскрыть эту тему. Надо описать:

Мы сделали такие, такие такие работы. Столкнулись с такими сложностями и так то их решили. А из-за такой специфики проекта наш материал такой-то показал себя наилучшим образом, потому что…

Пока у клиента так

Правильная структура такого блока видится мне так

8. Не учтены лица принимающие решения

Кто потребитель строительных материалов? Собственник строительной компании? Генеральный директор Росатом и Русал? К сожалению, в B2B на принятие решений о закупке материала влияют много людей, вплоть до бригадира “Петровича”, который может сказать:

Этот материал новый, технология неизвестна. Никто из бригады с жидкой мастикой не работал. Мы не сможем его использовать!

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

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

9. Нет блоков связи и форм обратного звонка

Пусть у человека не останется вопросов о том, как вам можно написать или позвонить. Если он стесняется звонков, нужно явно указать большими буквами, что у вас есть почта и WhatsApp. Если у вас нет денег на телефоне, вот вам форма обратной связи. Это кажется излишеством:

У меня же есть контакты в верхнем меню!

Есть. Но по моей статистике 95% моих клиентов обращаются ко мне и к моим клиентам по формам обратной связи внутри страницы. Чаще всего именно с финального блока. Да, не было бы блока, они бы кликали по меню. Возможно… А возможно кто-то бы из них ушёл, не увидев подходящий для него способ связи. Зачем играть в казино на свои деньги, когда можно просто сделать хорошо сразу? Просто добавьте подробный блок.

10. Сайт выглядит по-детски из-за многообразия цветов

Много разноцветного и пёстрого, на мой взгляд, - это смешно и дешево. Смешно и дешево - это может быть целью, но если таким не является, стоить выбрать один цвет для своего сайта, а всё необходимое наполнение: текст, логотипы, ссылки и тд и тп. окрашивать в оттенки чёрного и серого. Это безошибочный вариант, который смотрится стильно и хорошо, даже если вы не дизайнер.

Со всеми текущими проблемами, а сайт выглядел так (ссылка), развёрнутый анализ сайта был предоставлен клиенту. Мной был сделан вывод, что рекламировать данный сайт, пускать на него платный трафик нельзя. При любом качестве настройки рекламы в Яндекс.Директ, конверсия в продажу будет низкая, так как торговой логики на сайте нет.

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

Особые условия и замечания

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

1. При помощи дизайн пакета Figma создать дизайн-проект для сайта
2. Дизайн-проект должен вмещать в себя UI-кит, где будут отражены используемые стили шрифтов, пакет акцентных и фоновых цветов, а также объекты интерфейса, кнопки и иконки
3. Дизайн-проект должен иметь PC и мобильную версию представления сайта
4. Когда проект будет согласован, нужно будет разработать и опубликовать функциональный макет-прототип на чистом HTML/CSS по методологии БЭМ, с чистыми, переиспользуемыми стилями, чтобы команде заказчика было проще переносить дизайн из Figma в их конструктор, подсматривая на действующий прототип, собранный в HTML/CSS коде

Дата заказа:

12 февраля 2024 года

Дата сдачи заказа и срок изготовления:

22 февраля 2024 года

1. Анализ действующего сайта, поиск цветовых решений и скелета портала: 2 дня
2. Создание макета в Figma, адаптация под мобильные устройства: 4 дня
3. Коррекция по комментариям заказчика: 2 дня
4. Создание действующего полнофункционального прототипа на чистом HTML/CSS/JS: 2 дня

Результат

Опубликованный адаптивный прототип главной страницы портала по макету в Figma для разработчиков заказчика можно увидеть по ссылке - caserufimast.anosovroman.kz

Команда разработки

1. Создание макета в Figma - Аносов Роман
2. Дизайн UI/UX решений - Аносов Роман
3. Иллюстрации - Аносов Роман
4. Front-end создание прототипа HTML/CSS - Аносов Роман