Як вебчат OneReach став гнучким домом для AI-агентів.
ПРОЄКТ #1
2020–2023
Віджет вебчату
Роль
Єдиний продуктовий дизайнер
Команда
3 інженери, 2 QA
Терміни · Платформа
2020–2023 · Веб, мобільний веб
Ключові результати
25+ нових компонентів
Вибір дати, форми, медіа та інше, що надсилається просто в розмові.
Менше звернень у підтримку
Підтримка і команда отримували менше індивідуальних запитів, коли чат почав покривати більше сценаріїв.
Продукт для 1M+ клієнтів
Один клієнт створив і запустив власний продукт на основі нашого чату для бізнесу з понад мільйоном клієнтів.
Контекст
Чому це було важливо
Коли я прийшов, Rich Web Chat виглядав і працював як класичний чат-бот. Він відповідав на запитання готовими шаблонами.
Але OneReach переходив на AI-агентів. Агент не просто цитує статтю з довідки. Він записує на прийом, заповнює форму, доводить задачу до кінця. Для цього чату потрібно було набагато більше, ніж текстові бульбашки: вибір дати, чекбокси, форми й медіа, які можна надіслати посеред розмови.
Нашим розробникам рішень також треба було підлаштовувати чат під кожного клієнта: його бренд, його макет, його сценарій. Для всього цього дизайн був надто жорстким.
І була ще одна проблема. Інженери мали власну бібліотеку компонентів, а дизайнери працювали з окремим UI-кітом у Sketch. Вони ніколи не збігалися, тож кожен новий екран означав додаткову роботу для обох сторін.
Частина 1
Чат, який підходить кожному клієнту
Я почав із того, що клієнти просили вже зараз. Я спроєктував 25+ нових компонентів для чату і додав базові варіанти макета.
Це допомогло, але йшло повільно. Наші файли в Sketch були застарілими, і вручну підтримувати кожен компонент в актуальному стані забирало більше часу, ніж проєктувати нові.
Справжні зміни почалися, коли ми перейшли на Figma і спільну дизайн-систему з токенами. Я допомагав її будувати: спроєктував і задокументував 10+ компонентів, як-от вибір дати, часу, діапазону дат і діапазону дати й часу, і стежив, щоб вони були узгоджені в усіх наших сервісах.
Коли це було готово, я зробив редизайн самого чату:
Світла й темна теми.
Інструмент кастомізації, щоб наші розробники рішень могли підлаштувати кольори чату під бренд кожного клієнта, не просячи дизайнерів про нову версію.
Я також спроєктував лендинг Rich Web Chat і написав для нього тексти.
Частина 2
Від чат-бота до AI-агента
Коли з’явилися великі мовні моделі, одночасно надійшли три сигнали. Власники компанії попросили чат, який відчувається як AI. Дослідження конкурентів показало, що інші вже рухаються в цьому напрямку. А деякі клієнти казали нам, що наш віджет схожий на «стандартну набридливу форму чат-бота».
Тож замість того, щоб копіювати звички месенджерів, я змінив те, як чат пояснює, що відбувається:
Показати, що AI думає. Стани завантаження і м’які анімації дають користувачам зрозуміти, що агент працює, тож пауза не сприймається як баг.
Дати місце розгорнутим відповідям. Я переробив макет, щоб форми, файли, аудіо й картки природно вписувалися в розмову.
Один асистент у всіх наших інструментах. Я адаптував чат, щоб він міг працювати і як AI-асистент усередині власних продуктів OneReach.
Вплив
Що змінилося
Завдяки 25+ компонентам та інструменту кастомізації більшість потреб клієнтів покривалася одразу з коробки. Розробники рішень створювали більше рішень з власною бізнес-логікою і робили це швидше.
За словами команди й служби підтримки, у нашій тікет-системі стало менше індивідуальних запитів.
Один клієнт запустив власний продукт на основі нашого чату для бізнесу з понад 1 000 000 клієнтів.
Сьогодні компанії ведуть на цьому чаті свої процеси й автоматизації: від віджетів підтримки клієнтів до внутрішніх інструментів із голосом.
Висновки
Чого я навчився
01
Дизайн-система дає час подумати
До Figma і токенів більшість мого часу йшла на синхронізацію файлів. Після я міг витрачати його на справжні продуктові задачі. Інженери теж почали рухатися швидше, а всі екрани нарешті виглядали як один продукт.
02
Проєктуй під те, що робить AI, а не під те, до чого звикли люди
Копіювати месенджер здавалося безпечним, але це приховувало, що насправді робить агент. Коли чат почав показувати, що AI думає, пауза перестала виглядати як баг.
Це був мій перший проєкт в OneReach, і я був на ньому єдиним дизайнером. Він навчив мене відповідати за продукт від першого компонента до останнього релізу. Згодом мені захотілося більшого виклику, тож я перейшов на AI Agent Builder, де виріс до сеньйорської ролі.
Продуктовий дизайнер
© 2026 Віталій Дудка