Развитие дизайн-системы и модернизация legacy-финтех продукта
О проекте
Utip Manager — B2B-платформа для брокеров, предназначенная для управления трейдерами, клиентами и торговыми операциями. На момент начала работы продукт существовал много лет и содержал большое количество устаревших интерфейсных решений.
Моя роль
Дизайнер цифровых продуктов
Задачи
- развитие дизайн-системы;
- редизайн существующих компонентов;
- проектирование новых функций;
- поддержка продуктовых гипотез;
- повышение консистентности интерфейсов.
Основные проблемы
- визуально устаревший интерфейс;
- отсутствие единых паттернов;
- разные стили форм и таблиц;
- сложность масштабирования продукта;
Цель
Сделать интерфейс более современным и единообразным без полного переписывания продукта.
Работа с гипотезами
Помимо поддержки продукта я участвовала в тестировании новых гипотез и разработке интерфейсных решений для новых сценариев пользователей. Таких как, внедрение групповых операций, функционал Сплита, внедрения возможности менять профили для клиентов. Эти кейсы будут подробнее разобраны ниже.
Аудит интерфейса
Провела аудит интерфейса. Интерфейс имеет устаревший дизайн, используются разные стили форм, уведомлений и модальных окон.
Ограничения
Платформа разработана на языке Delfi, необходимо было учитывать технические особенности и ограничения в разработке.
- нельзя было менять всё сразу, платформа действующая и необходимо было учитывать то, что пользователи привыкли к определенным паттернам.
- новые компоненты должны были быть совместимы со старыми экранами.
Развитие дизайн-системы
Было создано:
- цветовая система;
- кнопки;
- инпуты;
- селекты;
- чекбоксы;
- таблицы;
- фильтры;
- модальные окна;
- уведомления.
Редизайн компонентов
Регистрационная форма
Было:
- Устаревший визуальный стиль интерфейса, не соответствующий современным продуктовым стандартам.
- Требования к паролю отображались сплошным текстом, из-за чего пользователю было сложно быстро проверить выполнение условий.
- Ошибки отображались только после попытки завершить действие.
- Низкая визуальная иерархия затрудняла восприятие информации.
Стало:
- Интерфейс приведён к единому визуальному стилю продукта.
- Требования к паролю преобразованы в список критериев с пошаговой валидацией.
- Реализована проверка условий в реальном времени во время ввода.
- Выполненные требования отмечаются визуально, что помогает пользователю контролировать процесс заполнения.
- Добавлены состояния ошибок для поля подтверждения пароля.
- Реализована возможность показать или скрыть пароль.
- Добавлена визуальная индикация успешного совпадения паролей.
- Кнопка действия становится доступной только после успешного прохождения всех проверок.
- Улучшена визуальная иерархия и читаемость формы.
.
Снэкбары, уведомления, диалоговые окна
Было:
- Системные сообщения отображались в разных форматах.
- Отсутствовала единая система визуальных состояний.
- Сообщения выглядели устаревшими и визуально перегружали интерфейс.
- Пользователям требовалось больше времени на распознавание важности сообщения.
Стало:
- Разработан единый шаблон модальных окон для всех сценариев взаимодействия.
- Переработана визуальная иерархия: основное действие стало более заметным, вторичные действия получили меньший визуальный вес.
- Информационные сообщения структурированы и разбиты на смысловые блоки для удобства чтения.
- Диалоговые окна стали компактнее и легче воспринимаются визуально.
- Унифицированы отступы, типографика и размеры элементов.
- Уведомления стали заметными, но не отвлекают от выполнения основной задачи.
.
Форма "Добавить котировку"
Было:
- Устаревший визуальный стиль интерфейса
- В поле «Символ» отображался только сокращенный тикер, это создает сложность идентификации.
- Выпадающий список валют не имел функции поиска
Стало:
- В поле выбора валютной пары теперь выводится не только тикер, но и полное понятное название.
- В выпадающий список добавлен встроенный поиск
- Интерфейс приведён к единому визуальному стилю продукта.
- Улучшена визуальная иерархия и читаемость формы.
Новые функции
Внедрение групповых операций и редизайн управления символами
Проблема:
- Поштучное редактирование: Изменение настроек (спреды, свопы, точность и т.д.) было возможно только для одного конкретного символа за раз. Если клиенту нужно было обновить параметры у 20–30 активов, ему приходилось открывать модальное окно для каждого из них отдельно.
- Перегруженное модальное окно: Старая форма изменения символа содержала огромное полотно из более чем 20 полей ввода без какого-либо логического разделения, группировки или визуальной иерархии.
- Отсутствие гибкого контроля: В таблице отсутствовал инструмент множественного выбора, что полностью исключало возможность проведения массовых действий.
Новое решение и оптимизация:
- Массовый выбор через чекбоксы: В первый столбец таблицы внедрены чекбоксы (включая общий чекбокс в шапке для быстрого выделения всех строк). В футере таблицы появился удобный счетчик выбранных элементов, помогающий контролировать объем изменений.
- Новая форма «Изменить символы» с табами: Вместо хаотичного полотна полей была спроектирована модульная форма с вертикальной навигацией по категориям параметров (Базовые параметры, CFD калькуляция, CFD условия). Это позволило разгрузить интерфейс и сделать его чистым.
- Выборочное применение настроек: Рядом с изменяемыми параметрами внутри формы (например, Группа символов, Точность) добавлены управляющие чекбоксы. Клиент может активировать и изменить только те свойства, которые необходимо применить ко всей выбранной группе символов, остальные данные при этом останутся нетронутыми.
- Обновленная визуальная архитектура: Интерфейс переведен на современную, чистую стилистику. Улучшены отступы, убраны «тяжелые» старые градиенты, а кнопки действий получили четкую цветовую иерархию (контрастная синяя кнопка «Изменить» для фокуса на главном действии).
Результат
Работа над редизайном продолжается, постепенно внедряются новые функции по просьбе клиентов и аналитиков. Предстоит еще большая работа, но постепенно дизайн продукта становится более привлекательным, современным. Уже создан единый визуальный язык для продукта, интерфейс стал более понятным и читабельным для клиентов, это отличная основа для дальнейшей модернизации продукта.
.
Профили комиссий
Проблема:
- Нет способа выдать разным сегментам клиентов разные условия по одному и тому же символу. Базовые настройки — общие для всех, а бизнесу нужно градировать условия (VIP, партнёры, специальные тарифы).
- Ручная настройка не масштабируется. У брокера сотни символов и десятки тарифных сегментов — вручную поддерживать соответствие для каждой комбинации нереально и отнимает много времени администратора.
- Высокий риск ошибки. Нет единого источника правды: легко перепутать значение, продублировать не то число, забыть про какой-то из параметров.
- Нет видимости последствий изменений. Прежде чем менять условие, администратор не понимает, скольких счетов это коснётся.
- Невозможно переиспользовать готовый набор условий на других символах — каждый раз вводить всё заново.
Новое решение и оптимизация:
- Отдельная вкладка «Профили комиссий». Вынесла управление профилями в самостоятельный раздел: список именованных профилей (Базовый — системный, плюс кастомные: VIP, Название 1–4) с описанием и колонкой «Количество счетов». Это сразу даёт администратору обзор — сколько профилей существует и насколько широко используется каждый, прежде чем что-то менять или удалять.
- Знакомый паттерн взаимодействия. Управление профилями (создать / изменить / удалить) сделано через правый клик и контекстное меню — по аналогии с уже существующим паттерном работы с символами в этой же панели. Это снижает порог входа: пользователю не нужно учиться новому способу работы, он переносит уже знакомый жест на новую сущность.
.
Сравнение «Базовый vs Профиль» прямо в карточке символа. Ключевое решение — в модалке «Изменить символ», на вкладке CFD условия, добавила две колонки:
- Базовый — всегда read-only, служит референсом: администратор сразу видит, от какого значения отталкивается переопределение;
- Выбранный профиль (например, VIP) — редактируется только в этой колонке.
- Пустое поле в колонке профиля = значение наследуется от базового; заполненное = явное переопределение именно для этого тарифа. Такое визуальное разделение «унаследовано / переопределено» считывается с одного взгляда и снижает риск ошибки, о которой говорилось в проблеме.
- Быстрое создание профиля без смены контекста. Добавила кнопку «Создать профиль» прямо в модалке редактирования символа. Если нужного профиля ещё нет, администратор создаёт его на месте, не прерывая настройку условий и не уходя в отдельный раздел.
- Масштабируемый селектор профиля. Выбор профиля реализован через выпадающий список рядом с «Базовый» — интерфейс не загромождается и работает одинаково хорошо и при 3 профилях, и при 30.
Результат
Функционал сейчас на этапе внедрения, поэтому результаты сформулированы как ожидаемый эффект решения:
- Один и тот же профиль переиспользуется на любом количестве символов — вместо повторного ручного ввода условий для каждого.
- Разделение «унаследовано / переопределено» визуально очевидно, что должно снизить количество ошибок при настройке условий.
- Счётчик «Количество счетов» в реестре профилей даёт видимость влияния изменений до того, как администратор редактирует или удаляет профиль — меньше риска случайно затронуть большое число клиентов.
- Единый паттерн взаимодействия (контекстные меню, модалки) сохраняет консистентность с остальной админкой и не требует отдельного обучения для действующих пользователей.
- Администрирование тарифных сегментов (VIP, партнёры и т.д.) становится системным процессом вместо ручной точечной настройки.
