Сайт жилого комплекса: от визуализаций и планировок к эффективному каналу продаж

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

Динамический слайдер на главной странице сайта <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fneva-neva.ru%2F&postId=46376" rel="nofollow noopener" target="_blank">Neva-Neva</a>
Динамический слайдер на главной странице сайта Neva-Neva

К нам обратился застройщик нового жилого комплекса бизнес-класса в самом сердце Санкт-Петербурга на Васильевском острове. Перед нами была поставлена задача разработать сайт жилого комплекса Neva-Neva к старту активных продаж.

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

  1. Рассказать о ЖК (где находится, что есть рядом, преимущества и тому подобное).
  2. Собственно, показать дом или комплекс зданий (рендеры и визуализации).
  3. Дать возможность выбрать квартиру (планировки и характеристики).

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

Проектирование главной страницы

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

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

Далее на главной странице размещён блок внешних преимуществ, который мы решили выполнить нетрадиционно: внутри букв Neva отображаются тематические видеоролики, рассказывающие об особенностях жилого комплекса Neva-Neva (доступность парковых зон, близость исторического центра, транспортная доступность, развитая инфраструктура).

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

Анимированная визуализация преимуществ
Анимированная визуализация преимуществ

Конечно, не забыли про карту, где отмечены основные ключевые объекты, которые находятся рядом (музеи, учебные заведения, станции метро, торговые центры и прочее).

Традиционный элемент — новости — также выведен на главной.

Выбор планировок

Очень важный раздел, один из самых главных.

Визуальный подбор квартиры на сайте
Визуальный подбор квартиры на сайте

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

Для покупателей мы предложили несколько способов подбора квартир.

Варианты выбора квартир

  • Поиск по параметрам.

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

Фильтр подбора квартиры по параметрам
Фильтр подбора квартиры по параметрам
  • Визуальный поиск.

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

Оба варианта подбора доступны прямо с шапки главной страницы.

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

В карточке квартиры помимо основной информации (площадь, этаж, количество комнат и прочее) представлены планировки. Это стандартная визуализация для сайтов объектов недвижимости.

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

Возможности сайта для взаимодействия с пользователем
Возможности сайта для взаимодействия с пользователем

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

Для каждой квартиры мы сгенерировали отдельный PDF-файл с планом и основной информацией (этаж, площадь, количество комнат, санузлов и другое). В PDF по клику «Запросить цену» вы переходите на размещённую на сайте форму обратной связи по выбранной квартире.

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

Внутренние страницы

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

Ведение реестра документов

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

На сайте также представлен журнал учёта изменений нормативной документации.

Интеграция с CRM-системой

CRM уже является неотъемлемой частью продаж. На проекте Neva-Neva мы настроили интеграцию сайта с индивидуально разработанной CRM-системой, предоставленной заказчиком. Данные об изменении статуса квартир, внесённые в CRM-систему, оперативно меняются на сайте (продано, забронировано, свободно).

Что ещё?

Удобная работа на разных устройствах
Удобная работа на разных устройствах

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

Соответствие позиционированию и создание настроения

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

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

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

Что должно быть на сайте жилого комплекса

  • Информация об объекте и застройщике.
  • Описание преимуществ и особенностей.
  • Визуализация (рендеры и 3D-модели).
  • Подбор квартир.
  • Планировочные решения, в том числе с мебелью.
  • Формы обратной связи.
  • Генерация PDF-файлов.
  • Нормативная документация.
  • Интеграция с CRM.
  • Возможность поделиться в соцсетях, добавить в избранное.
  • Соответствие позиционированию и целевой аудитории.
44
22 комментария

