Динамичный дизайн для сайта строительной компании «Медный всадник»

Компания «Медный Всадник» уже более 15 лет строит загородную недвижимость для заказчиков из Москвы и области, Санкт-Петербурга и Ленобласти, и других регионов России.

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

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

— Эффектно показать возможности компании

— Отстроиться от конкурентов

— Повысить конверсию

— Сохранить имеющийся функционал

Работа над проектом проводилась в 3 больших этапа:

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

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

3. Внедрение дизайна и маркетинговых рекомендаций в текущую структуру сайта.

Каждый из этапов распишем ниже.

1. Целевая аудитория

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

2. Позиционирование

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

3. Семантика

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

4. Пользовательские сценарии

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

Ниже — небольшая часть структуры раздела с проектами:

Визуал сайта основан на разработанном нами ранее фирменном стиле и логотипе «Медного Всадника». Графика строится на ассоциациях с геометрией зданий и линиях чертежей.

Отстроиться от конкурентов помогает продуманная динамичность, авторские анимированные иконки и уникальные декоративные элементы.

+ 10 к желанию потенциальных клиентов купить дом добавляет баннер на первом экране. Мы «оживили» его с помощью эффекта загорающегося и затем гаснущего в гостиной света.

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

— кнопки сделали более заметными за счет заливки цветом со смещением;

— наглядно показали экспертизу «Медного Всадника», добавив слайдер “Проект-реализация”, отображающий как построенный дом полностью соответствует проекту на рендере в самых мелких деталях;

— в каталоге и на карточках товаров мы поставили несколько блоков с уникальными анимированными иконками.

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

Основное содержимое и функционал сайта предполагалось оставить прежним. То же касалось и системы управления контентом — мы использовали 1С-Битрикс. Конечно, добавились и новые связи и блоки на страницах. Но основные изменения коснулись именно внешнего вида.

Несколько полезных "фишек":

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

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

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

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

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

На текущий момент мы продолжаем плотно сотрудничать с компанией «Медный Всадник»: развиваем и улучшаем сайт, выполняем работы по SEO и ведем контекстную рекламу.