Пересборка настроек email-конструктора Mindbox

Результат в цифрах

Цель по Full Adoption превысили на 40%. CSAT вырос на 0,5 пункта и почти достиг целевого значения.

Контекст

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

Бизнес мотивация

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

Поэтому нужно было не исправить несколько отдельных контролов, а сформировать единую и масштабируемую систему настройки блоков.

Мой вклад

• Проанализировал обратную связь клиентов, провёл интервью и бенчмаркинг.
• Разобрал стандартные шаблоны и выявил несогласованность в структуре настроек.
• Выделил типовые элементы и блоки, описал для них состав и порядок контролов.
• Спроектировал группировку настроек и навигацию по вложенности.
• Проверил решения на прототипах: 14 гипотез с 10 клиентами.
• Вместе с продакт-менеджером и архитектором составил дорожную карту поэтапного включения.
• После релиза провёл повторные интервью и сравнил CSAT до и после изменений.

Подробнее про ключевые проблемы и решения

1. Превратил разрозненные шаблоны в систему

Решение

Я выделил повторяющиеся типы элементов и блоков, а затем описал для каждого единую структуру, набор настроек и их последовательность – с учётом частоты и приоритета использования.

Систематизация типовых элементов и настроек

2. Снизил визуальный шум в панели настроек

Решение

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

До / после: группировка панели настроек

Частный кейс: адаптивные размеры кнопки

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

Что я изменил:

• оставил один понятный способ управлять шириной;
• добавил размеры в процентах от контейнера;
• разделил настройки ширины и высоты для десктопа и мобильной версии;
• вместе с разработкой зафиксировал размеры контейнеров и синхронизировал вёрстку блоков с новой логикой.

Новая логика адаптивных размеров кнопки

3. Дал прямой доступ к вложенным элементам

Решение

Я пересобрал логику кликабельных областей: теперь клик по вложенному элементу сразу открывает его настройки независимо от глубины – блок → карточка → кнопка.

Прямая навигация к вложенному элементу

Как проверял решение

Для ключевых сценариев я собирал интерактивные прототипы и проверял, как клиенты справляются с новой навигацией. Всего протестировал 14 гипотез с 10 клиентами: подтвердил основные решения и скорректировал спорные места до реализации.

Самым объёмным стал прототип кликабельных областей и навигации между уровнями блока.

Открыть интерактивный прототип в Figma

После переноса из рабочей Figma часть связей могла сломаться, но прототип передаёт масштаб и основную механику решения.

4. Сделал структуру блока видимой

Решение

Я добавил хлебные крошки и отдельный блок с вложенными элементами. Они показывают текущий уровень вложенности и дают понятный путь назад.

Хлебные крошки и список вложенных элементов

5. Вывел ключевой продуктовый сценарий на первый план

Решение

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

Точка входа в настройку динамического вывода

Результаты подробнее

🥇 Full Adoption среди крупных клиентов

Что измеряли: количество крупных клиентов, которые полностью перешли на новый конструктор и создают в нём все новые email-рассылки.

• Было: 5 клиентов
• Цель: 10 клиентов
• Результат: 14 клиентов
• Срок: 2 месяца после релиза

Влияние. Количество полностью перешедших клиентов выросло почти в три раза, а цель была превышена на 40%. Новый конструктор стали использовать не для отдельных экспериментов, а как основной инструмент создания рассылок.

🥇 Удовлетворённость новым интерфейсом

Что измеряли: CSAT – оценку удовлетворённости клиентов работой в обновлённом конструкторе.

• Было: 3,4 из 5
• Цель: 4,0 из 5
• Результат: 3,9 из 5
• Срок: 1 месяц после релиза

Влияние. CSAT вырос на 0,5 пункта и почти достиг целевого значения. Повторные интервью после внедрения также показали, что клиенты больше не сталкиваются с основными проблемами навигации и поиска настроек.

🥇 Что изменилось для продукта

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