Редизайн — это не только про внешний вид. Это про архитектуру продукта, пользовательскую логику и устойчивость решений.
В ОТП Банке за последние два года дизайн перестал быть обслуживающей функцией и стал полноценным инструментом роста. Рассказываем, как устроен этот процесс: от внутренних стандартов до редизайна интернет-банка и подхода к визуальному языку.
От редизайна приложения к продуктовой системе Всё началось с задачи обновить веб-интерфейс интернет-банка. Цель — сделать сценарии проще, интерфейс современнее, а поведение пользователя предсказуемым. Однако точечного обновления стало недостаточно, и именно это послужило толчком к системным изменениям.
Команда провела серию исследований: изучала сценарии клиентов, ошибки в навигации, отклик на конкретные решения. Так появился подход, где все экраны и сценарии выстраиваются по единому принципу, с опорой на поведение пользователя и реальную бизнес-логику.
С этого момента команда сфокусировалась на двух аспектах:
Лёгкость восприятия: сделать интерфейс интуитивным для пользователей без технической подготовки.Высокая нагрузка: обеспечить устойчивость под высокой нагрузкой. Бизнес-банкинг — это десятки операций в секунду, интеграции, сложные сценарии и постоянная работа с массивами данных.Сначала рамки, потом свобода На этапе проектирования важно было сохранить фокус и не потеряться в гипотезах. Для этого команда задала себе чёткие рамки — не как ограничения, а как систему координат, в которой проще выстраивать дизайн. Эти рамки разделили на два уровня:
Эмоциональный. Как мы хотим, чтобы нас воспринимали:
Надёжность — через проработку всех возможных путей развития сценария Скорость — через сокращение пользовательских шагов (CJ) Прозрачность — через понятную коммуникацию с пользователем Эстетический. Что влияет на восприятие интерфейса:
Много воздуха, чтобы компенсировать высокую нагрузку Простота — даже для тех, кто не взаимодействовал с кабинетами для юридических лиц ранее Привычные паттерны — учитывается опыт работы с 1С, CRM и другими системами Привычный повседневный UX — интернет-банк как продолжение сервисов, которые уже понятны Забота — интерфейс помогает совершить нужное действие Доступность — основные функции должны быть на виду Адаптивность — на любых экранах, от монитора до смартфона Визуальный стиль — сдержанный, корпоративный, но актуальный Визуальный язык: как собирается иконка Каждая иконка в интерфейсе — не просто пиксель, а решение. В ОТП Банке к ним подошли как к полноценной системе со своими правилами, логикой и жизненным циклом.
1. Метафора: Иконка должна считываться моментально. Если пользователь задумывается над значением — значит, решение не работает. Поэтому команда опирается на знакомые визуальные образы и избегает излишней креативности там, где нужна предсказуемость.
2. Референсы: Перед началом работы дизайнеры собирают визуальные референсы из открытых библиотек и продуктов с похожей логикой. Это помогает на этапе выбора метафоры, но никогда не превращается в копирование, каждый образ адаптируется под стиль продукта.
Эмоциональный — иконки должны соответствовать настроению интерфейса, поддерживать общий тон и эстетику бренда. Технический — единая толщина линий, скругления, отказ от избыточной детализации. Чем проще иконка, тем быстрее она считывается. 4. Размеры и масштабирование: В паке используются разные размеры — 12, 16, 24 и выше. Каждый размер имеет свою логику построения: чем больше иконка, тем толще линии и больше радиусы скруглений.
5. Рамки и сетка: Иконки проектируются внутри единой сетки, она помогает сохранить визуальное единство. Но если конкретная иконка чуть выходит за границы, а в паке смотрится лучше — такое решение допустимо.
6. Оптическое выравнивание: Формально всё может быть по центру, но визуально — нет. Поэтому финальное выравнивание всегда проверяется вручную.
7. Нейминг: Названия — по изображённому объекту, а не по сценарию использования. Это упрощает поиск в библиотеке и даёт гибкость при переиспользовании.
8. Ассоциации и ключевые слова: Если образ неочевиден, в описание добавляют ключевые слова и альтернативные названия. Так пользователь быстрее находит нужное в паке.
9. Нейминг векторов внутри иконки: Чтобы при замене иконки в макете сохранялись цвета и стили, внутри всех компонентов используются одинаковые названия слоёв.
Редизайн, MVP и ребрендинг — всё сразу Запуск MVP совпал с началом ребрендинга: в банке утвердили новую палитру, гайдлайны и визуальный стиль. Классический зелёный сменился на лайм, и нужно было адаптировать весь интерфейс под обновлённую айдентику.
На всё у команды был один месяц. Мы пересобрала палитру: приглушила основные цвета, оставив лайм как акцент. Изменения провели через отдельную ветку, вручную проверили и обновили около 4000 макетов. Затем передача в разработку, ревью, доработка.
Процесс оказался стрессовым, но показал, что система выдерживает изменения. А это и есть главный критерий устойчивого дизайна, когда можно быстро подстроиться под новое, не теряя смысла.
Комментарии