Проект выполнен в условиях NDA. Демонстрация дизайн-макетов возможна на собеседовании.
Онбординг для CRM-системы — сценарий пошагового знакомства с продуктом и базовой настройки аккаунта, помогающий новому пользователю понять ключевые возможности сервиса.
Визард — инструмент, цель которого — заменить классический онбординг и автоматизировать ряд первых шагов по настройке нового аккаунта, ускоряя начало работы пользователя в системе.
Роль
Продуковый дизайн, CX
UX/UI дизайн
Team Lead
Продолжительность
Июнь 24
Задача
Разработать единый сценарий онбординга для регистрации новых аккаунтов в системе
Предложить новый визуал, презентовав стиль промо в продукте
Сформировать предложение по фиче «Визард». Гипотеза состоит в том, что «Визард» сократит путь пользователя от регистрации до активного использования системы
Этапы
1-я итерация:
Анализ задачи, составление дорожной карты проекта
Сбор бизнес-требований
Исследование аудитории и сегментирование
Исследование юз-кейсов и их приоритизация
Аудит ключевых сценариев
Исследование конкурентов и референсов
Формулирование гипотез и определение функциональных / нефункциональных требований
Сборка экранов с помощью Userflow
A/B-тестирование
Разработка и согласование финального флоу онбординга
Итеративный поиск визуальных решений через hi-fi-драфты, презентация стейкхолдеру
Пиксель-перфект-макеты по выбранному направлению, документация
Передача в разработку, предрелизное демо
Финальное ревью на проде
2-я итерация:
Постановка задачи команде дизайнеров
Чекпоинты по задаче
Обновление user flow
Сборка новых экранов по запросу команд сейлзов и маркетинга
Разработка тёмной темы для онбординга с заложенной масштабируемостью
Аудит hi-fi макетов
Визард:
Исследование конкурентов
Исследование аудитории, определение основных мотиваций и болей новых пользователей
Сборка юз-кейсов
Формулирование гипотез
Приоритизация фич по моделям Kano и ICE
Сборка трёх основных концептов в формате lo-fi макетов
Презентация проекта и передача его в продуктовую команду
Вызовы
В ходе проекта команда столкнулась с рядом вызовов и вот как мы их решили:
ввести элементы промо дизайна в продуктовый онбординг
разработан дизайн на стыке продукта и промо-сайта, с адаптацией бренд-палитры и типографики, подготовкой токенов и компонентов к добавлению в ДС, обеспечивающий плавный переход от регистрации до первых шагов в продукте
как результат, расширена библиотека ядра, что предоставило больше гибкости в работе с UI
предоставить dark mode для онбординга
собрана система семантических токенов (surface/text/action/state)
заданы правила поведения компонентов и оформлен краткий гайд
как результат, онбординг запущен в тёмной теме, готовой к масштабированию без изменений
Результаты
Созданы интерактивные прототипы для A/B-тестирования сценариев общего и гео-ориентированного онбординга через Userflow с целью снижения нагрузки на разработку. По результатам тестирования определена приоритетная версия онбординга
Спроектирован общий онбординг, учитывающий сценарии, ключевые для новых пользователей системы
По результатам исследования ключевых сценариев в продукте, выявлены фрикции, сделаны предложения по оптимизации пользовательского опыта
Проработано 5 сценариев и их взаимодействие между собой
Предложен чек-лист по туториалам онбординга и сценарий по завершению всех туториалов
Разработан визуал на стыке продукта и промо-сайта, обеспечивающий плавный переход между промо-сайтом и системой
Расширена библиотека ядра дизайн-системы: новые токены, компоненты, состояния. Задокументированы правила поведения компонентов и оформлен гайд по внедрению
Во второй итерации разработаны экраны квалификационной формы, цель которой — собрать информацию для отдела маркетинга и продаж
Внедрена тёмная тема, совместимая с ДС и готовая к масштабированию
Проведено исследование по фиче «Визард», подготовлены UX-гипотезы по сокращению пути пользователя от регистрации до первого целевого действия
Сформировано 3 предложения по реализации с разной степенью вовлечённости пользователя
Результаты презентованы стейкхолдеру и переданы в продуктовую команду. В данный момент фича находится в разработке
По итогам проделанной работы даны рекомендации:
- по исправлению логики взаимодействия окон квалификационной формы
- по замене или удалению сториз из флоу онбординга как несущих низкую ценность для пользователя в текущей реализации (на основании анализа пользовательского поведения)
- по уменьшению фрикций в ключевых сценариях, обнаруженных в ходе анализа пользовательских путей
- по внедрению A/B-тестирования как одного из стандартных этапов разработки продуктовых решений
A/B-тестирование: различия между общим и гео-вариантом онбординга не достигли статистической значимости, принято решение разрабатывать универсальную версию. Оценочно, использование для тестирования Userflow снизило затраты на разработку на ~15–20%;
Time-to-value: среднее время до первого целевого действия сократилось на ~20% за счёт подсказок;
Нагрузка на поддержку: количество тикетов, связанных с первыми шагами настройки, снизилось на ~12% в первый месяц после релиза.
Детали ключевых этапов
Гипотезы, ФТ и НФТ
Завершив исследовательский блок — сбор бизнес-требований, анализ аудитории и аудит текущего онбординга — я выделила основные проблемные точки в пользовательском пути. Следующим шагом стало формулирование гипотез и определение требований к будущему решению, чтобы перейти от выявленных проблем к конкретным сценариям улучшения.
A/B-тестирование
Провела A/B-тестирование сценариев общего и гео-ориентированного онбординга в инструменте Userflow. Часть экранов была реализована самостоятельно в конструкторе, по остальным были подготовлены гайдлайны и рекомендации для разработки. Результаты тестирования не показали статистически значимой разницы между вариантами. Для снижения нагрузки на разработку было решено продолжить разработку генерального онбординга.
Финальный флоу
На основе результатов тестирования и собранной обратной связи доработала финальный пользовательский флоу онбординга. Проработала основные сценарии, ошибки и корнер-кейсы.
Поиск визуального решения
На этом этапе прошел итеративный поиск визуальных решений. Целью было выработать язык на балансе промо-сайта и продукта, который обеспечил бы плавный переход пользователя от регистрации на сайте до первых шагов в CRM-системе. Драфты для выбора финальной визуальной концепции презентовались стейкхолдеру в формате hi-fi для наглядности и получения точной обратной связи.
Пиксель-перфект
Подготовила финальные макеты по выбранному направлению, проработала детали интерфейса и состояния экранов. Оформлена передача в разработку с документацией и комментариями для корректной реализации. Сценарий предоставлен в формате Screen-flow.
Вторая итерация
Для второй итерации я сформулировала задачи, определила приоритеты и чекпоинты, контролировала выполнение на каждом этапе. Курировала обновление пользовательских флоу, сборку новых экранов по запросам сейлзов и маркетинга, а также разработку тёмной темы онбординга с учётом масштабируемости. Провела финальный аудит hi-fi макетов перед передачей в разработку, обеспечив соответствие визуальным и UX-гайдлайнам.
Визард
На последнем этапе в рамках этой задачи я работала над предложением по новой фиче — инструменту «Визард», который должен заменить классический онбординг и автоматизировать первые шаги по настройке аккаунта. На основании исследований конкурентов и аудитории сформулировала гипотезу: внедрение визарда сократит путь пользователя от регистрации до активного использования системы. Собрала юз-кейсы, провела приоритизацию фич по моделям Kano и ICE, подготовила три основных концепта в формате lo-fi макетов и презентовала решение продуктовой команде.
