14.10.24

UX-мечты в Циан: исследование, дизайн, разработка

No items found.
UX-мечты в Циан: исследование, дизайн, разработка
No items found.

Перед тем, как взяться за разработку чего-то нового, мы должны убедиться в том, что это принесёт пользу и бизнесу, и пользователям. За это отвечает команда discovery, которая состоит из продакт-менеджеров, исследователей, дизайнеров, аналитиков и UX-редакторов. Рассказываем, как этот процесс работает в Циан.

Рождение гипотезы

Первый шаг  — посмотреть, как пользователи взаимодействуют с продуктом: мешает ли им что-то решить задачу, какие сложности возникают на их пути.

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

Мы заметили, что некоторое количество пользователей, которые начинали создавать объявления о продаже квартиры или сдаче в аренду, не всегда доходили до его публикации. Чтобы разместить объявление, нужно заполнить форму с описанием квартиры и добавить фотографии. Звучит просто, но для человека, который делает это первый раз — задача сложнее чем кажется. У нас появилась  гипотеза о том, что если мы упростим путь пользователя и минимизируем риск ошибки при создании объявления, это повысит конверсию в публикацию.

Владимир Кулишин, Team Lead команды «Собственники»: Повышать конверсию можно двумя способами. Первый — реагировать на изменения рынка и своевременно добавлять для пользователя фичи, чтобы у него была высокая мотивация заполнить всю форму и опубликоваться. Второй — убирать барьеры при публикации, то есть добавлять какие-то подсказки, проверку данных. Оба способа предполагают регулярное внесение изменений в форму подачи, которые обходились бы слишком дорого: необходимо нарисовать дизайн и реализовать логику для всех платформ, на которых представлен Циан: обычный сайт, сайт для мобильных устройств, iOS и Android.

Какая проблема была в разработке, как она касалась пользователя и как мы переписали форму подачи объявления под Backend-Driven UI, Владимир Кулишин подробно рассказал на Frontend Conf. Можно послушать доклад и скачать презентацию 👀

Качественное исследование

Наши пользователи делятся на два сегмента: риелторы и собственники недвижимости. Как они подают объявления? Мы решили начать исследование с тех, кому приходится создавать объявления чаще — риелторов.

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

Следующий этап – это анализ интервью. Важно не просто описать действия, но проследить паттерны в мышлении и поведении респондентов. А еще понять, почему они мыслят и действуют так. Мы составили список проблем, которые нашли во время тестирования. Затем каждую проблему приоритизировали по тому, насколько она блокирует выполнение главной задачи – выложить объявление. После этого исследователь и команда продукта разрабатывают варианты решения. Часто их может быть несколько на одну проблему: например, если пользователи не замечают важный элемент, его можно сделать ярче, перенести в другое место или вообще поменять пользовательский сценарий. Команда вместе ищет оптимальное решение. Далее начинается вторая итерация работы над прототипом. В первую очередь в работу берутся самые критичные проблемы – из-за таких пользователи не могут выполнить задачу и уходят или обращаются в поддержку. Но мы хотим предотвратить и то, и другое.

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

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

Также на старой форме подачи, если фотки грузились огромной пачкой и что-то происходило с сетью, мы не делали попыток их загрузить заново. Сейчас на новой форме работает умный механизм, который пробует загрузить фотографии несколько раз.

Прототипирование и количественный анализ

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

Как разработка помогла дискавери команде собирать полезную информацию о проблемах у пользователей?

  1. Использовали опыт команды в поддержке формы подачи

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

  1. Команда разработки по своей инициативе настроила запись сессий пользователя

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

  1. Выгружали из систем мониторинга ошибки публикации, влияющие на конверсию

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

  1. Внедрили новые технические подходы под новый дизайн продукта 

Некоторые экраны загружались чуть дольше других. Для таких экранов мы сгенерировали скелетоны — некоторое примерное представление загружаемого экрана. Это позволило пользователям получить более плавный опыт.Сценарий создания нового объявления успешно запущен и сейчас мы работаем над  сценариями редактирования уже опубликованных объявлений. Тестируем разные прототипы для публикации из черновика, внесения изменений в опубликованное объявление, изменение условий публикации и подключение продвижения. Каждый из этих сценариев может иметь свои сложности, и мы рассматриваем их отдельно для поиска наиболее удобных решений. 

Eщё про команду:
Как искать драйверы роста бизнеса: опыт Циан
Как искать драйверы роста бизнеса: опыт Циан
Команда продуктовой вертикали
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Главное о команде
Главное о команде
Команда продуктовой вертикали
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Почитать о других:
Главное о команде
Главное о команде
Команда BI платформы
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Онбординг в стиле межгород
Онбординг в стиле межгород
Прикладные исследования (Deep VK)
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Как работать в команде, которая никогда не соберётся в одном месте и в одно время
Как работать в команде, которая никогда не соберётся в одном месте и в одно время
Команда BI платформы
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Фокус на одной задаче за раз: лучше меньше, да лучше
Фокус на одной задаче за раз: лучше меньше, да лучше
Core Team
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Как мы ищем идеальных сотрудников
Как мы ищем идеальных сотрудников
Команда performance-маркетинга
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Главное о команде
Главное о команде
Команда Java-разработчиков
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.