Artsofte — IT-компания, которая с 2002 года создает ПО для девелоперов, автодилеров и банков. Артсофте входит в топ-20 крупнейших SaaS-поставщиков России по версии CNews. В структуре компании 5 отраслевых продукта: финтех-продукт Abanking, решение для застройщиков Profitbase, платформа для автобизнеса — TradeDealer, мобильный электронный документооборот — онлайн-сервис nopaper, а также рекламное агентство Artsofte Digital.
О компании
Тестовое задание для продуктового дизайнера: спроектировать экраны CRM для менеджеров по продаже новостроек. Это тестовое я делала 7 дней.
Краткое описание
В рамках этого кейса я прошла весь процесс разработки продукта: интервью, анализ конкурентов, проектирование, UX-тесты, визуальный дизайн.
Моя роль
Я получила задание в таком виде:
Задача
Контекст: Представьте, что вы работаете менеджером в компании-застройщике. Вы продаёте квартиры. Ваш рабочий инструмент — CRM-система. Чтобы не потерять информацию о покупателе и квартире которую покупатель хочет приобрести вы создаёте сделку в CRM.
В сделке менеджер может:
• посмотреть на каком этапе сейчас находится сделка и какой этап будет следующий
• посмотреть и изменить информацию о покупателе (фио, номер телефона, паспортные данные)
• посмотреть добавленное в сделку помещение (убедиться, что оно не продано)
• выбрать способ оплаты (ипотека или 100% оплата)
• посмотреть график платежей по ипотеке
• добавить какие‑нибудь дополнительные товары или услуги к сделке
(например кондиционер, меблировку, кухню).
• добавить индивидуальную скидку
• видеть стоимость по сделке
• записать покупателя на просмотр квартиры
Чтобы завершить сделку, нужно провести её по воронке:
Задание: Разработайте интерфейс сделки на этапе воронки «сбор данных». Менеджер, на этом этапе должен подготовиться к заключению договора. Поэтому ему нужно собрать достаточную информацию о клиенте, о покупаемом помещении, дополнительных услугах которые могут ему понадобиться, сроках проведения сделки и т. д. Остальные возможности на ваше усмотрение. Когда все данные будут заполнены, менеджер сможет перейти к следующему шагу — заключению договора. Этап воронки «заключение договора» делать не нужно.
Метрики:* Какие продуктовые и интерфейсные метрики вы бы отслеживали в кабинете менеджера? Какую метрику считаете основной?
В сделке менеджер может:
• посмотреть на каком этапе сейчас находится сделка и какой этап будет следующий
• посмотреть и изменить информацию о покупателе (фио, номер телефона, паспортные данные)
• посмотреть добавленное в сделку помещение (убедиться, что оно не продано)
• выбрать способ оплаты (ипотека или 100% оплата)
• посмотреть график платежей по ипотеке
• добавить какие‑нибудь дополнительные товары или услуги к сделке
(например кондиционер, меблировку, кухню).
• добавить индивидуальную скидку
• видеть стоимость по сделке
• записать покупателя на просмотр квартиры
Чтобы завершить сделку, нужно провести её по воронке:
- Сбор данных
- Заключение договора
- Оплата
- Регистрация квартиры в Росреестре
- Выдача ключей покупателю
Задание: Разработайте интерфейс сделки на этапе воронки «сбор данных». Менеджер, на этом этапе должен подготовиться к заключению договора. Поэтому ему нужно собрать достаточную информацию о клиенте, о покупаемом помещении, дополнительных услугах которые могут ему понадобиться, сроках проведения сделки и т. д. Остальные возможности на ваше усмотрение. Когда все данные будут заполнены, менеджер сможет перейти к следующему шагу — заключению договора. Этап воронки «заключение договора» делать не нужно.
Метрики:* Какие продуктовые и интерфейсные метрики вы бы отслеживали в кабинете менеджера? Какую метрику считаете основной?
Для начала я хочу понять какие будут критерии успеха для этой CRM.
В кабинете менеджера я считаю основной метрику:
В кабинете менеджера я считаю основной метрику:
Июль 2024
Метрики
CRM для менеджеров
по продаже новостроек
по продаже новостроек
- Автоматизировать работу менеджера по продажам новостроек
- Получать аналитику по воронке, чтобы находить слабые места
- Уменьшить количество ошибок
- Сделать рутину удобной
Разработка интерфейса сделки на этапе воронки «сбор данных»
Цели
1. Общение с менеджерами по продаже новостроек (интервью)
Я хотела понять как менеджеры сейчас решают свои задачи, какие у них есть проблемы, чего им не хватает в работе, какими инструментами пользуются.
Я хотела понять как менеджеры сейчас решают свои задачи, какие у них есть проблемы, чего им не хватает в работе, какими инструментами пользуются.
Web
Этапы работы
Reserch
После того, как сценарий стал мне понятен, пришло время определяться с визуальным стилем. Делала на готовых компонентах дизайн-системы Atomaro.
UX/UI
4 этап. Первая итерация дизайна
Design System
Страница сделки, где менеджер заполняет данные о клиенте и объекте на этапе сбор данных
Нашла двух респондентов: одна — девушка руководитель агентства по продаже недвижимости, вторая — агент по продаже новостроек. Общение происходило в переписке и аудиосообщениях. Я буду использовать эту информацию, чтобы спроектировать user flow и узнать, какая функциональность необходима пользователям.
1 этап. Интервью
Инсайты, которые я получила из общения:
- Узнала какими CRM пользуются – Joywork, Piawork, AMO CRM – так же у каждого застройщика есть свои базы как на основе 1С, так и самописные
- Узнала какие есть проблемы и чего не хватает в этих CRM – карточки по клиенту, где менеджер запишет детали по пожеланиям и другие данные, которые нужны, чтобы работать более персонализировано – автоматического заполнения агентского договора на основе введенных данных и загруженных документах, для уменьшения ошибок
- Какие показатели отслеживают благодаря CRM: Конверсии в звонок → встреча, встреча → бронь, бронь → сделка
- Какие есть нюансы в сделках
- Клиенты могут приходить повторно, подбор осуществляется по различным критериям, которые хочется зафиксировать, чтобы работать более персонализировано
Так как это внутренние системы, у меня не было к ним доступа, я смотрела функционал конкурентов Joywork, Piawork, AMO CRM по видео-презентациям на сайтах. Выделила плюсы и минусы.
2 этап. Анализ конкурентов
+ Вся история взаимодействия
между клиентом и сотрудником фиксируется в карточке
между клиентом и сотрудником фиксируется в карточке
– Неудобный поиск
Для того, чтобы спроектировать сценарий, я выделила сущности из описания и добавила элементы и связи между ними исходя из логики и анализа конкурентов.
3 этап. Проектирование
Внесены все данные. Завершение этапа сбор данных, присвоение статуса сделке
Страница клиента
5 этап. UX-тест
По окончании работы над первой версией дизайна я провела модерируемый Usability тест с целью выявить удаётся ли пользователям выполнить задачу, насколько интерфейс соответствует ожиданиям пользователей. В тесте приняли участие 4 респондента.
Скрин с записи UX-теста
Гипотезы
Страница сделки:
Страница клиенты:
Задания и вопросы
Страница сделки:
- Где вы будете смотреть все сделки? А где можно создать новую сделку?
- На каком этапе вы находитесь? Сколько всего этапов?
- Найдите на странице, где расположена информация об объекте сделки? Где можно выбрать как клиент будет оплачивать? Где можно задать сроки проведения сделки? А где записать на просмотр, куда вводить дату, куда время?
- Где можно посмотреть продан ли объект, добавленный в сделку? Где посмотреть стоимость по сделке?
- Можно посмотреть график платеже по ипотеке?
- Как перейти на следующий этап воронки?
- Некоторые поля заполнены, но вам надо отлучится по делам. Сможете ли вы сохранить сделку, чтобы заполненные данные не были утеряны?
Страница клиенты:
- Где вы будете смотреть всех клиентов? А как добавить нового?
- Найдите на странице поле, где расположена информация об объекте сделки? Где можно ввести способ оплаты? Где можно задать сроках проведения сделки? А где записать на просмотр, куда вводить дату, куда время?
- Можно посмотреть график платеже по ипотеке?
- Можно выгрузить агентский договор из этой вкладки?
- Куда вы будете записывать пожелания клиента по параметрам квартиры?
- Некоторые поля заполнены, но вам надо отлучится по делам. Сможете ли вы сохранить данные о клиенте, чтобы прогресс заполнения не был утерян?
Результаты UX-теста
Так же в ходе теста я получила такие комментарии от респондентов:
- По интерфейсу в «параметрах поиска клиента» в карточке Клиента возможность галочками отметить:
- Сколько комнатную квартиру рассматривает под покупку комната, студия, 1ккв, 2ккв, 3ккв, 3-евро, 4ккв., 4-евро и т.д.
- С отделкой/без отделки/с мебелью/ без мебели
- Возможность вписать: Район/локация поиска возможность вписать — например Приморский р-н или в 10 минут пешком вокруг школы №
- Для кого рассматривает покупку: для себя, для инвестиций, под аренду, для ребенка
- Какой бюджет
- Сроки сдачи
- Что еще важно
«Для чего это нужно: во-первых быстро можно сориентироваться какой базовый запрос был у клиента: что искал, хотел, что в итоге купил или еще не купил. Такая информация очень нужна для выгрузки маркетологам, чтобы таргетировать грамотно, руководителям — типа подняли в бюджете, например и т.д. и удобна менеджерам, даже колл-центру — быстро вспомнить актуализировать информацию о клиенте»
❌ Пользователь поймет, что можно посмотреть список всех сделок и создать новую: 3 из 4 респондентов не увидели важное действие
✅ Пользователь поймет на каком этапе сделки он находится и сколько всего этапов: все справились с заданием
✅ Пользователь найдет информацию об объекте сделки, способе оплаты, сроках проведения, записи на просмотр: 3 из 4 быстро нашли нужную информацию
❌ Пользователь сможет убедиться, что объект в сделке не продан: 3 из 4 не нашли где находится эта информация
❓ Пользователь увидит стоимость по сделке:
2 из 4 быстро нашли стоимость
❌ Пользователь найдет, где посмотреть график платеже по ипотеке: никто не справился с заданием
❌ Пользователю будет понятно, что он заполнил все нужные поля, чтобы сделка перешла на следующий этап воронки: никто не справился
❓ Пользователь найдет как сохранить сделку:
2 из 4 справились с заданием
✅ Пользователь поймет на каком этапе сделки он находится и сколько всего этапов: все справились с заданием
✅ Пользователь найдет информацию об объекте сделки, способе оплаты, сроках проведения, записи на просмотр: 3 из 4 быстро нашли нужную информацию
❌ Пользователь сможет убедиться, что объект в сделке не продан: 3 из 4 не нашли где находится эта информация
❓ Пользователь увидит стоимость по сделке:
2 из 4 быстро нашли стоимость
❌ Пользователь найдет, где посмотреть график платеже по ипотеке: никто не справился с заданием
❌ Пользователю будет понятно, что он заполнил все нужные поля, чтобы сделка перешла на следующий этап воронки: никто не справился
❓ Пользователь найдет как сохранить сделку:
2 из 4 справились с заданием
- удобство заполнения, чтобы все было на виду
- минимизация ошибок менеджера (валидация полей)
- быстрый просмотр статуса заявки
- простота внесения изменений
2. Анализ конкурентов
Из интервью с риэлторами я узнала названия CRM, которыми они пользуются, посмотрела функционал по видео-презентации, взяла удачные решения и выявила проблемы в UX.
Из интервью с риэлторами я узнала названия CRM, которыми они пользуются, посмотрела функционал по видео-презентации, взяла удачные решения и выявила проблемы в UX.
3. Проектирование
На этом этапе я выделила сущности из описания, потому что мне важно понимать, как сценарий устроен целиком. Схема помогла мне проследить взаимодействие менеджера с продуктом и ничего не забыть при проектировании.
На этом этапе я выделила сущности из описания, потому что мне важно понимать, как сценарий устроен целиком. Схема помогла мне проследить взаимодействие менеджера с продуктом и ничего не забыть при проектировании.
4. Первая итерация дизайна
5. UX-тест
Этот этап помог мне найти слабые места в дизайне, понять, где у пользователей могут возникнуть проблемы.
Этот этап помог мне найти слабые места в дизайне, понять, где у пользователей могут возникнуть проблемы.
6. Доработки дизайна по результатам UX-теста
7. Повторный UX-тест
8. Результаты
- увеличение продаж новостроек
Интерфейсные метрики я бы выделила такие:
В этом кейсе для увеличения продаж новостроек я считаю важным:
+ Наглядный статус заявки,
виден прогресс по задаче
виден прогресс по задаче
+ Воронки продаж, эффективная аналитика и учет заявок
+ Встроенный калькулятор
+ Автоматически фиксирует все заявки и запросы клиентов по всем каналам и добавляет их воронку продаж
Плюсы:
Минусы:
– Сложный интерфейс
– Воронка как этапы клиента
– Нет загрузки документов во вкладку клиента
– Линейная воронка, нет возможности пропускать этапы, даже если клиент уже не первый раз покупает
- Пользователь поймет, что можно посмотреть список всех сделок и создать новую
- Пользователь поймет на каком этапе сделки он находится и сколько всего этапов
- Пользователь найдет информацию об объекте сделки, способе оплаты, сроках проведения, записи на просмотр
- Пользователь сможет убедиться, что объект в сделке не продан
- Пользователь увидит стоимость по сделке
- Пользователь найдет, где посмотреть график платеже по ипотеке
- Пользователю будет понятно, что он заполнил все нужные поля, чтобы сделка перешла на следующий этап воронки
- Пользователь найдет как сохранить сделку
- Пользователь поймет, что можно посмотреть список всех клиентов и добавить нового клиента
- Пользователь найдет информацию об объекте сделки, способе оплаты, сроках проведения, записи на просмотр
- Пользователь поймет, что можно выгрузить агентский договор из этой вкладки
- Пользователь найдет поле, куда он может записать пожелания по параметрам поиска объекта для клиента
- Пользователь найдет как сохранить данные о клиенте
Обязательные требования: Ширина фрейма 1920 px. Фон контентной области — белый.
Требования к дизайн-системе: На ваше усмотрение. Можете использовать любую готовую дизайн-систему или создать собственные компоненты.
Требования к дизайн-системе: На ваше усмотрение. Можете использовать любую готовую дизайн-систему или создать собственные компоненты.
Страница сделки:
Страница клиенты:
❌ Пользователь поймет, что можно посмотреть список всех клиентов и добавить нового клиента: 3 из 4 респондентов не увидели важное действие
✅ Пользователь найдет информацию об объекте сделки, способе оплаты, сроках проведения, записи на просмотр: 3 из 4 быстро нашли нужную информацию
✅ Пользователь поймет, что можно выгрузить агентский договор из этой вкладки: 3 из 4 быстро нашли нужную информацию
✅ Пользователь найдет поле, куда он может записать пожелания по параметрам поиска объекта для клиента: 3 из 4 быстро нашли нужную информацию
❓ Пользователь найдет как сохранить данные о клиенте: 2 из 4 справились с заданием
✅ Пользователь найдет информацию об объекте сделки, способе оплаты, сроках проведения, записи на просмотр: 3 из 4 быстро нашли нужную информацию
✅ Пользователь поймет, что можно выгрузить агентский договор из этой вкладки: 3 из 4 быстро нашли нужную информацию
✅ Пользователь найдет поле, куда он может записать пожелания по параметрам поиска объекта для клиента: 3 из 4 быстро нашли нужную информацию
❓ Пользователь найдет как сохранить данные о клиенте: 2 из 4 справились с заданием
6 этап. Доработка дизайна по результатам UX-теста
Результаты UX-теста навели меня на мысли переработать дизайн. Я решила изменить лэйаут страницы, добавить элементы, исходя из пожеланий респондентов.
Получились такие макеты:
Получились такие макеты:
7 этап. Повторный UX-тест
Снова протестировала экраны на 4 пользователях. В этот раз они справились намного лучше: вот результаты.
Страница сделки:
✅ Пользователь поймет, что можно посмотреть список всех сделок и создать новую: все справились с заданием
✅ Пользователь поймет на каком этапе сделки он находится и сколько всего этапов: все справились с заданием
✅ Пользователь найдет информацию об объекте сделки, способе оплаты, сроках проведения, записи на просмотр: 3 из 4 быстро нашли нужную информацию
✅ Пользователь сможет убедиться, что объект в сделке не продан: все справились с заданием
✅ Пользователь поймет, что можно выгрузить договор из этой вкладки: 3 из 4 быстро нашли нужную информацию
✅ Пользователь увидит стоимость по сделке: все справились с заданием
✅ Пользователь найдет, где посмотреть график платеже по ипотеке: все справились с заданием
❓ Пользователю будет понятно, что он заполнил все нужные поля, чтобы сделка перешла на следующий этап воронки: 2 из 4 справились с заданием (это должно происходить автоматически, такой паттерн реализован во многих сервисах)
❓ Пользователь найдет как сохранить сделку: 2 из 4 справились с заданием (это нужно сделать автосохранением в системе, когда пользователи привыкнут, это не будет вызывать проблем)
✅ Пользователь поймет, что можно посмотреть список всех сделок и создать новую: все справились с заданием
✅ Пользователь поймет на каком этапе сделки он находится и сколько всего этапов: все справились с заданием
✅ Пользователь найдет информацию об объекте сделки, способе оплаты, сроках проведения, записи на просмотр: 3 из 4 быстро нашли нужную информацию
✅ Пользователь сможет убедиться, что объект в сделке не продан: все справились с заданием
✅ Пользователь поймет, что можно выгрузить договор из этой вкладки: 3 из 4 быстро нашли нужную информацию
✅ Пользователь увидит стоимость по сделке: все справились с заданием
✅ Пользователь найдет, где посмотреть график платеже по ипотеке: все справились с заданием
❓ Пользователю будет понятно, что он заполнил все нужные поля, чтобы сделка перешла на следующий этап воронки: 2 из 4 справились с заданием (это должно происходить автоматически, такой паттерн реализован во многих сервисах)
❓ Пользователь найдет как сохранить сделку: 2 из 4 справились с заданием (это нужно сделать автосохранением в системе, когда пользователи привыкнут, это не будет вызывать проблем)
Страница клиенты:
✅ Пользователь поймет, что можно посмотреть список всех клиентов и добавить нового клиента:
все справились с заданием
✅ Пользователь найдет куда загрузить документы, способ оплаты, сможет добавить участника в сделку:
все справились с заданием
✅ Пользователь найдет, куда он может записать пожелания по параметрам поиска объекта для клиента: 3 из 4 быстро нашли нужную информацию
❓ Пользователь найдет как сохранить данные о клиенте: 2 из 4 справились с заданием (это нужно сделать автосохранением в системе, когда пользователи привыкнут, это не будет вызывать проблем)
✅ Пользователь поймет, что можно посмотреть список всех клиентов и добавить нового клиента:
все справились с заданием
✅ Пользователь найдет куда загрузить документы, способ оплаты, сможет добавить участника в сделку:
все справились с заданием
✅ Пользователь найдет, куда он может записать пожелания по параметрам поиска объекта для клиента: 3 из 4 быстро нашли нужную информацию
❓ Пользователь найдет как сохранить данные о клиенте: 2 из 4 справились с заданием (это нужно сделать автосохранением в системе, когда пользователи привыкнут, это не будет вызывать проблем)
8 Этап. Результаты
Дальнейшее тестирование и сбор обратной связи от пользователей являются необходимыми шагами для окончательной оценки эффективности, но я прогнозирую, что эти показатели подтвердятся:
Страница редактирования сделки
Страница редактирования клиента
- Упрощение процесса создания заявок сократит количество ошибок при заполнении форм
- Увеличится производительность сотрудников: новое расположение элементов и интуитивно понятная навигация позволят ускорить выполнение заявок
- Повысится уровень удовлетворённости пользователей
- Улучшится адаптация новых сотрудников
- Визуальная консистентность интерфейса улучшит восприятие пользователями
Что бы я еще добавила:
- Интеграция с другими системами
- Мобильную версию
Открыта к предложениям
Связаться со мной можно через Telegram @DariaVoitik или по почте: voitikdaria@gmail.com
