Маркетинг Anastasia Fedorova
2 626

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

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

В закладки
Динамический слайдер на главной странице сайта 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.
  • Возможность поделиться в соцсетях, добавить в избранное.
  • Соответствие позиционированию и целевой аудитории.

#недвижимость #вебразработка #юзабилити

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Anastasia Fedorova", "author_type": "self", "tags": ["\u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438","\u043d\u0435\u0434\u0432\u0438\u0436\u0438\u043c\u043e\u0441\u0442\u044c","\u0432\u0435\u0431\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430"], "comments": 23, "likes": 11, "favorites": 23, "is_advertisement": false, "subsite_label": "marketing", "id": 46376, "is_wide": false, "is_ugc": true, "date": "Mon, 24 Sep 2018 17:54:29 +0300" }
{ "id": 46376, "author_id": 204482, "diff_limit": 1000, "urls": {"diff":"\/comments\/46376\/get","add":"\/comments\/46376\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/46376"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199113, "possessions": [] }

23 комментария 23 комм.

Популярные

По порядку

Написать комментарий...
18

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

Ответить
2

Думаю для детальной информации об объекте есть менеджер по продажам. Это промо-сайт вообще то, насколько я понял. И вроде бы там все написано прямо на главной: и про парковку, и про благоустройство двора, и про застройщика. И ближайшие станции метро обозначены на карте, планировки вынесены в отдельный пункт меню. Вы накидывали даже не зайдя на сайт? Не конструктивно. Это получается не критика, а критиканство.

Ответить
0

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

Ответить
1

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

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

Аудиторию надо все таки развивать и подтягивать, а не потакать ее отсталости. Если не бороться с этим, люди никогда не станут понимать "меню-гамбургер". И еще, я думаю все зависит от целевой аудитории. Если это сайт для современной аудитории, если это имиджевый проект, то делать очередной убогий и скучный сайт, только потому что так будет лучше по словам Nielsen - это не правильно. Сайт красивый, сайт запоминается благодаря своему дизайну, фиксирует в голове определенную картинку, определенную историю. Выглядит "бохато", а значит вызывает доверие. Поэтому все решения в плане дизайна могут быть вполне оправданы. Мне лично сайты с интересным дизайном нравятся гораздо больше чем унылое гавно "по канонам".

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

Ответить
0

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

Ответить
0

Так они там вроде есть. Подробные описания и документация. Или вам не нравится эргономика сайта?

Ответить
0

Я в комменте верхнего уровня поподробнее и попредметнее описал!

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

Да, и отдельно про ПФ хотел сказать:

Ответить
0

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

Ответить
1

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

Ответить
1

Про UI/UX ничего не буду писать, типичный сайт жк. Но вот мокап адаптива для "разных устройств" – Айфон 4с, айпад третий, маки при Джобсе собранные...
И еще раз: Айфон 4с, Серьезно??? Парни, 2018 год, пару недель назад Xs презентовали, а у вас адаптив презентует техника из '12 года.

Ответить
1

Фильтры адок. Ни ошибок ни подсказок. 5-ти комнатная квартира 29 кв.м найдись! Почитав комментаторов выше, пришел к выводу, что проект стоит начинать с фейк-проекта на VC. Прибегут люди знающие, дадут ценных советов) Первичная информация.........done.

Ответить
0

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

Ответить
0

Кейс это когда с цифрами. С результатами "бизнес-задач".
В данном случае видим только реализацию. Хотя это тоже вполне интересно, спасибо.

Ответить
0

Сайт выглядит неплохо.

К UX несколько вопросов.

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

Далее интересует двор: как именно он обустроен - поподробнее. Удобно ли там гулять с детьми (какая детская площадка, есть ли дорожки). Не помешает план благоустройства двора - чтобы оценить наличие скамеек, дорожек для катания на детских велосипедах и тп. Охраняется ли двор? Есть ли камеры?

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

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

Далее - про инженерные системы квартиры: разводка отопления - горизонтальная, или стояки? Возможна ли установка индивидуального счётчика на отопление? что именно значит "скрытая система разводки труб" - она где именно скрыта? Расписать бы. Установка кондиционера на каждом этаже - далеко ли тянуть магистрали? Не совсем ясно.

Далее - про финансы. Какие именно предложения по ипотеке. "Звоните" - это прям раздражает.

Ответить
0

отличный сайт

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }