Кейс: редизайн сайта «Твоя Стройка», в котором стало проще выбрать дом

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

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

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

О проекте

Клиент: «Твоя Стройка», строительство из бруса.
Регион: Новосибирск и Новосибирская область.
Задача: превратить сайт, собранный владельцем самостоятельно, в удобный инструмент выбора дома, дачи или бани.
Объём каталога: 30 домов, 15 дач и 13 бань.
Состояние проекта: новая версия подготовлена на тестовом домене; кейс фиксирует результат перед переносом на основной адрес.

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

Что мешало старому сайту помогать с выбором

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

Был ещё один нюанс навигации: корень старого домена открывал раздел домов, а пункт меню «Главная» вёл на отдельную страницу /glavnaya. Мы изучили обе страницы, чтобы сравнить одинаковые сценарии.

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

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

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

Задача №1. Сделать первый экран понятным

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

На первом экране предусмотрены два понятных маршрута: «Смотреть проекты» для самостоятельного выбора и «Рассчитать стоимость» для обращения к специалисту. Вторая кнопка открывает компактную форму на этой же странице.

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

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

Задача №2. Объединить 58 проектов и добавить удобный подбор

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

58 проектов распределены по трём направлениям: 30 домов, 15 дач и 13 бань. Категории видны до перехода к отдельным карточкам.

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

Например, при выборе категории «Бани из бруса» и размера 4 × 6 м остаются два проекта — Б-8 и Б-7. В карточках можно сразу сравнить изображения, особенности и цены обеих комплектаций.

Результат реального подбора: две бани размером 4 × 6 м, отсортированные по возрастанию базовой цены.

На главной — короткая подборка, в каталоге — весь ассортимент

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

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

Фильтр считает по базовой комплектации

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

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

Задача №3. Помочь рассмотреть проект до звонка

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

Изменение хорошо видно на примере одной и той же дачи Д-1 размером 4 × 6 м. Сравниваются старая карточка и новая карточка этого проекта.

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

После: крупная визуализация, фасады и выбор комплектации находятся рядом. Цена относится к явно выбранному варианту.

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

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

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

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

Задача №4. Объяснить, за что клиент платит

На старом сайте у Д-1 уже были две цены — 445 000 ₽ за сруб и 679 000 ₽ за вариант под ключ. Мы сохранили эту логику предложения и изменили способ сравнения: теперь выбор комплектации связан с ценой и описанием работ.

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

Выбрана комплектация «Под ключ»: ниже показаны материалы и работы для этого варианта. Описание сгруппировано по частям постройки.

Фундамент участвует в предварительном расчёте

Фундамент представлен отдельными вариантами. У Д-1 можно выбрать винтовые сваи, ленточный или опорно-столбчатый фундамент. Для вариантов с указанной ценой сайт прибавляет её к выбранной комплектации.

Проверенный пример: 679 000 ₽ за дом под ключ + 51 000 ₽ за винтовые сваи = 730 000 ₽. Под итогом остаётся пояснение, что сумма предварительная, а доставка и дополнительные работы уточняются отдельно. Это демонстрация поведения сайта на момент подготовки кейса, а не окончательная смета строительства.

Винтовые сваи добавлены к варианту «Под ключ». Предварительная сумма пересчитана, а состав расчёта подписан рядом с ценой.

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

Задача №5. Связать просмотр проектов с запросом на расчёт

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

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

Сценарий состоит из пяти шагов:

1. Выбрать дом, баню, дачу или консультацию.
2. Указать размер: готовый вариант или собственные габариты.
3. Выбрать фундамент.
4. Определиться с комплектацией.
5. Оставить имя, телефон и согласие на обработку данных.

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

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

Задача №6. Сохранить основные сценарии на телефоне

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

Реальный первый экран новой главной при ширине области просмотра 390 px. В кадре видны предложение, кнопки, преимущества и акция.

Подбор по категории и размеру сохраняется и на телефоне. В проверенном сценарии «Бани из бруса, 4 × 6 м» главная показала те же два подходящих проекта. Мобильное меню открывает доступ к каталогу, категориям и контактам.

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

Задача №7. Собрать способы связи в понятном разделе

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

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

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

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

Что изменилось для компании и её клиентов

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

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

Что можно считать результатом уже сейчас

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

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

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

Частые вопросы

Почему недостаточно просто обновить дизайн старого сайта?

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

Зачем ограничивать число проектов на главной?

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

Квиз сразу рассчитывает стоимость строительства?

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

Можно ли применить такой подход в другой нише?

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

Когда вашему сайту нужна такая переработка

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

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

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