Кейсы

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

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

О клиенте

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

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

Какой сайт был нужен клиенту

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

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

Таким образом, через новый дизайн требовалось:

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

Задачи

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

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

Евгений Золотов, руководитель проекта

Что клиент получил в итоге

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

Главная

Аналитика

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

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

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

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

3. Семантика

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

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

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

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

Дизайн

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

Ниже — несколько страниц из руководства по фирменному стилю:

Логотип
Геометрия
Визуал
Логотип
элементы графики
фирменная графика - употребление

Креативная анимация и иконки

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

  • баннер на первом экране мы «оживили» с помощью эффекта загорающегося и затем гаснущего в доме света

    свет в доме

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

    Кнопки

  • в каталоге и на карточках товаров мы добавили блоки с уникальными анимированными иконками

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


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

Главная страница

В первую очередь мы переработали главную страницу.

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

Каталог

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

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

Каталог

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

Фильтры и теги

Карточка проекта и объекта

Страницы всех проектов и объектов (домов построенных компанией) сделаны в виде промостраниц:

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

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

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

Информационные страницы

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

  • о компании, включая описание и список команды, сертификаты, контакты, подробности о собственном производственном комплексе;

  • об опыте и компетенциях, подтвержденных историями заказчиков, реальными отзывами, описанием возможностей и т.д.;

  • о строительстве и технологиях — в виде статей, фото-подборок и видеороликов.

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

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

Выводы

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

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