SnapSpace. Классифайд* объектов коммерческой недвижимости

*Классифайды — это онлайн-площадки для размещения объявлений, сгруппированных по определенным тематикам. Такие, например, как «Авито» или «Циан».

Контекст

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

Пользователи

У классифайдов такого рода обычно есть несколько типов пользователей:

• Собственники. Размещают информацию об объектах недвижимости на витрине сервиса.
• Клиенты. Ищут рабочие пространства для аренды, покупки или инвестирования.
• Брокеры. Профессионально организовывают и сопровождают сделки между собственниками и клиентами.

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

Пространство проблем

Как показало предпроектное исследование, пользователи классифайдов недвижимости чаще всего сталкиваются с такими трудностями:

* Проблемы, которые можно исправить с помощью дизайна.

Бизнес-цель

• В течение ближайшего квартала запустить mvp нового сервиса.
• В течение полугода привлечь платежеспособную аудиторию и нарастить пользовательскую базу.
• В перспективе года – стать лучшим продуктом на рынке коммерческой недвижимости в РФ.

Дизайн-задачи

Спроектировать веб-сервис, основанный на удобном поиске объектов по множеству параметров.

Адаптировать новый визуальный язык бренда к веб-интерфейсу сервиса.

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

Результаты дизайн-работ

Deliverables

Артефакты, документирующие дизайн-решения:

• 15+ юзерфлоу для основных пользовательских сценариев
• 50+ вайрфреймов для всех реализованных в MVP юзкейсов
• 100+ финальных дизайн-макетов, адаптированных под десктоп и мобильный экран
• UI Kit, основанный на новом брендинге, с проработанными анимациями переходов для состояний ui-элементов

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

Юзерфлоу

Юзерфлоу — это схематичное изображение пользовательских сценариев:

Такие схемы на раннем этапе проекта помогают:

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

Mid-Fidelity макеты

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

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

UI Kit

Мы также параллельно разработали дизайн-компоненты, который позже привели в визуальное соответствие с обновленным брендом:

High-Fidelity макеты

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

Zoom in

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

Главная страница сервиса SnapSpace

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

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

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

Сценарии поиска адаптированы и под работу на мобильных устройствах.

Одна из основных сущностей в интерфейсе системы — превью объекта, существует в нескольких модификациях: -XL- на 12 колонок, для отображения в «Избранном», -L- на 10 колонок, для полноценной выдачи в списке результатов, -M- (компактный вариант), для отображения на карте, и -S- (малый вариант), для блоков с похожими объектами + адаптивы каждой модификации под отображение на мобильных экранах.

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

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

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

Снабдили профессиональных пользователей необходимыми инструментами: в своем рабочем пространстве брокер может легко собирать презентации любого размера под запросы клиента, формируя их из объектов, сохраненных у себя в «Избранном»:

Метрики

Бизнесовые, важные на этапе MVP:

• MAU/DAU (привлекаем пользователей и стараемся удержать их)
• Конверсия в регистрацию (предоставляем расширенные возможности для зарегистрированных пользователей)
• Вовлеченность (увеличиваем время использования сервиса)
• Конверсия в лид (растим подписки и кол-во платных пользователей)
• Показатель оттока (смотрим, сколько зарегистрированных пользователей перестают использовать продукт через определенное время)

Дизайнерские, которые могут напрямую влиять на бизнесовые:

• Время, проведенное пользователем на сайте
• Время, проведенное в том или ином разделе (для брокера — в ЛК)
• Глубина просмотра результатов выдачи
• Кол-во просмотренных единиц за сессию
• Длительность сессии
• Кол-во кликов в зоне дополнительных фильтров
• Кол-во сгенерированных одним брокером презентаций
• Удовлетворенность (насколько довольны продуктом)
• NPS (готовы ли рекомендовать сервис другим)

Следующие шаги

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

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

В этом кейсе

• SnapSpace. Классифайд* объектов коммерческой недвижимости
• Контекст
• Пользователи
• Пространство проблем
• Бизнес-цель
• Дизайн-задачи
• Результаты дизайн-работ
• Deliverables
• Юзерфлоу
• Mid-Fidelity макеты
• UI Kit
• High-Fidelity макеты
• Zoom in
• Метрики
• Следующие шаги