Платформа финансовой аналитики Skybonds
Скайбондс — это платформа финансовой аналитики и управления портфелем ценных бумаг, которая используется внутри корпорации Совкомбанк. Я работал над интерфейсом Скайбондс с ноября 2020 по февраль 2023 года и предложил много классных решений.
Процесс работы:
Проблема #1
Разрозненная структура информации
Информация о ценных бумагах в Skybonds была представлена в разрозненном виде. Виджет и страница облигации не имели четкой структуры, представляли из себя длинную страницу с десятками параметрами. Страницу приходилось постоянно прокручивать, чтобы найти нужные данные.
UX-исследование
Как клиенты используют Skybonds?
Параметры, разбросанные по всей системе, необходимо было осмысленно сгруппировать и структурировать. Для этого потребовалось понять, как именно пользователи используют систему.
Skybonds — закрытая платформа с ограниченным числом клиентов, поэтому была возможность провести личные интервью с пользователями.
Результаты глубинного интервью 10 пользователей были зафиксированы в виде протоколов, на основе которых создана выжимка основных Findings.
Интервью выявили 3 типа пользователей системы, которые были оформлены в виде Personas.
Разделы и данные были сопоставлены с персонами. Оказалось, что структуру сервиса можно распределить по логическим разделам, которые соответствуют персонам и их ролям.
Страница облигации до редизайна занимала 40 000 пикселей в высоту:
Новая страница разбита на две части. Слева — статическая информация о выпуске облигации. Справа — рыночные данные.
UX Research показал, что пользователи делятся по ролям. Трейдерам нужны рыночные данные, а бухгалтерам — отчет о транзакциях. Параметры бумаги разделены по вкладкам в соответствии с ролями.
Проблема #2
Плохая читабельность таблиц
Основа Skybonds — сложные финансовые таблицы. До редизайна в таблицах использовалось неправильное выравнивание, из-за чего между столбцами образовывались лишние расстояния.
В результате редизайна компактность таблиц выросла в несколько раз.
В течение 6 месяцев велась работа над новым дизайн-языком для финансовых таблиц. Для Skybonds были разработаны уникальные таблицы, которые обладают невероятной плотностью данных, сохраняют читабельность в любых условиях и позволяют отображать все виды информации.
Наработки изложены в статье “Design of complex tables” и опубликованы в американском журнале UX Collective.
UX-исследование
Какой список читается быстрее?
В системе Skybonds списки выравнивались по ширине блока, что приводило к разрывам между столбцами. Было предложено выровнять оба столбца по левому краю. Но что если это приведет к ухудшению читабельности?
Было решено провести UX Research и сравнить скорость считывания списков. Сравнивались два варианта: текущий Variant A и предлагаемый Variant B.
Методология
– 7 заданий на нахождение значения в списке
– 20 респондентов, не пользующихся системой
– 2 группы респондентов, каждой группе выдан один из вариантов
– Измеряется время ответа на каждый вопрос
– Считается среднее время прохождения теста для каждой группы
Результаты измерений были сведены в среднее значение.
Исследование показало, что вариант B отличается от варианта A всего на 0.58%, то есть в пределах погрешности. Дизайн был принят к реализации.
Проблема #3
Низкая четкость графиков
Биржевые графики — одна из центральных функций Skybonds. До редизайна графики в системе было невероятно сложно читать. Линии пересекались с лейблами и создавали шум. Сетка была слишком контрастной и затрудняла чтение линий. Ось доходности была размещена слева, что нетипично для финансовых графиков.
UX-исследование
Конкурентный анализ финансовых графиков
Для решения задачи по редизайну графиков был проведен Competitive Analysis. Два главных финансовых инструмента — Bloomberg Terminal и Trading View — были изучены на предмет техник построения графиков.
Помимо общей стилистики графиков, в Bloomberg Terminal была обнаружена сложная двухсекционная шкала дат, которая позволяла удобно отслеживать промежутки. Клиент согласился на такую шкалу в Skybonds.
Scatter Plot встречается крайне редко. Для сравнительного анализа использовался сервис Tableau и руководство по инфографике Claus Wilke.
На основе проведенного competitive analysis был предложен новый дизайн графиков:
– Убраны мусорные надписи, мешающие читать линии
– Сетка сделана менее контрастной
– Подобраны более яркие цвета линий
– Добавлена градиентная тень под основным графиком
– Реализована двухсекционная шкала дат
– Вертикальная ось размещена справа
Для системы Skybonds разработаны как большие полноразмерные графики, так и миниатюрные графики для виджетов.
Аналогичная работа проделана для Scatter Plot:
– Фигуры сделаны полупрозрачными, что повышает читабельность
– Сетка сделана менее контрастной
– Разработана система кодирования средних линий
По мотивам работы написаны 3 исследовательские статьи про дизайн графиков, которые опубликованы в журнале UX Collective.
Проблема #4
Отсутствие универсальной дизайн-системы
Дизайн-система Skybonds страдала от неконсистентности элементной базы.
В дизайн-системе не было достаточных режимов. Например, dropdowns могли содержать только текст, хотя часто требуется иконка и счетчик в этом компоненте.
Кроме того, были спутаны состояния компонентов и сами компоненты. Например, синяя Primary button и нажатое состояние белой кнопки Secondary button реализовывались одним и тем же компонентом.
Был проведен рефакторинг дизайн-системы. Добавлены новые компоненты, а существующие структированы по состояниям и поведению.
Компоненты реализованы в качестве Variants, представленных в Figma как раз в начале работ по рефакторингу.
Запрос пользователей #1
Нарисовать бенчмаркинг
Задача от основного пользователя системы: разработать набор инструментов для бенчмаркинга портфеля облигаций. Требования:
– Вывод кривых Total return для портфеля и бенчмарка Bloomberg
– Построение спреда между кривыми
– Возможность исключения бумаг портфеля из кривой Total return
– Параметры фильтрации бумаг сравниваемых портфелей
– Табличный вид, отражающий вклад каждой бумаги в общий рост портфеля
Запрос пользователей #2
Предложить новый интерфейс
Задача: предолжить новый дизайн интерфейса системы.
– Привлекательный дизайн в современном стиле
– Упрощенная панель фильтрации
– Статус-бар с набором дополнительных команд
– Использование всех наработок ранее выполненных задач