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