Агрегатор новостроек

Запустил агрегатор новостроек для представителя застройщиков юга России

О проекте

Моя роль

  • Дизайнер интерфейсов исследования, интерактивный дизайн, визуальный дизайн, копирайтинг
  • Фронтендер верстка, анимация, тестирование
  • Бэкендер настройка схемы данных, оптимизация

Команда

Крылов Николай бэкендер, копирайтер

Время работы

4 месяца запустили в августе 2024

Результат

Хайлайты

Часть мобильной версии сайта
Фильтрация и карточки новостроек
Часть UI-кита

Контекст

О клиенте

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

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

Отзывы с благодарностью Наталье за отличную работу

Проблема

Основной канал продаж — WhatsApp

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

Покупателю же приходится ориентироваться в пачке сообщений и забивать медиафайлами своё устройство

Так выглядит проблемный сценарий презентации и изучения объекта

Гипотеза

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

Так выглядит улучшенный сценарий

Понимание

Задача

Создать агрегатор для подбора новостроек в Краснодаре

Аудитория

Жители северных регионов РФ, возрастом 25–50 лет, которые:

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

Цель для бизнеса

  • Увеличить количество продаж
  • Повысить лояльность к компании

Миссия для пользователя

Помочь быстрее купить квартиру в новостройке и развеять страхи

Критерий успеха

Уменьшение времени на презентацию через 2 месяца после запуска проекта

Исследования

Бенчмаркинг

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

Пошли легким путем и выделили топ 5 застройщиков по мнению ЕРЗ РФ

И принялись разбирать сайты конкурентов по принципу: блок есть — «да», иначе — «нет»

Таблица с названием "Анализ конкурентов", где первый столбец — блоки, а первая строка — конкуренты. В следующих столбцах и строках есть зелёные ячейки "да" и красные ячейки "нет"

У нас сложилось примерное понимание, какая информация нужна, и мы набросали структуру страниц

Часть страницы Фигмы, где показаны фреймы страниц, их структура и содержание

Дополнительно в фигме сохраняли скрины отдельных блоков и решений, которые показались нам интересными

Часть страницы Фигмы, где показаны скриншоты разделов со страниц конкурентов

Анализ страхов аудитории

Наталья из переписок с покупателями выделила страхи аудитории. То есть самые частые моменты, которые останавливают людей начать сделку

На каждый страх мы набросали гипотезы с возможным решением

Часть страницы Фигмы, где показано два столбца: левый — страхи, правый — гипотеза

Так мы перетасовали блоки в структуре страниц, чтобы быть ближе к аудитории

Анализ рынка

Я прочитал исследования от крупных застройщиков и других экспертов рынка, и выделил моменты, которые нужно учитывать при создании дизайна:

  • обстановку и тенденции на рынке недвижки в 2024
  • критерии при выборе жилья комфорт и бизнес класса в 2024
  • что люди хотят видеть на странице объекта
Часть выводов из статей с критериями по исследованиям застройщика "Самолет" и что смотрят в комфорт классе
Приоритет мест рядом с объектами, которые лучше всего показать на странице объекта

Итог

Как результат, мы подготовили прототипы страниц с набросками контента + лучше погрузились в задачу и сферу недвижимости

После мы обсудили прототипы с Натальей и довели их до ума

Часть страницы Фигмы с прототипами страниц: "Главная", "Объект", "Все объекты", "О компании"
Финальные прототипы страниц

Дизайн

Главная

Дальше я перешел к дизайну и принялся прорабатывать его по принципу:

Набросал блок → Провел коридорное тестирование → Улучшил

Блок ипотек до / после. Список сократил до 4-х карточек для акцента на льготных ипотеках, которые наиболее интересны пользователям

Кроме этого я переиспользовал дизайн-решения между блоками:

  • единый стиль иконок
  • единая структура блока из заголовка, акцента и описания к нему
  • единый размер шрифтов
Один размер, одни цветовые оттенки

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

Покадрово создал прототипы в двух вариантах: десктоп и мобилка

Страница объекта

На этой странице нужно уложить максимум информации в минимум блоков

При этом расписать её понятно и расположить по приоритету — здесь особенно помогли выводы из исследований

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

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

Блок о преимуществах объекта

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

Кроме перемещения по карте, можно ещё сразу построить маршрут от объекта

Остальные страницы

На остальных страницах я переиспользовал блоки для сохранения ресурсов

Страница всех объектов
Страница о компании
Страница 404

Так же проработал дизайн модальных окон

Окно, чтобы оставить заявку
Окно после успешной отправки заявки

Адаптация под мобилки

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

В одних блоках — поменялось расположение контента

Блок о застройщике, ипотеке и шагах сделки

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

Тултип, меню фильтров, меню навигации

Состояния для разработки

Заранее прописал логику и состояния, чтобы на этапе разработке сэконномить время

Состояния списка: когда нет подходящих объектов и во время загрузки данных

В некоторых местах делал дополнительные пометки:

  • что происходит при нажатии
  • как происходит сортировка
  • скорость и стиль анимации
Здесь я показал, как сортируются ближайшие места и как устроена библиотека

Материалы

UI-кит

Компоненты в разных стилях и состояниях, которые я переиспользовал на всех страницах по максимуму для экономии времени на разработку

Часть UI-кита: состояния кнопок и полей

Мини-инструмент

Ещё в процессе работы я сделал мини-инструмент, который помогает кадрировать обложки объектов в едином формате

  1. Вставляем фото в компонент
  2. Смотрим всё ли ровно на странице и в карточке объекта
  3. Экспортируем и отправляем в прод
Инструкция и экран загрузки обложки
Экран проверки и экспорта обложки

Разработка

Фронтенд

Кроме базовых языков верстки при разработке я ещё использовал:

  • Astro — статический фреймворк для генерации страниц
  • Svelte — динамический фреймворк для фильтрации, карты и других интерактивных компонентов

Бэкенд

Чтобы мы могли фокусироваться на содержании контента, я подключил в проект автотипограф, который автоматически расставляет кавычки, тире, пробелы — всё по правилам русского языка

Картинок и видео на сайте много, поэтому вместе с Колей мы написали скрипт на питоне, который проходит по всем папкам и оптимизирует медиа с помощью ffmpeg и imagemagick

Всё это помогло существенно ускорить загрузку сайта, особенно в сравнении с сайтами крупных застройщиков России

Google Pagespeed. Скорость работы нашего проекта
Google Pagespeed. Скорость работы сайтов Домклик и Я. Недвижимость

Результаты

Чего добился

  • Стандартизировал разрозненный контент от 12 застройщиков, что ускорило презентацию объектов в 2 раза
  • Разработал за 1.5 месяца самый быстрый агрегатор недвижимости: скорость загрузки страниц на ≈35% выше по сравнению с конкурентами
  • Провёл бенчмаркинг конкурентов и рынка, чтобы применить лучшие практики
  • Итеративно развил адаптивный дизайн и базовый брендинг, который выделил продукт среди конкурентов
  • Провёл коридорные тестирования, что позволило устранить ключевые проблемы в юзабилити
  • Разработал UI-кит, что помогло сохранить консистентность интерфейсов и ускорить их разработку
Призыв к действию в конце страницы

Рефлексия

Ссылки