Разработка сайта Город Природы

Заказчик«Город природы» — крупнейший в Уфе градостроительный проект в 8 км от центра города. Новый район площадью 266 га располагается в экологически благоприятной природной зоне на берегу старицы реки Белой.ЗадачаC нуля разработать адаптивный сайт, который передаст уникальность и масштабность проекта, будет привлекать желающих приобрести жильё в Уфе и даст им возможность детально изучить район/дома/квартиры.

21674462280f3839255099c0c8cfed58.png

Начинаем работать

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

  • Провели глубокий анализ ниши, чтобы учесть абсолютно всё, что понадобится клиентам для выбора квартиры, а подрядчику для демонстрации проекта с соблюдением всех требований закона.
  • На этапе прототипирования мы подготовили очень много экранов в Figma. Проработали логику поведения разных групп пользователей на сайте, создали Customer Journey Map — «карту путешествия клиента».
  • Разработанный нами фирменный стиль использовался для гибкого формирования типографики и элементов сайта, начиная от иконок, заканчивая формами взаимодействия.

848d9ccf9887f03eb613c0689c9b3e61.png


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

a184700457f66dae96be9c15f279bbfb.png

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

Покупка квартиры — не решение, которое принимается импульсивно. Нам было важно сделать процесс знакомства с жилым комплексом, выбора квартиры максимально удобным, интуитивно понятным.
На сайте «Города природы» можно выбрать квартиру онлайн на любых устройствах. Сделать это можно по нескольким сценариям:

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

Так выглядит выбранный дом при визуальном выборе жилья. Чтобы разграничить статусы объектов («Доступен к продаже» и «Скоро старт продаж»), мы использовали цветовые обозначения.

adc81977022ab300b8619746656f55e5.png

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

e742d06c36677528f465454154caa4a5.png

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

186991dd8a76c67dd9c8d232b35dc5d4.png

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

8a6e191a99698fc9164add25a0aff68f.png

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

f902c33a45f944be7d47e74080085cdd.png

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

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

a7ea57c419cae6147206e9fac3144f86.png

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

8db1f3b34a97ded53f58b6c817cb0803.png

Другие тонкости юзабилити

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

528ca10dd405a74d56ecdf39d468a735.png

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

536be6d682be4e19ca57fe61700c62b7.png

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

a3987a16d4c6dc162e007a82cd79dc60.png

Объединить все преимущества жилого комплекса и емко рассказать все факты об объекте мы решили с помощью презентации.

7e800e04373ac31fd9c4eea1a909f2cd.png

Классическая карта с отметками расположения места застройки и офисов продаж. Заблудиться не получится даже при желании.

803df1f9d4ebea2a7a71f1e38b05746b.png


Мы продолжаем поддерживать актуальность сайта заказчика и делаем его ещё удобнее.

fcb1190b0a128c983ddc789c3b00935a.png

Перейти на сайт

Полный текст статьи читайте на CMS Magazine