Результат в цифрах
Цель по Full Adoption превысили на 40 %. CSAT вырос на 0,5 пункта и почти достиг целевого значения.
Контекст
Я подключился к продукту на стадии выхода из MVP. Архитектура настроек формировалась по мере появления шаблонов, поэтому настройки одинаковых элементов в разных блоках вели себя по-разному, панель настроек плохо считывалась, а доступ к вложенным настройкам требовал лишних действий.
Бизнес-мотивация
Компания переводила крупных клиентов на новый конструктор и планировала масштабировать его дальше. Однако накопившиеся ограничения UX и архитектуры усиливались с каждым новым шаблоном, снижали предсказуемость продукта и замедляли переход клиентов.
Поэтому нужно было не исправить несколько отдельных контролов, а сформировать единую и масштабируемую систему настройки блоков.
Мой вклад
- Проанализировал обратную связь клиентов и провёл интервью.
- Разобрал стандартные шаблоны и выявил несогласованность в структуре настроек.
- Выделил типовые элементы и блоки, описал для них состав и порядок контролов.
- Спроектировал группировку настроек и навигацию по вложенности.
- Проверил решения на прототипах: 14 гипотез с 10 клиентами.
- Вместе с продакт-менеджером и архитектором составил дорожную карту поэтапного включения.
- После релиза провёл повторные интервью и сравнил CSAT до и после изменений.
Подробнее про ключевые проблемы и решения
Превратил разрозненные шаблоны в систему
Проблема
В продукте не было зафиксированных типов стандартных элементов и блоков. Каждый шаблон размечался отдельно в HTML, поэтому, например, одна кнопка могла иметь настройку ширины, а другая – нет. Одинаковые по смыслу элементы письма вели себя по-разному.
Решение
Я выделил повторяющиеся типы элементов и блоков, а затем описал для каждого единую структуру, набор настроек и их последовательность – с учётом частоты и приоритета использования.
Что изменилось
Похожие элементы стали настраиваться одинаково, а новые шаблоны можно было собирать на базе общих правил.
Показать макеты в Figma
Снизил визуальный шум в панели настроек
Проблема
Настройки выглядели как сплошное полотно контролов. Слабая группировка и большое количество инпутов с обводками мешали быстро понять структуру панели и найти нужный параметр.
Решение
Я разделил настройки на смысловые группы, собрал их в визуальные «островки» и пересмотрел часть контролов, чтобы убрать лишние обводки. Панель получила выраженный ритм и стала лучше сканироваться.
Что изменилось
Пользователю стало проще увидеть границы групп и быстрее перейти к нужной настройке.
Показать макеты в Figma
Адаптивные размеры кнопки
Проблема
Ширина кнопки одновременно зависела от нескольких конкурирующих настроек – режима «по ширине контента» и внутренних отступов. Размеры задавались только в пикселях и не адаптировались к контейнеру, а для мобильной версии не было отдельных значений.
Решение
Я пересобрал логику размеров кнопки:
- оставил один понятный способ управлять шириной;
- добавил размеры в процентах от контейнера;
- разделил настройки ширины и высоты для десктопа и мобильной версии;
- вместе с разработкой зафиксировал размеры контейнеров и синхронизировал вёрстку блоков с новой логикой.
Что изменилось
Кнопка стала предсказуемо адаптироваться к лейауту, а отдельные блоки ради мобильной версии больше не требовались.
Показать макеты в Figma
Дал прямой доступ к вложенным элементам
Проблема
Кликабельными были только два уровня вложенности. Чтобы изменить кнопку внутри карточки товара, пользователь сначала выбирал карточку, а затем искал кнопку среди настроек в боковой панели.
Решение
Я пересобрал логику кликабельных областей: теперь клик по вложенному элементу сразу открывает его настройки независимо от глубины – блок → карточка → кнопка.
Что изменилось
Навигация стала соответствовать ожиданию «нажал на элемент – редактирую этот элемент» и перестала требовать обходного пути через родительский уровень.
Как проверял решение
Для ключевых сценариев я собирал интерактивные прототипы и проверял, как клиенты справляются с новой навигацией. Всего протестировал 14 гипотез с 10 клиентами: подтвердил основные решения и скорректировал спорные места до реализации.
Самым объёмным стал прототип кликабельных областей и навигации между уровнями блока.
Показать макеты в Figma
Сделал структуру блока видимой
Проблема
Элементы можно было скрывать, но после этого пользователи не понимали, где вернуть их обратно. Для восстановления нужно было подняться на уровень блока, а существующий интерфейс не показывал эту иерархию.
Решение
Я добавил хлебные крошки и отдельный блок с вложенными элементами. Они показывают текущий уровень вложенности и дают понятный путь назад.
Что изменилось
Пользователи стали видеть структуру блока и могли самостоятельно находить скрытые элементы.
Показать макеты в Figma
Вывел ключевой продуктовый сценарий на первый план
Проблема
В продуктовых шаблонах клиенты часто сразу выбирали карточку или отдельный элемент и пропускали уровень блока, где задавались источник товаров и правила динамического вывода.
Решение
Для нового продуктового блока я сделал отдельную крупную точку входа. Пока динамический вывод не настроен, весь блок работает как одна кликабельная область и ведёт пользователя в ключевой сценарий. После настройки открывается редактирование вложенных элементов.
Что изменилось
Сначала пользователь настраивает данные и логику блока, а затем – его визуальные детали.
Показать макеты в Figma
Результаты подробнее
Full Adoption среди крупных клиентов
Что измеряли: количество крупных клиентов, которые полностью перешли на новый конструктор и создают в нём все новые email-рассылки.
- Было: 5 клиентов
- Цель: 10 клиентов
- Результат: 14 клиентов
- Срок: 2 месяца после релиза
Влияние. Количество полностью перешедших клиентов выросло почти в три раза, а цель была превышена на 40 %. Новый конструктор стали использовать не для отдельных экспериментов, а как основной инструмент создания рассылок.
Удовлетворённость новым интерфейсом
Что измеряли: CSAT – оценку удовлетворённости клиентов работой в обновлённом конструкторе.
- Было: 3,4 из 5
- Цель: 4,0 из 5
- Результат: 3,9 из 5
- Срок: 1 месяц после релиза
Влияние. CSAT вырос на 0,5 пункта и почти достиг целевого значения. Повторные интервью после внедрения также показали, что клиенты больше не сталкиваются с основными проблемами навигации и поиска настроек.
Что изменилось для продукта
Изменения решили не одну локальную проблему, а задали правила для дальнейшего развития конструктора. Одинаковые элементы стали вести себя предсказуемо, настройки – легче сканироваться, а путь к вложенным и продуктовым сценариям стал короче. Новые шаблоны теперь можно развивать на основе общей системы, не создавая для каждого отдельную логику.
