Проект выполнен в условиях NDA. Демонстрация дизайн-макетов возможна на собеседовании.
Чатбот — CRM-инструмент для автоматизации задач, осуществляемых по заданным триггерам, а также для коммуникации с клиентами, их сопровождения, постановки задач и других бизнес-процессов.
Роль
Продуковый дизайн, CX
UX/UI дизайн
Кросс-функциональная команда
Team Lead
Продолжительность
Март 24
Задача
Разработать фичу превью для чат-бота, чтобы сократить цикл его создания пользователями, а также уменьшить количество ошибок при работе с конструктором
Имплементировать настройщик триггеров в конструктор бота для более быстрой и интуитивной настройки сценариев
Этапы
Анализ и оценка задачи, согласование дедлайна
Анализ конкурентов
Тестирование конструктора чат-бота
Проектирование пользовательских сценариев и user flow
Исследование ограничений и возможностей каналов
Инвентаризация компонентов продакшен-библиотеки
Разработка первой итерации: hi-fi-драфты для согласования со стейкхолдером; пиксель-перфект-макеты для согласования с разработкой
Создание screen-flow для демонстрации логики
Подключение джуна ко второй итерации, контроль выполнения, аудит проделанной работы
Передача в разработку
Коммуникация с разработкой по ходу имплементации
Демо перед релизом
Финальная проверка на проде
Вызовы
В ходе проекта команда столкнулась с рядом вызовов и вот как мы их решили:
работа в отсутвии ДС, code-first подход
проведена инвентаризация компонентов в коде, необходимые компоненты перенесены из ядра в Figma и задокументированы
недостающие компоненты собраны по стандартам системы, согласованы с разработкой и фронтенд-архитектором для дальнейшего добавления в формирующуюся ДС
как результат, повысилась скорость сборки ряда экранов со стороны дизайна, а также их реализация за счёт уменьшения расхождений макетов и ядра
онбординг-задача нового в команде
UX/UI дизайнера
брифинг по задаче и её декомпозиция
сопровождение по ходу всей задачи, онбординг по внутренним процессам и особенностям работы с системой
помощь в коммуникации с заказчиком и разработкой
аудит проделанной работы, перформанс-ревью по итогам задачи
как результат, быстрый выход джуна на стабильное качество макетов
Результаты
Спроектирована и запущена фича превью для чат-бота
Проработаны кейсы для 5+ каналов с учётом возможностей и ограничений каждого. Примеры кейсов:
- простое сообщение,
- сообщение с кнопкой / URL-кнопкой,
- раунд-робин,
- виджет,
- кастомный шаг и т.д.Проработаны кейсы ошибок
Добавлены технические сообщения
Учтён кейс работы конструктора при активном превью
Даны рекомендации и ограничения для команды копирайтинга
Необходимые компоненты для задачи по тригерам переносены в Figma попринципу code-first; новые компоненты созданы и задокументированы с учётом стандартов системы
Сформирован план-предложение по проведению юзабилити-тестирования
Проведен успешный онбординг нового ux/ui дизайнера в команде уровня junior
В рамках задачи по оптимизации работы чат-бота была исследована возможность добавления поисковой строки в ряд связанных интерфейсов. Макеты доведены до пиксель-перфект этапа, логика согласована с разработкой
Adoption: функцией превью пользуются ~60% активных пользователей конструктора спустя 6 недель после релиза;
Скорость цикла создания сценария: среднее время сокращено на 40% (с ~12 до ~7 мин) благодаря наглядности превью и добавлению триггеров в область конструктора;
NPS чат-бота: вырос на 0,6 пункта по данным пользовательских опросов;
Количество тикетов в саппорт по конструктору чат-бота: сократилось на 20% по сравнению с предыдущим релизом.
Детали ключевых этапов
User Flow
После того как основные этапы были определены и согласованы со стейкхолдерами, я перешла к проработке пользовательской логики и спроектировала User Flow для фичи превью:
Драфты
Для наглядности и получения точной обратной связи стейкхолдеру были презентованы hi-fi драфты. На поиск оптимальных UX-решений и визуальных решений потребовалось 7 итераций. В качестве референсов были использованы как внутренние компоненты продукта, так и интерфейсы используемых каналов.
Как результат, были выработаны оптимальный UX и универсальный визуальный язык, органично вписывающийся в стилистику системы.
Screen flow
Параллельно с поиском UX-решений прорабатывалась логика работы окна превью и его взаимодействия с областью конструктора. Такой подход помог обеспечить согласованность всех сценариев и их нативность для пользователей. Одновременно с созданием пиксель-перфект-макетов был завершён screen flow, отражающий полную логику работы фичи.
Вторая итерация
Во второй итерации были обновлены технические сообщения в связи с обновлением информации по ним, а также финализирована коллекция компонентов для данного раздела. Компоненты были стандартизированы в соответствии с продакшн-кодом продукта, получили одобрение разработки и подготовлены для добавления в формирующуюся дизайн-систему.
Эта задача стала первым полноценным погружением джуна в продукт. Были проведены онбординг и полное сопровождение работы: постановка задачи, знакомство с процессом в отсутствие дизайн-системы, коммуникация с разработкой и передача в handoff. За короткий срок удалось погрузить джуна в основные особенности продукта и вывести его на более самостоятельный уровень работы.
Добавление настройщика триггеров в конструктор
На основании исследования продакшн-кода был предложен ряд вариантов реализации настройщика триггеров. Проработана логика работы настройщика. Финальный вариант одобрен ФЕ-архитектором. Компоненты подготовлены к добавлению в библиотеку.
