Упростил путь от регистрации до работающего виджета. Сфокусировал setup-flow и сделал результат настройки видимым до публикации
Задача
Снизить отвал пользователей на этапе первоначальной настройки Yourgood.Widget и упростить путь от регистрации до работающего виджета на сайте.
Успешной активацией считались два последовательных действия: пользователь должен подключить хотя бы один мессенджер, а затем установить JS-код виджета на свой сайт.
Ключевая продуктовая цель — увеличить долю пользователей, которые доходят до активации, и сделать первоначальную настройку быстрее и понятнее.
Результат
Перестроил первоначальную настройку вокруг обязательного сценария, добавил live-preview и перевёл обновлённый интерфейс на общую дизайн-систему Yourgoods.
Сфокусировал интерфейс на основном сценарии, добавил мягкое сопровождение пользователя и отдельное интерактивное preview, которое показывает изменения виджета в реальном времени ещё до публикации.
После запуска пользователи стали быстрее проходить настройку, снизилось количество обращений в поддержку, а опрос показал положительную оценку обновлённого раздела.
Команда и моя роль
Я был единственным дизайнером Yourgood.Widget и работал в связке с продактом, CEO, арт-директором и разработчиками. Разобрал существующий сценарий, построил User Flow, подготовил прототип, провёл коридорные тесты и подготовил решение к реализации.
Параллельно переводил Widget с локальной библиотеки компонентов на общую дизайн-систему экосистемы Yourgoods, синхронизируя переход с разработкой поэтапно, чтобы редизайн не становился блокером для релизов.
Ограничение: backend и технический способ установки виджета менять было нельзя — решение нужно было найти внутри существующей логики продукта.
Почему появилась задача
Yourgood.Widget позволял добавить на сайт кнопку для связи через WhatsApp, Telegram или Viber. Для запуска пользователю требовалось всего два действия: подключить хотя бы один канал и установить JS-код на сайт.
Но продуктовая аналитика показывала отвал на этапе настройки, а в поддержку регулярно приходили вопросы о запуске и проверке виджета.
После регистрации пользователю сразу становились доступны остальные разделы продукта, поэтому он мог уйти из setup-flow ещё до активации. При этом интерфейс недостаточно явно объяснял, какие действия обязательны и в каком состоянии виджет уже готов к установке.
Сфокусировал первый запуск и объединил настройку в один сценарий
В старом интерфейсе установка и дизайн виджета находились в разных разделах личного кабинета. При этом для активации пользователю нужно было пройти два обязательных шага: подключить хотя бы один канал и установить JS-код на сайт.
Я описал существующий User Flow и увидел, что проблема была не только в навигации между шагами, но и в том, что связанные действия были разнесены по разным частям продукта.
Поэтому я объединил установку и настройку внешнего вида в один сценарий. На одном экране пользователь последовательно подключает канал, получает код для установки и сразу видит, как будет выглядеть его виджет.
До завершения активации второстепенные разделы продукта сделал недоступными, оставив только системные разделы вроде профиля и базы знаний. Ограничения сопровождались подсказками, поэтому пользователь понимал, что нужно сделать сейчас и что станет доступно следующим.
Так первый опыт превратился из набора отдельных разделов в единый путь до рабочего и настроенного виджета.
Сделал результат настройки видимым до публикации
Чтобы проверить изменения, пользователям приходилось переключаться между админкой и собственным сайтом и обновлять страницу.
Preview существовало и раньше, но было спрятано внутри плавающего виджета и могло восприниматься как вход в поддержку.
Я вынес его в отдельный блок «Мой виджет». Preview обновлялось в реальном времени и оставалось интерактивным, поэтому пользователь мог проверить внешний вид и поведение виджета, не покидая настройки.
Что изменилось после запуска
После реализации пользователи стали быстрее доходить до рабочего состояния виджета. Снизилось количество обращений в поддержку по вопросам настройки и предварительного просмотра, а пользовательский опрос показал положительную оценку обновлённого раздела.
Что показал проект
В сценарии активации больше свободы не всегда означает лучший пользовательский опыт.
Основной эффект редизайна появился не за счёт новых возможностей, а за счёт того, что продукт стал яснее объяснять пользователю: что сделать сейчас и какой результат это даст.