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

Я хочу рассказать о кейсе нашей IT-компании Wezom: как мы разработали комплекс нестандартных решений, которые помогли оцифровать репутацию в сфере недвижимости.

Когда мы выбираем недвижимость на первичном рынке, на что в первую очередь обращаем внимание? Конечно, на репутацию застройщика.

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

В конце 2019 года в IT-компанию Wezom обратилась корпорация недвижимости «Риел». На тот момент у них был старый сайт, он не закрывал основные потребности и больше работал как сайт-визитка.

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

При этом «Риел» ежегодно реализует от трех до пяти проектов по строительству, консультирует и сопровождает клиентов от момента заключения договора до получения ключей. За 17 лет корпорация реализовала около 50 объектов во Львове и Киеве – это почти миллион сданных и готовящихся к сдаче квадратных метров.  

Эти цифры помогут представить весь объем, который «Риел» планировала реализовать в цифровой среде.

С одной стороны, это был базовый запрос на разработку корпоративного сайта. Но, с другой стороны, мы понимали, что действовать придется нестандартно. Команде проекта предстояло, говоря языком клиента, построить современный веб-комплекс, который одновременно расскажет и о корпорации «Риел», и обо всех объектах, которые она строит.  

Задача – привести все к единому стилю и создать клиентоориентированный веб-ресурс с широким спектром возможностей.

Основные цели обновления сайта:

• собрать информацию обо всех портфелях брендов на одном ресурсе;
• предоставить актуальную информацию о ЖК, ходе строительства, акциях, доступной для продажи планировке для будущих инвесторов;
• более детально рассказать о корпорации, о ее ценностях и истории;
• накопить в одном аккаунте Google Ana­lyt­ics как можно больший массив информации о профиле и поведении пользователей для эффективной настройки дальнейшей рекламной кампании.

Миссия – построить корпорацию недвижимости

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

Мы создали несколько блок-схем, которые максимально описывали будущий функционал сайта, админпанели и этапы работы над проектом. Дизайнер сформировал прототип, мы согласовали список фреймворков и технологий, которые будем использовать при разработке, составили бэклог задач для отделов fron­tend и back­end.

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

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

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

Все было готово до перехода на новый сайт, соответственно, позиции сохранились.

В веб-разработке, как и в строительстве, нужен четкий план

Команда приступила к разработке в начале 2020 года. В нашем распоряжении было восемь месяцев. Проект состоял из трех этапов.

Первый этап – запуск корпоративного сайта с каталогом жилых комплексов, мультиадминкой и каталогом недвижимости, доступной для продажи. Это первый регистр, который запущен и уже работает.

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

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

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

А когда дом введут в эксплуатацию, этот кабинет автоматически станет кабинетом жильца, где он будет вносить показания счетчика и оплачивать коммуналку.

Интересное дополнение

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

Кредитный калькулятор

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

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

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

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

Технология «строительства» сайта недвижимости

• Параллельный подход

Свою работу мы построили по методу SCRUM. Все этапы поделили на спринты по 10–12 дней. Каждый блок презентовали клиенту вместе с командой. Критические моменты обсуждали параллельно во время спринта. 

Веб-ресурс проектировали по технологии SPA (Sin­gle Page Appli­ca­tion). Разработка была полностью индивидуальная. Наши специалисты не использовали ни единого готового блока или модуля, все программировалось исключительно под данный проект.

Поэтому отдел back­end смог начать работу одновременно с отделом дизайна. Проработали архитектуру сайта, сформировали каркас проекта, произвели подбор и конфигурацию компонентов для сайта и изучили стороннее API. 

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

По этой же причине мы сразу использовали реальные данные клиента. Никаких текстов lorem-ipsum  или тестовых изображений. В итоге наш клиент потратил минимум времени, чтобы наполнить сайт.

• Визуальные решения

Визуальный стиль корпоративного сайта команда решила проектировать, используя дизайн-систему Mate­r­i­al Design. Ее принципы совпадали с запросом клиента, в частности, эргономичность, понятная иерархия и интуитивная система навигации по сайту.

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

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

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

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

• Тестирование

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

Стек технологий проекта: CSS-in-JS, GraphQL API, Type­Script, Node.js; библиотеки Real, Mate­r­i­al UI; фреймворк Next.js

Результаты и преимущества

В результате проделанной работы мы получили инновационный корпоративный сайт. Он объединил проекты корпорации «Риел» в едином центре управления и сделал доступной детализированную информацию об объектах недвижимости компании.

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

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

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

Новый сайт увеличил целевые обращения и посещаемость ресурса корпорации. Через несколько месяцев после запуска сайта продажи корпорации выросли в три раза.

А если сравнить данные Google Ana­lyt­ics, собранные за декабрь 2019-го со старого сайта, и за декабрь 2020-го уже с нового, то видно, что показатель отказов снизился на 16,7%.

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