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