Анатомия редизайна B2B‑продукта: опыт BusinessPad

Когда пользователь открывает B2B‑продукт и вместо напряжения чувствует спокойствие, это результат точного инжиниринга, а не удачного стечения обстоятельств. За ощущением «я здесь как дома» стоят конкретные нейрохимические процессы. Наша задача как дизайнеров — сделать так, чтобы они корректно запускались при взаимодействии с продуктом. В этой статье я расскажу, как мы решали эту задачу в BusinessPad.

Зачем системе, которая работает, полная пересборка

Если описывать ситуацию на языке нейрохимии, мы зафиксировали три ключевых гормональных процесса.

Дофамин истощился. Дофамин отвечает не за удовольствие, а за предвкушение награды. Это гормон «вот‑вот». Именно он заставляет нас кликать на уведомление или без причины открывать приложение. В старом интерфейсе этот механизм перестал работать: система не предлагала позитивного подкрепления в моменте ожидания. В старой версии BP почти что не было ни прогресс‑баров, ни подсветки элементов и микроанимации, ни визуализации успеха. Со временем мозг пользователя адаптировался к однообразию.

Окситоцин дал трещину. Окситоцин — гормон доверия и безопасности. Он выделяется, когда продукт для пользователя предсказуем и последователен. Если интерфейс ведёт себя как неживая и ненадёжная машина, а не как понятный партнер, то доверие рушится. Мы видели, что пользователи боялись нажать не на ту кнопку, терялись в разделах и избегали новых функций. В продукте не было уютных, округлых форм и визуального языка, который бы снижал тревожность.

Эндорфин заблокировался. Эндорфин в дизайне — это момент осознания «как легко». Он выделяется, когда задача решается без особых усилий. В старом BusinessPad накапливалось «трение» от лишних шагов и неочевидных переходов. Каждый раз это создавало микростресс, который незаметно снижал уровень лояльности. Пользователи не жаловались, они просто стали искать обходные пути через Excel и мессенджеры.

Этапы трансформации: от атомов к организму

Мы пошли снизу вверх. Сначала зафиксировали набор атомов: цвета, типографику из девяти уровней, сетку отступов и восемь градаций теней. Глубина тени стала функциональным атрибутом — чем важнее элемент, тем сильнее он визуально приподнят над плоскостью. Так, например, карточка, над которой работает пользователь, отбрасывает более заметную тень, чем пассивная строка таблицы, и мгновенно управляет фокусом внимания.

Затем из атомов собрали молекулы: кнопки, поля ввода, статусные метки, переключатели. И только потом — сложные организмы: таблицы, боковые панели, модальные окна. Параллельно мы описали библиотеку типовых шаблонов экранов:

• список записей;
• детальная карточка объекта;
• конфигурация;
• сайдпейдж (модальное интерфейсное окно, которое появляется поверх основной страницы, выезжая с правой или с левой стороны экрана);
• оверлей (интерфейсный слой, который отображается поверх основного контента страницы на весь экран и временно становится главным фокусом взаимодействия пользователя);
• онбординг.

Теперь каждый шаблон существует в двух слоях — визуальном (дизайн) и техническом (спецификация для фронтенда). Это устранило разрыв между проектированием и разработкой. Дизайнер перестал объяснять каждую деталь, разработчик перестал переспрашивать по несколько раз. Сборка нового экрана из готовых компонентов сократилась с нескольких дней до нескольких часов. Это ускорило темпы разработки новых функциональностей BusinessPad.

Весь процесс редизайна намеренно шёл медленно, но продуманно. Мы отрисовывали разделы, создавали интерактивный прототип, обкатывали его на тестовой группе и только после этого шли дальше. Принцип «простое — сразу, сложное — в сторону» стал базовым.

Теперь на главном экране финансов человек видит ключевые метрики и основные действия финансовой операцией. Глубокие настройки логирования, конфигурация переменных процесса или дополнительные панели открываются только в момент реальной потребности — это классическое прогрессивное раскрытие. Благодаря этому мозг пользователя не перегружается, ведь человек не видит всей сложности продукта сразу, а значит, выброс кортизола в его крови блокируется ещё на этапе входа в задачу.

Онбординг как продукт и лекарство от тревоги

Отдельного упоминания заслуживает маскот системы Фенечка — персонаж, появившийся в середине проекта. Он не был запланирован изначально. В ходе юзабилити‑тестов мы зафиксировали специфическую паузу: на полностью интуитивных новых экранах пользователи замирали на несколько секунд перед первым кликом. Они не пытались расшифровать интерфейс, они боялись ошибиться и что‑то сломать.

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

Как редизайн влиял на пользователя: три фазы принятия

1. Шок (3–7 дней). Кратковременное падение всех трёх показателей. Мозг фиксирует нарушение привычных паттернов, возникает рефлекторное желание «вернуть как было».
2. Адаптация (1–3 недели). Мозг строит новые нейронные связи. Возвращается дофаминовая реакция на новизну.
3. Присвоение (3–6 недель). Интерфейс становится «своим». Пользователь перестаёт помнить, как работал раньше, и становится эффективным в новой системе.

Цель грамотного редизайна — не взрывной пик эмоций, а плавное и необратимое повышение базового уровня комфорта.

Как делать редизайн правильно: советы от команды BusinessPad

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

Система — до экранов. Без компонентной базы каждый экран превращается в отдельную войну ресурсов.

Проектируйте эмоции, а не только функции. Маскот — не иллюстрация, а инструмент снятия тревоги. Если продукт сложный, дайте пользователю союзника.

Смотрите на рутинные боли. Сайдпанель, позволяющая фильтровать данные в реальном времени без клика и обновления, родилась не из задачи «сделать красиво», а из необходимости сэкономить 15 минут операционной работы.

Дайте мозгу пользователя микропаузу. Даже 4 секунды имеют значение. Наши всплывающие уведомления живут ровно столько, сколько нужно для фиксации успеха, а после исчезают. Пользователю не нужно принимать решение о закрытии окна — он просто получает эндорфиновый сигнал «зафиксировано» и продолжает работу.

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

Когда менеджер фильтрует сложную таблицу без единого лишнего клика — это управляемый эндорфин. Когда дружелюбный маскот встречает его на пороге незнакомого раздела — это окситоцин. Когда прогресс‑бар показывает, сколько осталось времени до завершения задачи — это дофамин. Способность управлять этими тремя гормонами и отличает зрелый продуктовый дизайн.