SnapSpace. Классифайд* объектов коммерческой недвижимости
*Классифайды — это онлайн-площадки для размещения объявлений, сгруппированных по определенным тематикам. Такие, например, как «Авито» или «Циан».
- Design management / UX Research / Art directing
- Юзерфлоу / Вайрфреймы / Мокапы
- E-commerce
- Размер проекта: большой
- Сложность: высокая
- Web / B2B2C
Контекст
Компания 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 (готовы ли рекомендовать сервис другим)
Следующие шаги
Измерение метрик позволило заказчику понять, насколько наш дизайн успешен, а также дало команде пищу для размышления о том, как именно улучшать интерфейс сервиса. Следующий шаг — формирование бэклога по дизайну, куда мы помещаем все идеи по улучшению значений перечисленных метрик.
Работа на постепенное улучшение метрик позволит компании приблизиться к главной бизнес-цели, озвученной заказчиком — в перспективе года стать лучшим продуктом на рынке коммерческой недвижимости на отечественном рынке.
← Назад
Вперед →