Новый режим древа, который увеличил конверсию в услуги на 21,6%
Задача
Упростить работу с большим древом и увеличить конверсию в генеалогические услуги
Результат
После запуска нового представления конверсия в заказ генеалогических услуг выросла с 1,85% до 2,25% (+21,6%). После A/B-теста решение внедрили для всех пользователей.
Команда и моя роль
- CPO
- арт-директор
- продуктовый дизайнер (я)
- исследователь
- аналитик
- разработчик
Я отвечал за продуктовый дизайн: анализ сценария, проработку альтернативного представления, участие в тестировании и подготовку решения к запуску в прод.
Нельзя было перестроить существующее древо, поэтому задача заключалась не в редизайне, а в поиске второго способа работы с теми же данными.
Откуда взялась задача
Пользователи работали с карточками родственников только через графическое представление генеалогического древа. Этот формат хорошо показывает родственные связи, но хуже подходит для регулярной работы с большим количеством персон.
Чтобы проверить это, мы провели интервью с текущими пользователями, где заметили повторяющийся паттерн: когда древо разрастается, пользователям становится сложно находить людей и возвращаться к недавно изменённым карточкам. Вот несколько ключевых цитат:
Хочется нормальный список, чтобы одним взглядом видеть всех родственников, а не бегать по веткам
Древо разрастается вширь, приходится постоянно скроллить, увеличивать или уменьшать масштаб древа, и я всё время теряюсь
Когда много поколений, древо разваливается на кучу линий, трудно понять, кто и как связан со мной
Параллельно у продукта была бизнес-задача — увеличить конверсию в генеалогические услуги. Основные точки входа находились внутри карточек родственников, но добавлять новые баннеры непосредственно на древо было нельзя: по мере роста оно и без того становилось визуально перегруженным
Гипотеза
Мы предположили, что проблема не в самом древе. Оно хорошо показывает родственные связи, но плохо подходит для работы с большим количеством персон. Поэтому я предложил оставить его основным форматом отображения древа и добавить дополнительный формат — табличное представление. Отсюда родилось правило: древо — для понимания связей (ключевая функция древа), список — для поиска и работы с персонами.
Как помочь быстро находить нужного родственника
В большом древе пользователю приходилось перемещаться между ветками и открывать карточки, чтобы найти нужного человека. В список я вынес минимальный набор данных, по которому можно идентифицировать родственника без открытия карточки: имя, степень родства, годы жизни и место рождения.
Как не потерять преимущества самого древа
Список удобнее для поиска, но хуже показывает родственные связи. Поэтому я не стал делать два изолированных режима: из списка пользователь может открыть выбранного родственника прямо на древе, увидеть его место в семье и вернуться обратно к той же персоне.
Как помочь вернуться к людям, с которыми недавно работал
На интервью пользователи рассказывали, что в большом древе им сложно повторно найти недавно изменённую карточку. Поэтому кроме сортировки по фамилии я добавил сортировку по последним изменениям — она позволяет продолжить работу с того места, где пользователь остановился
Как сделать услуги заметнее, не перегружая древо
У проекта была и бизнес-задача: увеличить конверсию в генеалогические услуги. Раньше предложение появлялось только внутри карточки родственника, поэтому пользователь мог его не увидеть. Добавлять новые баннеры на древо мы не хотели — интерфейс и без них был насыщенным.
В списке я привязал предложение к конкретному родственнику, для которого доступна услуга. Так коммерческий сценарий стал заметнее, но остался частью пользовательского контекста.
Протестировали новый формат с пользователями
Перед запуском мы проверили, понимают ли пользователи назначение второго режима, могут ли быстро найти родственника и не теряют ли контекст при переходе между списком и древом.
Основной сценарий был понятен без дополнительных объяснений. При этом тестирование выявило проблему с сортировкой: после выбора пользователи не всегда помнили, в каком порядке отображаются карточки.
Сортировка была представлена иконкой рядом с поиском. После выбора она не показывала, какой порядок сейчас применён.
Сортировку вынесли в отдельный контрол, в котором сразу отображается выбранный порядок — например, «По последним изменениям».
Проверили влияние на бизнес
После UX-тестирования совместно с аналитиками и разработчиками настроили отслеживание ключевых действий и раскатили эксперимент на 50% пользователей.
Контрольная группа: 1.85%
Тестовая группа: 2.25%
Контрольная группа: 7.87%
Тестовая группа: 8.75%
Контрольная группа: 19.96%
Тестовая группа: 22.20%
Все три отслеживаемые метрики выросли в тестовой группе. После эксперимента команда приняла решение внедрить табличное представление для всех пользователей.
Что показал проект
Один и тот же набор данных может требовать разных способов представления. Древо осталось лучшим инструментом для понимания родственных связей, а список — для поиска, редактирования и коммерческих сценариев.