Как мы сделали новый виджет чата и увеличили конверсию на 38%. История разработки

Привет! Я Полина, я Product manager в Carrot quest. Последние полгода мы с командой разрабатывали новый виджет чата. Теперь он приносит больше конверсии в диалог: +25% в SaaS и +38% в eCom.

Это были насыщенные 6 месяцев исследований, тестов и крутых открытий. Конечно, не обошлось без факапов. Куда без них 🤷‍♀ Я расскажу вам историю разработки изнутри: от идеи до релиза.

Как возникла идея

Задумайтесь, как люди общаются с друзьями. Договариваются о встрече в мессенджере, отправляют мемы в Instagram (социальная сеть компании Meta, которая признана экстремистской в РФ), делятся статьей в Telegram, а обсуждают ее с помощью, скажем, войсов во ВКонтакте. Легко меняют каналы и способы общения, но не теряют общий контекст.

Мы хотим перенести эту модель на коммуникацию человека с брендом. Чат на сайте — тот самый инструмент, который может объединить все общение. Только вот старый виджет нашего чата для этого не подходил на 100%.

Мы сформулировали, каким хотим видеть продукт через три года. Все наши обновления исходят из идей Сonversational Marketing и Conversational Support, где диалог — центральная ось воронки, все держится на нем.

Главная идея нового виджета в том, чтобы бизнес не терял целевую коммуникацию с клиентами. В 2022 люди уже не готовы заполнять формы на сайте, ждать ответа днями и часами. Да и звонки с незнакомых номеров вызывают опасения. Многие молодые люди не любят говорить по телефону в принципе.

Поэтому диалог должен начинаться там, где удобно именно пользователю. В современном мире ― это чат на сайте, мессенджеры и соцсети.

Дима Туровский

, Head of product

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

Мы хотим изменить способ общения клиента и компании, сделав его таким же, как между человеком и человеком.

Наш прежний виджет выполнял свои задачи, но делал это не на 100%

И вот почему:

  • В мобильной версии было неочевидно, как написать в чат. Люди думали, что виджет просто агрегирует соцсети и мессенджеры, без чата. Чтобы написать именно в чат, приходилось дважды нажимать на иконку чата. В итоге наши клиенты не добирали конверсию в мобильном трафике.
  • В десктопной версии была обратная проблема: при наведении курсора на иконку чата, доступные каналы вылетали так быстро, что пользователи не замечали их. Конверсия в мессенджеры и соцсети была низкой. При этом люди не готовы долго оставаться на сайте, чтобы общаться с оператором.
В старом дизайне доступные каналы появлялись при наведении курсора на иконку чата
В старом дизайне доступные каналы появлялись при наведении курсора на иконку чата

Если проще, то в виджете не хватало пространства, которое объединило бы все каналы коммуникации и сделало переход в мессенджеры и соцсети прозрачным. Эти узкие места мы нашли благодаря кейсам, исследованиям и обратной связи от наших клиентов.

Наши цели при разработке нового виджета:

  • Увеличить конверсию в диалог, особенно на мобильных устройствах.
  • Снизить количество брошенных пользователями диалогов из-за ожидания на сайте.
  • Обновить дизайн, чтобы он был трендовым и удобным для пользователей.
  • Сделать единый дизайн чата для мобильной версии и десктопа.

Для этого проекта мы собрали рабочую группу. На этапе обсуждений собирались с Head of product, командой продукта и дизайнером, а к рабочим процессам подключали разработчиков и команду маркетинга.

<p>Было/стало: старый и новый дизайн виджета чата</p>

Было/стало: старый и новый дизайн виджета чата

Подробно о каждом этапе разработки и результатах А/Б тестов я рассказала в нашем блоге. Интересны детали? Читайте полную версию

Сначала — исследование

В своих проектах мы используем продуктовый подход: выдвигаем гипотезы, проводим исследования, разрабатываем MVP, тестируем, анализируем результаты, дорабатываем продукт и только после этого переходим к полноценному внедрению. Так было и с разработкой нового виджета.

На старте мы хотели понять, что вообще людям важно в чате. Чтобы узнать наверняка, запустили опрос внутри сервиса, а также проанализировали обратную связь, которую получали от клиентов раньше.

Дальше мы искали форму: формулировали гипотезы, делали черновые прототипы, обсуждали их и возвращались к поиску других идей. Раз за разом. Очень. Много. Раз.

