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

Всем привет! Меня зовут Сергей, мы с командой создаём продающие сайты для компаний среднего и премиального сегментов. Наши сайты помогают компаниям запомниться и продавать продукты дороже средней рыночной стоимости.

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

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

Основной запрос клиента — увеличить количество целевых заявок с сайта.

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

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

1)Структура и смыслы

2)Дизайн

Техническая реализация (система управления сайтом и технология верстки и программирования) не поменялись.

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

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

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

Анализ целевой аудитории

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

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

Как мы проводили анализ целевой аудитории для этого проекта:

1) Портрет целевой аудитории:

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

Кто эти люди, их пол, возраст, уровень образования, семейное положение.

Что для них важно?

Что они ценят?

Что их раздражает, что не нравится?

Что они хотят от вашего продукта/компании?

Какие у них страхи связанные с вашим продуктом?

Какие у них страхи связанные с вашим продуктом?

2)Анализ отзывов о конкурентах

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

Исследование конкурентов в разных ценовых сегментах.

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

В итоге такого анализа мы выписали все ключевые пункты, на которые надо сделать акцент при написании текстов и формирования структуры. Далее мы обсудили их с маркетологом компании. Также можно провести интервью с представителем отдела продаж или самим собственником. Дело в том, что отдел продаж как правило хорошо знает проблемы клиентов и их пожелания к продукту, поскольку постоянно общается с потенциальными клиентами.

Формирование структуры или как понять какую информацию показывать в первую очередь

Собрав всю информацию и смыслы, которые надо заложить в сайт мы разбили ее на блоки. Один блок, заключает в себе информацию об одном аспекте компании.

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

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

1)Первая рассказывает о ценностном предложении компании. О том чем она может быть полезна и какие преимущества она имеет над конкурентами.

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

2)Повышение доверия к компании

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

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

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

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

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

Далее мы взяли всю полученную от интервью с клиентом информацию и поместили ее в разные блоки сайта в соответствии со структурой.

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

Чтобы заголовки максимально цепляли внимание пользователя мы делаем их не шаблонными, например: цена / услуги / преимущества и тп, а делаем их настолько развёрнутыми, чтобы почти в каждом заголовке читалась особенность компании.

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

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

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

И вот почему:

1)Мы подбираем и согласуем референсы.

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

Для этого проекта мы выделили 2 основных разновидностей дизайн концепции и решили выбрать вторую.

Мы решили делать менее премиальный и оригинальный дизайн, чтобы не отпугнуть потенциального клиента и сделать контент максимально простым к восприятию. Это решение было принято потому что компания работала в мидл+ сегменте, а не премиальном и планировала привлекать клиентов с помощью рекламы. Слишком дорогой и оригинальный дизайн мог отпугнуть потенциальных клиентов.

2)Создаём и согласуем дизайн-концепцию

Дизайн - концепция это 2-3 блока дизайна по которым уже понятен общий стиль всего сайта. Таким образом, мы не тратим слишком много времени на дизайн всего сайта, особенно, если это сайт из нескольких страниц. Когда клиент видит дизайн 2-3 блоков, этого достаточно, чтобы понять насколько итоговый дизайн соответствует пожеланиям или он требует доработок и изменения.

3)Пробуем разные варианты

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

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

4)Обосновываем каждое решение

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

Чтобы было наглядней, в следующей части объясню, что мы делали в дизайне и почему.

Обоснование дизайна:

1)Цвета

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

2)Шрифты

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

3)Приемы для удержания внимания

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

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

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

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

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

4) Создание визуальной гармонии и внедрение элементов дизайна

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

Колонки это равные вертикальные линии по которым выстроен весь контент. Они не заметны визуально, но помогают проще воспринимать информаци и создать гармонию.

Вертикальные линии в дизайне фасада дома натолкнули нас на идею провести слегка-заметные линии через весь сайт клиента.

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

Вертикальные линии в дизайне фасада дома натолкнули нас на идею провести слегка-заметные линии через весь сайт клиента.

Если у вас остались вопросы по проекту или есть запрос на создание качественного сайта свяжитесь со мной в телеграм:

тг: @SerrgeyZhidkov