Редизайн экрана с интеграциями

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

Проблема. Люди жаловались в техподдержку, что на экране сложно искать канал. На момент старта список уже содержал 11 каналов, и именно на таком объёме пользователи жаловались, что не могут найти нужный. При этом планировалось увеличение числа интеграций — без переработки дизайна количество жалоб продолжило бы расти.

Цель. Снизить количество обращений в техподдержку по сценариям поиска каналов.

Масштабируемый дизайн экрана каналов позволит легко добавлять новые интеграции и снизит число обращений в поддержку надолго

Метрики успеха

• Отсутствие повторяющихся жалоб пользователей на поиск каналов
• Масштабируемость решения на практике: при добавлении каждой новой интеграции дизайн экрана и карточки не приходится переделывать

Продуктовая команда

Дизайнер (я), frontend-разработчики, QA. Я отвечала за дизайн интерфейса, руководство для разработчиков и за сверку итоговой реализации с макетами. Экран должен хорошо смотреться в разрешениях 1200–1920 px.

Пользовательский сценарий

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

Дизайн экрана

Интерфейс встречал пользователя пассивной информационной заглушкой «У вас нет подключенных каналов» и нейтральной кнопкой «Подключить». Такое решение фиксирует текущий статус системы, но не побуждает к действию и снижает конверсию в активацию. С помощью браузерного Inspector временно скрыла блок с пустым состоянием, чтобы оценить визуальный баланс макета без него. Пространство стало чище, однако ключевой сценарий подключения требовал более сильного акцента.

Решение:

• Убран пассивный заголовок-констатация.
• Текст кнопки изменён с нейтрального инфинитива «Подключить» на прямое обращение к пользователю в повелительном наклонении — «Подключите», что усиливает вовлечённость и задаёт чёткий фокус на целевое действие.

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

Решение. Сделать три логические группы:

1. Чаты и соцсети
2. Голосовые ассистенты
3. API & бизнес-системы

Визуальный дизайн плашек: итерации и поиск композиции. Задача заключалась в создании чистого, компактного и масштабируемого дизайна. Работа велась через серию быстрых итераций.

В процессе проектирования возникли UX-нюансы, которые потребовали доработки:

• Борьба с ложными ожиданиями. В первых итерациях чистые названия каналов визуально считывались как ссылки, по которым может произойти нежелательный переход. Для устранения этого эффекта каждому каналу вернула фоновые подложки.
• Усиление CTA. Для повышения наглядности сценария внутрь плашек добавила явную кнопку «Подключить».
• Интеграция апселла. В подписи интегрировала полезный коммерческий сценарий — отметку «Доступно на других тарифах» для неоплаченных или закрытых интеграций.

Коридорка

Делаю коридорное тестирование и прошу найти «ВКонтакте»: в новом макете его находили быстрее на 1–2 секунды. Общий отзыв людей сводился к тезису: «Теперь понятно, что где искать».

После коридорки прорабатываю поведение вёрстки на разрешении 1920×1080.

Участие в процессе разработки

Составляю руководство для разработчиков. По шагам описываю построение экрана в целом и каждой секции. Отдельно разбираю стандартные и широкие форматы.

У карточки есть неочевидные состояния и поведение: название канала может быть в одну или несколько строк, канал заблокирован для подключения, пользователь навёл курсор на карточку. Поэтому карточка канала описывается подробно.

По этому гайду впоследствии проводилась сверка реализации с макетами — сверку проводила я сама.

Спустя две недели я узнала, что в продукте появится возможность добавлять операторов к боту, интеграции, а также изменятся тарифы. Состояние карточки «Доступно на других тарифах» стало неактуальным, кнопку «Подключить» убрала — и так было понятно, что делать. В верхней части интерфейса появились секции «Подключения» и «Оператор».

Было — Стало

Редизайн каталога и деление на группы сняли жалобы на поиск, а новый интерфейс легко масштабируется под будущие интеграции

Прошло шесть лет. Концептуально дизайн экрана остался прежним.