Лучший сервис — это незаметный сервис: как ОТП Банк превращает дизайн в системный процесс

Редизайн — это не только про внешний вид. Это про архитектуру продукта, пользовательскую логику и устойчивость решений.

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

От редизайна приложения к продуктовой системе

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

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

С этого момента команда сфокусировалась на двух аспектах:

• Лёгкость восприятия: сделать интерфейс интуитивным для пользователей без технической подготовки.
• Высокая нагрузка: обеспечить устойчивость под высокой нагрузкой. Бизнес-банкинг — это десятки операций в секунду, интеграции, сложные сценарии и постоянная работа с массивами данных.

Сначала рамки, потом свобода

На этапе проектирования важно было сохранить фокус и не потеряться в гипотезах. Для этого команда задала себе чёткие рамки — не как ограничения, а как систему координат, в которой проще выстраивать дизайн. Эти рамки разделили на два уровня:

Эмоциональный. Как мы хотим, чтобы нас воспринимали:

• Надёжность — через проработку всех возможных путей развития сценария
• Скорость — через сокращение пользовательских шагов (CJ)
• Прозрачность — через понятную коммуникацию с пользователем

Эстетический. Что влияет на восприятие интерфейса:

• Много воздуха, чтобы компенсировать высокую нагрузку
• Простота — даже для тех, кто не взаимодействовал с кабинетами для юридических  лиц ранее
• Привычные паттерны — учитывается опыт работы с 1С, CRM и другими системами
• Привычный повседневный UX — интернет-банк как продолжение сервисов, которые уже понятны
• Забота — интерфейс помогает совершить нужное действие
• Доступность — основные функции должны быть на виду
• Адаптивность — на любых экранах, от монитора до смартфона
• Визуальный стиль — сдержанный, корпоративный, но актуальный

Визуальный язык: как собирается иконка

Каждая иконка в интерфейсе — не просто пиксель, а решение. В ОТП Банке к ним подошли как к полноценной системе со своими правилами, логикой и жизненным циклом.

1. Метафора: Иконка должна считываться моментально. Если пользователь задумывается над значением — значит, решение не работает. Поэтому команда опирается на знакомые визуальные образы и избегает излишней креативности там, где нужна предсказуемость.

2. Референсы: Перед началом работы дизайнеры собирают визуальные референсы из открытых библиотек и продуктов с похожей логикой. Это помогает на этапе выбора метафоры, но никогда не превращается в копирование, каждый образ адаптируется под стиль продукта.

3. Стиль: У стиля два слоя:

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

4. Размеры и масштабирование: В паке используются разные размеры — 12, 16, 24 и выше. Каждый размер имеет свою логику построения: чем больше иконка, тем толще линии и больше радиусы скруглений.

5. Рамки и сетка: Иконки проектируются внутри единой сетки, она помогает сохранить визуальное единство. Но если конкретная иконка чуть выходит за границы, а в паке смотрится лучше — такое решение допустимо.

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

7. Нейминг: Названия — по изображённому объекту, а не по сценарию использования. Это упрощает поиск в библиотеке и даёт гибкость при переиспользовании.

8. Ассоциации и ключевые слова: Если образ неочевиден, в описание добавляют ключевые слова и альтернативные названия. Так пользователь быстрее находит нужное в паке.

9. Нейминг векторов внутри иконки: Чтобы при замене иконки в макете сохранялись цвета и стили, внутри всех компонентов используются одинаковые названия слоёв.

Редизайн, MVP и ребрендинг — всё сразу

Запуск MVP совпал с началом ребрендинга: в банке утвердили новую палитру, гайдлайны и визуальный стиль. Классический зелёный сменился на лайм, и нужно было адаптировать весь интерфейс под обновлённую айдентику.

На всё у команды был один месяц. Мы пересобрала палитру: приглушила основные цвета, оставив лайм как акцент. Изменения провели через отдельную ветку, вручную проверили и обновили около 4000 макетов. Затем передача в разработку, ревью, доработка.

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