Привет, Хабр! Меня зовут Дима Тан, я лид дизайнер продуктовой фабрики и цифровых каналов и инструментов обслуживания клиентов корпоративного и малого бизнеса. Хочу рассказать вам о том, как мы за 9 месяцев собрали интернет-банк, и что с ним дальше стало.

Что такое ОТП Банк?

ОТП Банк – компания со стратегией развития универсального банка. Это значит – каждый может найти удобное решение для себя и своего бизнеса. Входим в международную OTP Group, на российском рынке уже 30 лет. С нами – 2+ млн клиентов и 8 тысяч сотрудников по всей стране.

В этой статье постараюсь ответить на вопрос как сделать качественный продукт, который несется как гоночный болид, и не разваливается по дороге.

Трек №1: Интро

«Лучший сервис - это незаметный сервис. Современный мир приучил нас к возможности выполнения рутинных действий с минимальным усилием и в кратчайшие сроки - ожидание такси дольше 5 минут уже оставляет негативный фон. И нет причин, по которым эти привычки не распространялись бы и на сервисы для бизнеса, как малого, так и корпоративного.
В 2023 году команда приняла этот вызов и приступила к созданию нового цифрового канала обслуживания, который должен сочетать сложный функционал с простым и удобным интерфейсом. Помимо соответствия высоким требованиям пользователей, важно также обеспечить надежность, скорость работы и удобство на всех этапах взаимодействия.
Результатом стала полная пересборка продуктового ряда и клиентского опыта» - Руководитель продуктовой фабрики и цифровых каналов и инструментов обслуживания клиентов корпоративного и малого бизнеса Виталий Сытников

Теперь давайте подробнее рассмотрим, какие вводные данные мы учитывали при проектировании, какие проблемы решали и как смогли достичь гармонии между функциональностью и удобством, на бешеной скорости.

Трек №2: Понять проблемы старой системы

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

Основные задачи звучали так:

Не растерять базовый функционал
У нас было много обратной связи от пользователей, так как старая система существовала уже очень много лет. Обработав ее всю, мы решили, что для старта возьмем только те боли, которые задевают базовый функционал (а таких было много). Было очень важно мигрировать пользователей, не растеряв предложенные возможности в новом интерфейсе.
Привести CJ в порядок
Конечно одной из основных проблем было то, что старая система морально устарела и СJ был так же сформирован с учетом кучи технологических ограничений которые, были на момент разработки.

Сфокусировались мы на двух вещах:

Легкость восприятия
Несмотря на сложный функционал, интерфейс должен быть простым и понятным для пользователей, не имеющих технического фона, и в то же время мощным для тех, кто ежедневно работает с банковскими продуктами.
Высокая нагрузка
Банкинг для бизнеса предполагает обработку больших объемов данных, выполнение множества операций в реальном времени, интеграцию с другими системами и службами.

Трек №3: Ну что, начнем проектирование?

Тут мы подбираемся к самому важному, как не растерять скорость, не потерять суть концепции под натиском бизнеса, сохранить консистентность?

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

Давайте расскажу про рамки. Мы выдели два уровня, чтобы нам было проще транслировать ценности которые нам важны в концепции.

Эмоциональный, это то как мы хотим, чтобы нас видели:
- Надежность / в сервисе (проработка всех возможных путей развития сценария)
- Скорость / в решении задач (работа над сокращением СJ)
- Прозрачность / в коммуникации (говорить с пользователями как с людьми)
Эстетический, через:
- Много воздуха - у нас высоконагруженный интерфейс и мы хотим это компенсировать
- Простота - новый интерфейс должен быть понятен даже тем пользователям, которые не взаимодействовали с кабинетами для юр лиц ранее
- Привычные паттерны - учитываем специфичный опыт работы целевой аудитории с высоконагруженными системами: 1С, CRM, и т. д
- Добавление нового из сервисов повседневной жизни - делаем так, как удобно пользователям, интернет-банк — это продолжение привычных сервисов
- Проявленную заботу - правильно расставленные визуальные акценты на страницах помогают совершать нужные действия. Всю рутинную работу банк должен делать за пользователя
- Доступность - все ключевые функции должны быть доступны с главного экрана
- Респонсив - новый интерфейс хорошо выглядит на компьютерах с разным разрешением. Также на мобильных устройствах
- Стиль - оформление должно быть сдержанным и корпоративным, с использованием фирменных цветов, шрифтов и логотипов. Но также важно, чтобы интерфейс был визуально привлекательным и современным

Трек №4: Нам нужна своя ARM

Вопрос стоял с пометкой "срочно". У нас было два пути, первый - собрать отдельную дизайн-систему, под нее собрать команду, но этот вариант не попадал под тег "срочно". По этому был разработан второй вариант - не делать первый :) Мы решили собирать админку на существующей дизайн-системе и у нас все получилось. Важно было собрать интерфейс, который стилистически будет един как для внешнего, так и для внутреннего пользователя.

Трек №5: А потом мы все перекрасили

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

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

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

Сработавший план выглядит так:

Собрали несколько концептов и обсудили внутри трайба.
Выбранный вариант ушел на согласование в маркетинг.
Мы собрали новую палитру цветов, использовали основные цвета, но немного их приглушили.
Через ветку в фигме завели новую палитру.
Пошли в дизайн-систему и начали подгонять, так как заменить все и оставить не вышло, некоторые цвета поменялись местами.
После всей дизайн-командой разобрали макеты и пошли все ручками проверять и обновлять. Макетов было около 4000 и хорошо, что большая часть сразу была на компонентах.
Отдали фронтам.
Через неделю провели дизайн-ревью и опять отдали на доработку.

Трек №5: Аутро

И, конечно, какие супергерои без костюмов - разработали мерч для всей нашей команды, создающей продукты и сервисы для клиентов корпоративного и малого бизнеса

Что может быть лучше черной вышивки на черной ткани

Самое важное

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

Как проектировать дизайн на космической скорости?