Мы изучили, что важно людям при покупке квартиры, и сделали идеальный сайт застройщика
ЗаказчикКорпорация Недвижимости РИЕЛ работает с 2003 года. За 17 лет на рынке недвижимости Украины зарекомендовали себя надежным партнером. ЗадачаЗадача — привести все к единому стилю и создать клиентоориентированный веб-ресурс с широким спектром возможностей.
Я хочу рассказать о кейсе нашей IT-компании Wezom: как мы разработали комплекс нестандартных решений, которые помогли оцифровать репутацию в сфере недвижимости.
Когда мы выбираем недвижимость на первичном рынке, на что в первую очередь обращаем внимание? Конечно, на репутацию застройщика.
Мы изучаем предыдущие объекты, смотрим на то, как их реализовали, какие получили отзывы от клиентов. И только потом приступаем к анализу самой недвижимости. Будь то квартира или коммерческие объекты, нам важно узнать расположение, квадратуру, цены, возможности для покупателей.
В конце 2019 года в IT-компанию Wezom обратилась корпорация недвижимости «Риел». На тот момент у них был старый сайт, он не закрывал основные потребности и больше работал как сайт-визитка.
Также отдельно были сайты жилых комплексов с короткой информацией. Каждый из них по своей архитектуре, структуре и дизайну выбивался из общего стиля.
При этом «Риел» ежегодно реализует от трех до пяти проектов по строительству, консультирует и сопровождает клиентов от момента заключения договора до получения ключей. За 17 лет корпорация реализовала около 50 объектов во Львове и Киеве — это почти миллион сданных и готовящихся к сдаче квадратных метров.
Эти цифры помогут представить весь объем, который «Риел» планировала реализовать в цифровой среде.
С одной стороны, это был базовый запрос на разработку корпоративного сайта. Но, с другой стороны, мы понимали, что действовать придется нестандартно. Команде проекта предстояло, говоря языком клиента, построить современный веб-комплекс, который одновременно расскажет и о корпорации «Риел», и обо всех объектах, которые она строит.
Задача — привести все к единому стилю и создать клиентоориентированный веб-ресурс с широким спектром возможностей.
Основные цели обновления сайта:
- собрать информацию обо всех портфелях брендов на одном ресурсе;
- предоставить актуальную информацию о ЖК, ходе строительства, акциях, доступной для продажи планировке для будущих инвесторов;
- более детально рассказать о корпорации, о ее ценностях и истории;
- накопить в одном аккаунте Google Analytics как можно больший массив информации о профиле и поведении пользователей для эффективной настройки дальнейшей рекламной кампании.
Миссия — построить корпорацию недвижимости
Наш клиент четко понимал, что ему нужно. Благодаря этому план проекта получился очень детализированным.
Мы создали несколько блок-схем, которые максимально описывали будущий функционал сайта, админпанели и этапы работы над проектом. Дизайнер сформировал прототип, мы согласовали список фреймворков и технологий, которые будем использовать при разработке, составили бэклог задач для отделов frontend и backend.
Этап разработки дизайна также стал периодом самых бурных обсуждений. В частности, как будет выглядеть сайт. Во многом мы сделали так, как просил клиент, в некоторых вопросах аргументированно настояли на собственных решениях.
В процессе обновления сайта было важно сохранить высокие позиции в органической выдаче сайта Google и конверсию не ниже текущей. Для этого наши специалисты работали в трех направлениях:
- настройка редиректов;
- создание шаблонов;
- сохранение ссылок, по которым производились ключевые запросы.
Все было готово до перехода на новый сайт, соответственно, позиции сохранились.
В веб-разработке, как и в строительстве, нужен четкий план
Команда приступила к разработке в начале 2020 года. В нашем распоряжении было восемь месяцев. Проект состоял из трех этапов.
Первый этап — запуск корпоративного сайта с каталогом жилых комплексов, мультиадминкой и каталогом недвижимости, доступной для продажи. Это первый регистр, который запущен и уже работает.
Преимущество мультиадминки в том, что через одну админпанель можно управлять всеми информационными ресурсами, наполнять основной сайт и сайты ЖК, совершать все процессы, необходимые для работы с клиентами.
Второй этап — разработка шаблонов сайта жилых комплексов, подключение автоматического процесса для создания и публикации новых сайтов ЖК по готовому шаблону. Этот этап сейчас находится на финишной прямой.
Третий этап — создание сквозного личного кабинета. Очень удобный инструмент. Здесь покупатель может просмотреть свой договор купли-продажи, договоренности с компанией, карту платежей, статус строительства объекта.
А когда дом введут в эксплуатацию, этот кабинет автоматически станет кабинетом жильца, где он будет вносить показания счетчика и оплачивать коммуналку.
Интересное дополнение
В проекте был и незапланированный этап. «Риел» подписала договоры с банками Украины о кредитовании на недвижимость. Поэтому в конце первого этапа, уже после релиза сайта, мы подключали кредитный калькулятор.
Кредитный калькулятор
По индивидуальным формулам от банка мы разработали точный расчет стоимости жилья в кредит. В калькуляторе указаны сроки и первоначальный взнос. На сайте можно посмотреть актуальную цену на недвижимость, а также оставить заявку.
Выбрав данные первоначального взноса и сроков кредитования, можно посмотреть, какой будет процент на кредит, ежемесячный взнос и общая стоимость.
Нам пришлось повозиться, чтобы все это проанализировать, разобраться в формулах, прописать условия. Ведь в каждой программе разные процентные ставки, разные условия кредитования под различные объекты недвижимости, много зависимостей, которые влияют на расчет стоимости.
В итоге наш труд окупился сполна. Теперь корпоративный сайт «Риел» может предоставить все те услуги, что и менеджеры банка.Мы просто оцифровали эту услугу и реализовали ее на сайте.
Технология «строительства» сайта недвижимости
- Параллельный подход
Свою работу мы построили по методу SCRUM. Все этапы поделили на спринты по 10–12 дней. Каждый блок презентовали клиенту вместе с командой. Критические моменты обсуждали параллельно во время спринта.
Веб-ресурс проектировали по технологии SPA (Single Page Application). Разработка была полностью индивидуальная. Наши специалисты не использовали ни единого готового блока или модуля, все программировалось исключительно под данный проект.
Поэтому отдел backend смог начать работу одновременно с отделом дизайна. Проработали архитектуру сайта, сформировали каркас проекта, произвели подбор и конфигурацию компонентов для сайта и изучили стороннее API.
В этом проекте мы впервые работали параллельно. Обычно процесс разработки происходит поэтапно: от отдела к отделу (дизайн, верстка, фронтенд и так далее). В результате время реализации проекта сократилось как минимум на шесть недель.
По этой же причине мы сразу использовали реальные данные клиента. Никаких текстов lorem-ipsum или тестовых изображений. В итоге наш клиент потратил минимум времени, чтобы наполнить сайт.
- Визуальные решения
Визуальный стиль корпоративного сайта команда решила проектировать, используя дизайн-систему Material Design. Ее принципы совпадали с запросом клиента, в частности, эргономичность, понятная иерархия и интуитивная система навигации по сайту.
После утверждения дизайна и готовых блоков на бекенде, к работе приступил отдел фронтенда. Стоит отметить, что у нас вначале было много готовых блоков. Но показать их мы могли только в виде кода.
Лишь через несколько недель эти блоки получилось презентовать в виде визуальных модулей, которые в конечном результате доступны посетителям сайта.
На этапе программирования админпанели мы столкнулись с необходимостью использовать текстовый редактор с расширенным функционалом. Стандартные редакторы не подходили, поэтому пришлось потратить дополнительное время на его поиск и адаптацию.
Одним из важных решений, которое команда долго обсуждала на этапе подбора стека технологий, стало использование технологии GraphQL. Основными аргументами послужили гибкость и скорость. Пользователи сайта смогут получать только ту информацию, которую запросили.
- Тестирование
Следующий шаг — тестирование. Отдел QA сформировали пакет автотестов, который не даст загрузить обновления или правки с ошибками. Это сэкономило время на этапе проверки и повысило качество кода. Также сосредоточили внимание на кешировании данных, чтобы оптимизировать сервер и увеличить скорость работы сайта.
Стек технологий проекта: CSS-in-JS, GraphQL API, TypeScript, Node.js; библиотеки Real, Material UI; фреймворк Next.js
Результаты и преимущества
В результате проделанной работы мы получили инновационный корпоративный сайт. Он объединил проекты корпорации «Риел» в едином центре управления и сделал доступной детализированную информацию об объектах недвижимости компании.
На сайте находится актуальная информация о жилых комплексах и коммерческой недвижимости. Есть проектная галерея, фото- и видеоотчеты о ходе строительства, информация об акциях и скидках.
Клиент может ознакомиться со всеми объектами корпорации, сроками их реализации и документацией. Он может использовать фильтры для поиска недвижимости, которые учитывают квадратуру, цену, дату заселения, количество комнат и этаж.
На специальных калькуляторах, которые подключены к каждому отдельному объекту, покупатель может рассчитать кредитные выплаты или выплаты по договору, а также узнать общую стоимость.
Новый сайт увеличил целевые обращения и посещаемость ресурса корпорации. Через несколько месяцев после запуска сайта продажи корпорации выросли в три раза.
А если сравнить данные Google Analytics, собранные за декабрь 2019-го со старого сайта, и за декабрь 2020-го уже с нового, то видно, что показатель отказов снизился на 16,7%.
Сотрудники «Риел» получили удобную форму обратной связи и могут вести продуктивное общение как с постоянными, так и с потенциальными клиентами.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
