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