Фундамент

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

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

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

...или выбрать более простое, но лаконичное решение, при этом гармонизируя его с картинками проектов, т.к. в 99% случаев присутствует дом, небо (синий и голубой цвет), трава (зеленый цвет). Кнопки действия (да и всё, то, что приводит к деньгам) сделали ярким желто-оранжевым цветом. После долгих раздумий мы выбрали второй вариант, ведь не зря говорят "лучшее враг хорошего", да и конечный результат уже сейчас не заставляет сомневаться в правильности выбора.

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

Архитектурные решения

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

Вспомните всем известные банкоматы. Раньше кнопка печатать чек была яркого оранжевого цвета, а спустя какое-то время умным решением решили кнопки поменять местами, теперь "НЕ ПЕЧАТАТЬ" располагается на контрастной кнопке и порядка 70% людей перестало тратить бумагу и чернила банка. Сам банк по мимо этого стал еще и экономить на обслуживаемом персонале, т.к. менять опустевшие расходники надо теперь намного реже. Давайте умножим эти расходы на все банкоматы, расставленные по всей нашей необъятной родине. Гениально!

Каркас

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

Рассмотрим структуру подробнее.

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

О компании

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

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

Потом мы рассказываем о производстве. Наш клиент работает открыто и с хорошими материалами, так что почему бы это не продемонстрировать?

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

Нет, клиент считает, что просто фотографий неких людей мало? Хорошо! Покажем «человеческое лицо» компании. Вот группа в социальной сети, вот обращение директора, вот новости (причем новости ровно те, которые могли бы заинтересовать покупателя), вот преимущества, вот видео! Смотри, заходи, мы действительно живые люди, а не какая-то компания-однодневка!

Посмотрел? А теперь давай посмотрим портфолио. Вот эти дома построил Джек. То есть, компания. Про каждый дом есть своя страничка.

Понравилось? Завершаем путь клиента калькулятором. Теперь он от нас не уйдет!

Портфолио

Со страницами выполненных работ мы не стали мудрить. Человек приходит туда, чтобы посмотреть на красивые картинки и потом указать пальцем «хочу вот такой домик». И точка. Так что из текстов на страницах есть только вводная информация и короткое описание проекта – что хотел клиент, что для него сделали.

Каталог проектов

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

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

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

Не забываем и о «конверсионных коридорах». Допустим, посетитель промотал страницу до конца. Дальше он видит пагинацию и может листать дальше, а может заказать консультацию. При нажатии появляется форма заказа обратного звонка. Самое главное – взять контактные данные. Остальное уже сделает менеджер.

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

Карточка товара

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

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

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

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

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

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

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

Для сравнения, на старом сайте то же самое сделано просто текстом.

Очень неудобно и приходится долго сидеть и сравнивать.

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

Еще ниже стандартный блок «человеческого лица» и услуг. Да, компания выполняет не только строительство домов, но и… в общем, выбирайте, смотрите, уточняйте.

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

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

Сколько стоит дом построить? – Нарисуем, будем жить

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

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

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

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

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

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

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

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

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

Быстро, удобно для обеих сторон и существенно повышает конверсию с сайта.

Инженерные коммуникации

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

К сожалению, базовые модули Битрикс не слишком хорошо приспособлены под контентную работу – то есть, быстрое добавление товара, пакетное изменение цен и характеристик, просмотр всех товаров по определенной характеристике и так далее. Специально для таких случаев мы внедряем модуль импорта/экспорта файла Excel. Этот формат привычен для большинства офисных работников и затруднений не вызывает, и при этом он удобен и для программиста.

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

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

Посмотрим подробнее на примере карточки.

У каждого проекта есть ID – личный номер. Он помогает соотнести строку в файле с конкретным проектом и внести изменения, не задев остальных.

Здесь мы рассматриваем карточку проекта дома, а не гаража, она немного сложнее, зато можно увидеть весь функционал. Через файл импорта можно добавить:

1. Название проекта.

2. Категорию (основную и дополнительные).

3. Фото проекта, схему и дополнительные фото (все в отдельные поля, основное фото и схема показываются в соответствующих листингах в категории).

4. Лайки (конкретное число, используется для мерчендайзинга и листа популярных проектов).

5. Стикер (надпись можно выбрать любую).

6. Артикул (для упрощения заказа).

7. Характеристики (если поле оставлено пустым, то оно не появляется на сайте).

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

Как показывает практика, такой способ внесения данных совмещает в себе привычные для офисных работников методики с современным сайтостроением!

А забор, баню и беседку?

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

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

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

Далее мы оставили место под текст и какие-то дополнения в виде фото или, как в данном случае, видео.

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

И, конечно же, прайс-лист. Без него страница не имела бы смысла.

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

Она завершает конверсионный коридор.