Самая большая проблема таких кейсов в том, что их делаю люди, никогда не покупавшие квартиры. На выходе мы имеем большой набор рендеров и красивых картинок, отсутствие понимания цен и их порядка, тяжёлое и неоптимизированное нечто, июкс (прости госпади) уровня «пользователь выбирает Теслу» и прочее, ничего не имеющее общего с потребностями клиента. Где это? Как и каким транспортом добираться до ключевых пойнтов клиента? Какие станции метро по-близости? Какое ценообразование? Какие программы ипотеки? Какая стадия строительства? Какой календарный график застройки? Что во дворе? Что с парковкой? Что за застройщик? Какая рядом транспортная развязка? Что там с пробками? Какой доступен общественный транспорт? Что за договоры и условия? Какие варианты квартир и планировок? Это лишь базис, мне важнее знать ответы на эти вопросы, чем красивый рендер с ховерами и виртуальные туры вникуда.

18
Ответить

Комментарий недоступен

2
Ответить

Именно. Для оценки такого сайта как хорошего - нужно хорошо решать реальные проблемы реальных пользователей. А тут - на 4 с минусом ответы на реальные вопросы

Ответить

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

1. Не понимают люди, когда логотип находится в центре страницы. Для большинства привычней расположение логотипа в левом верхнем углу. Хочешь вернуться домой - на автомате начинаешь вести курсор в левый верхний угол. Навигация по сайту при центральном логотипе затрудняется в 6 раз. Исследование Nielsen: https://www.nngroup.com/articles/centered-logos/

2. Не понимают люди меню в виде гамбургера. Тем более, что у вас шапка сайта не отбита в отдельную плашку. (Я тоже сначала гамбургер не заметила). И да, Neilsen тоже писали, как гамбургеры портят UX: https://www.nngroup.com/articles/hamburger-menus/
Как минимум - гамбургер стоит сделать ярче, другого цвета, в виде иконки.
Но лучше - не мучать людей и сразу вынести основные разделы сайта в меню, второстепенные - в футер или выпадающим списком. О комплексе, о застройщике, контакты, ипотека - это то, что люди хотят читать сразу, не копаясь глубоко по сайту.
Измените меню, и удивитесь, как у вас сразу вырастет глубина просмотра сайта и увеличатся звонки.

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

4. Расположение ЖК описано красиво, но людям такие картинки неинформативны. Сколько рядом школ, детских садов. Сколько минут до метро, до остановки (очень важно!). Сколько магазинов, какие? Фитнес-центры. 3й экран с картинкой карты мало информативен, карта картинкой, а не встроенный Гугл Мапс. А хочется увеличить-увеньшить, чтобы посмотреть крупнее, где находится ЖК и что рядом.

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

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

1
Ответить

Комментарий недоступен

1
Ответить

Отличный и современный сайт!!!
Лично мне всё понятно, где и куда кликнуть, чтобы получить нужную информацию.
И очень странно на VC видеть такие комментарии, которые так и наровят приблизить опыт пользователя к привычным элементам сайта, которые проектировались 5-10 лет назад. Сейчас сайты заметно меняют свой вид и ранее привычные элементы на сайте, теряют свою актуальность. Да, для некоторых пользователей будет не удобно, но пользовательский опыт необходимо тоже обновлять и приучать к новым интерфейсам, благо web-технологии позволяют это делать. Главное найти компромисс между подачей информации и её реализации при помощи тех или иных элементов сайта. По моему опыту, метрики в виде ПФ и вовлеченность пользователей на сайтах с подобным внешним видом, намного лучше, чем у сайтов, которые остались с дизайн-шаблонами 2008-2013 годов.

1
Ответить

А пруфы есть? Нет, вот я серьёзно, после таких заявлений, а, конкретно, фразы "По моему опыту, метрики в виде ПФ и вовлеченность пользователей на сайтах с подобным внешним видом, намного лучше, чем у сайтов, которые остались с дизайн-шаблонами 2008-2013 годов".
Вот прям прошу: дайте тех самых шаблонов 08-13 годов, дайте отчёты метрики.
Ибо без пруфов это всё выглядит "мне очень понравился этот сайт, сейчас я чем-нибудь необоснованным подкреплю своё мнение".

Ответить