Sorry, this project doesn’t exist in English yet 😢
🇬🇧
Even so, I suggest you try to look it through using Google Translate via the link bellow.
Домклик• 2021
Чат Домклик
Чат это один из двух основных способов коммуникации внутри всего Домклик.
Длительность
1 год
Команда
Product Designer, Product owner, 2 CJE
Моя роль
Product Designer
Пользователи
Покупатели, продавцы, менеджеры (МИДДЛы, МИКи, МОИКи и тд), риелторы, оценщики, юристы
Дизайн система
В рамках редизайн чата было решено определиться с новым UI для всего Домклик
Контекст
Домклик - это компания внутри экосистемы Сбера, которая предлагает любые виды услуг, связанные с поиском, покупкой, продажей и арендой недвижимости.
Данные за 2022-й год:
Доля рынка ипотеки в России
54 %
МАУ Витрины объявлений
7,3 млн.
Выручка Домклик
15,4 млрд. руб.
Помимо очевидного использования нашими клиентами в приложении (ios, android) и вебе, встраиваемый виджет чата используют команды внутренних сервисов в своих CRM. С помощью чата они: отвечают на вопросы клиента, отправляют документы для ознакомления, получают необходимые документы от покупателей и продавцов, и многое другое.

Как чат выглядит для клиентов в iOS приложении


Как чат видит клиент в вебе

Как чат видит менеджер (только дексктоп)
Исследование
Мы уже давно понимали, что чат устарел. Чат оброс огромным количество легаси и каждая новая UX-доработка должна была пройти через понимание технических ограничений, которые местами очень сильно вставляли палки в колёса. Многие сотрудники Домклика также брали ипотеку с нами, поэтому мы не единожды получали комментарии в стиле “Ребят, ну сделайте уже классно!”.
В определенный момент, команда получился карт-бланш на то, чтобы использовать все доступные ресурсы и сделать реально классный и удобный чат. Ну а я, как дизайн лид, получила особое поручение, обкатать новый UI Домклик на этом проекте и в принципе понять, какой Домклик должен быть в будущем.
Проблемы стейкхолдеров
У нас давно существовал бэклог с задачами с багами и предложениями по чату от команд, использующих его в своих продуктах. Все эти задачи годами уходили в эпик редизайна.
Многие из этих задач были уже скорее решениями, чем проблемами, поэтому для каждой задачи мы определили проблему, о которой говорит тот или иной стейкхолдер и добавили категоризацию по:
роли пользователя, который сталкивается с проблемой
к какому конкретно разделу или элементу чата относится эта проблема (список комнат, сообщений, общий UX комнаты и тд)
Эта категоризация помогла нам понять, что основная проблема о которой говорят большинство стейкхолдеров это огромное количество чатов, в которых путаются все типы пользователей (как клиенты, так и менеджеры). Эта проблема повлияла на то, что приоритетным способом связи у клиентом остаётся звонок, в том числе и с нашими менеджерами, что значительно их нагружает.
Определение задачи
📌
Редизайн чата, в котором пользователям будет легче ориентироваться по комнатам.
Поиск решения
У меня появилось несколько идей как мы можем упростить навигацию по чатам:
создать группы откликов по объявлениям
создать "цели использования Домклик" (папки): продаю, покупаю, сдаю, арендую
создать единую комнату поддержки, в которую пользователи могут писать по любым вопросам

Вариант 1

Вариант 2

Вариант 3
Прототипирование и тестирование
Мы провели коридорку и поняли, что 3-й вариант людям понятнее, поэтому мы на нём и остановились. Но также мы решили переиспользовать идею с переключением для архива (вариант 2).

Вариант 3 (детализированный)
В этом варианте мы поняли, что у него есть несколько проблем:
3D цели путаются с 3D аватарками чатов
Много тапов для проваливания внутрь чата с откликнувшимся
Финальный концепт

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

Финальный дизайн в нативе

Финальный дизайн в вебе (десктоп). Виджет может сворачиваться до компактного чата засчёт растягивания

Ну и мобильный веб