Проект выполнен в условиях NDA. Демонстрация дизайн-макетов возможна на собеседовании.
Интеграция осуществляет подключение WhatsApp Business Cloud API к CRM системе, которая консолидирует переписки, автоматически создаёт карточки лидов из входящих сообщений и позволяет осуществлять коммуникацию не покидая системы - с поддержкой автоматизации через чатбот, шаблонов сообщений, массовых рассылок и дашборд-аналитики.
Роль
Продуковый дизайн, CX
UX/UI дизайн
Продолжительность
Февраль 24
Задача
Актуализировать флоу в связи с техническими изменениями, а также с целью увеличить количество подключений за счёт добавления юз-кейсов
Разработать менеджер по управлению интеграцией
Разработать функционал бродкастинга с соблюдением требований вендора
Спроектировать раздел статистики
Этапы
Анализ поставленной задачи, сбор недостающей информации, согласование дедлайна
Разработка user-flow, проработка кейсов, поиск и проработка корнер-кейсов и состояний ошибок
Аудит компонентов системы, подготовка hi-fi драфтов возможных решений
Согласование флоу с продакт-менеджером
Согласование компонентов с ФЕ-архитектором
Разработка пиксель-перфект макетов
Перенос компонентов в Figma по принципу code-first и документирование
Сборка и согласование screen-flow со стейкхолдером
Написание документации и передача в разработку
Демо перед релизом
Финальная проверка на проде
Вызовы
В ходе я столкнулась с рядом вызовов и вот как я их решила:
работа в отсутвии дизайн системы, код ферст подход
Проведена инвентаризация компонентов в коде, необходимые компоненты перенесены из ядра в Figma и задокументированы
Недостающие компоненты собраны по стандартам, согласованы с разработкой и ФЕ-архитектором для дальнейшего добавления в формирующуюся ДС
В результате повысилась скорость сборки ряда экранов со стороны дизайна, а также их реализация за счёт уменьшения расхождений между макетами и ядром, заложена основа для ДС
отсутствие юз кейсов в постановке задачи
Самостоятельно проработала целевые сценарии и корнер-кейсы
Стандартизировала и задокументировала шаблон screen-flow
Обновлены требования к постановке задачи и работе с дедлайнами для заказчиков
В результате - сокращение числа итераций, синхронизация ожиданий между продуктовой командой и командой дизайна, более качественный hand-off в разработку
Результаты
Проведен ребрендинг интеграции
Обновлен флоу подключения и проработаны ключевые сценарии:
– подключение нового номера
– подключение номера, использованного ранее в других WhatsApp интеграциях
– миграция с неофициальной интеграции на WA Business Cloud APIРазработан менеджер по управлению интеграцией. Проработаны кейсы:
– добавление второго и более номеров
– управление номерами
– быстрые переходы к шаблонам и статистикеРазработана фича WhatsApp бродкастинга:
– создана форма бродкастинга с превью
– продумана возможность добавления изображения и файла
– проработаны пустые и ошибочные состояния
– проработаны статусы шаблонов: draft → pending → approved → rejectedРазработан раздел статистики WA бродкастов по номерам, предоставляющий такие данные, как:
– количество отправленных, доставленных и прочитанных сообщений
– количество CTA кликовДля согласования и передачи в разработку проект был собран в screen flow, отражающем все ключевые сценарии и состояния
Утверждённые компоненты собраны в Figma и подготовлены к добавлению в формирующуюся
Количество подключений: увеличилось на ~ 17% в течение первого квартала после релиза;
Среднее время подключения: сократилось на ~ 7%, несмотря на усложнение флоу из-за новых технически требований;
Количество тикетов в поддержку: снизилось на ~ 15% по сравнению с предыдущим периодом;
Использование функции бродкастинга: рост активности на ~ 12% среди новых подключений;
*При сборе данных не учитывалась сезонность и параллельные продуктовые изменения
Детали ключевых этапов
Постановка задачи
Изменения в технической логике WhatsApp Cloud API потребовали полного пересмотра флоу подключения. На этапе постановки задачи я уточнила технические ограничения, согласовала приоритеты с разработкой и продуктом.
Проработка сценариев и кейсов
Следующим шагом я приступила к проработке пользовательских сценариев подключения номеров в связи с изменениями в API. Проработаны кейсы: подключение нового номера, повторное подключение, миграция с неофициальных интеграций. Особое внимание уделено состояниям ошибок и corner-кейсам, чтобы обеспечить устойчивость сценариев при разных условиях.
Работа проходила итеративно, совместно с продактом и ФЕ-архитектором. Были предоставлены варианты как UX-, так и UI- решений, чтобы найти баланс между пользовательским опытом и нагрузкой на разработку.
В условиях отсутствия дизайн-системы был проведён аудит продакшн-кода, подходящие компоненты представлены ФЕ-архитектору, а утверждённые решения задокументированы в Figma по принципу code-first.
Screen flow и hand-off
На основе согласованных сценариев были собраны screen flow для подключения и управления интеграцией, а также для создания и работы с шаблонами бродкастинга. Подготовлен апгрейд секции статистики.
Такой формат позволил наглядно описать сложные переходы и ускорил утверждение решений со стейкхолдерами и разработкой.
Предложенный мною подход к hand-off стал стандартом при работе с продуктовыми задачами.