<p>Прототипы нового виджета чата Carrot quest</p>

Прототипы нового виджета чата Carrot quest

Важно было сделать выбор доступных каналов:

  • заметным, удобным для пользователей, и при этом в минималистичном дизайне;
  • одинаковым для мобильной и десктопной версии сайта.

Так мы пришли к основной идее — внутри виджета нужен главный экран.

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

Женя Шохирев

,

Product designer

Дизайн 1.0: версия с кнопками

Мы собрали MVP (Minimum Viable Product), чтобы проверить концепцию с главным экраном. Решили отказаться от вертикальной структуры в чате и вывести все каналы на видное место.

Виджет чата с кнопками
Виджет чата с кнопками

Тест и результаты

Мы запустили тест сначала на своем сайте, а позже подключили к бета-тесту нескольких клиентов, которые захотели попробовать новый виджет.В результате теста мы узнали, что конверсия в диалог с мобильных устройств выросла на 86% в eCom, и на 52% SaaS ⚡

В числе первых тестеров были Surprise.by — проект, который помогает людям выбирать подарки-впечатления. Команда давно пользуется Carrot quest для общения с клиентами и всегда готова тестировать новые инструменты.

С новым виджетом конверсия на сайте Surprise.by увеличилась на 254% в написание в чат, и на 160% — в начало диалога в любом из каналов.

Мы теряли клиентов, если они не могли или не хотели ждать ответ в чате на сайте. С новым виджетом пользователи реже бросают чат, не дождавшись ответа, поскольку переходят в мессенджеры и продолжают общение там. Наверное, людям стало понятнее, как продолжить переписку в удобном для них канале.

Роман Фернандо, СЕО Surprise.by
Конверсия в диалог в мобильном трафике выросла у всех бета-тестеров
Конверсия в диалог в мобильном трафике выросла у всех бета-тестеров

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

Дизайн 2.0: версия со слайдером

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

В слайдер можно добавить неограниченное количество каналов

Тест и результаты

Мы снова запустили А/Б тест: 50% пользователей видели старый виджет чата до всех обновлений, 50% — новый виджет со слайдером.

Тест показал, что конверсия в мессенджеры в мобильном трафике снизилась 😱 Мы стали искать причину и поняли, что на самом деле это крутой результат. Почему?

Выросла общая конверсия в диалог на 36% и конверсия в чат на 86%. С новым виджетом пользователям стало понятно, как написать именно в чат, и теперь они реже переходят в соцсети и мессенджеры. Это значит, что версия со слайдером решает проблему старого виджета.

Релиз и планы на будущее

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

Круто пробовать новое, так что мы охотно приняли участие в тесте. Дизайн приятный, конверсия в диалог действительно увеличилась. Единственное, неудобно, что все сообщения, включая триггерные, собираются в одну кучу.

Работаем с инструментами Dashly с 2017 года. Отличный сервис, на 9 из 10.

Виталий Звонар, Head of product Freedom Finance

Новый виджет на сайте Freedom Finance увеличил конверсию в чат на 438% и общую конверсию в начало диалога на 124%.

Dashly — англоязычная версия Carrot quest.

Возможности нового чата Carrot quest

  • Все каналы коммуникации на виду

Можно интегрировать в чат мессенджеры и соцсети, и настроить их порядок в слайдере. Больше доступных каналов — больше диалогов. Больше диалогов — больше продаж.

  • Кастомизация

Можно адаптировать дизайн чата к цветовой схеме сайта. Нет ограничений по выбору оттенков, можно использовать готовые паттерны.

  • Единый дизайн виджета

Теперь в десктопной и мобильной версиях виджет выглядит одинаково. Одинаково лаконично и интуитивно понятно. Это поменяло логику взаимодействия с чатом и увеличило конверсию в диалог.

  • Непрерывное общение

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

Интересно, что еще планируем добавить в виджет чата? Читайте полную версию статьи в нашем блоге.

А если вам нужна помощь, чтобы настроить инструменты Carrot quest и понять, чем они будут вам полезны, мы проведем бесплатную консультацию. Просто напишите нам в чат на сайте.

2222
1 комментарий

Выглядит стильно!! А фразы типа "увеличил конверсию в чат на 438%" вообще взрывают мозг. Получается пользователям зашло!

4
Ответить