Спроектировала экран «Портфель» от исследования пользователей и структуры интерфейса до UI и тестирования. При проектировании учитывала разный уровень опыта пользователей и стремилась сделать данные и аналитику понятными и легко считываемыми.
Роль
UX/UI-дизайнер
Исследование и ключевые выводы
Портфель должен быть понятен пользователям с разным уровнем инвестиционного опыта
Изучила аудиторию, пользовательские сценарии и решения конкурентов, чтобы определить важные для инвесторов данные и выстроить понятную работу с портфелем для пользователей с разным уровнем опыта.
01
Новичкам нужен обзор, а опытным нужны детали
Решение
Основные показатели показывать сразу, детали раскрывать по мере необходимости
02
Большой объём данных усложняет восприятие
Решение
Разделить данные на смысловые блоки, использовать визуальную иерархию и графики для быстрого считывания
03
Основные действия должны быть доступны сразу
Решение
Вынести ключевые действия на первый уровень и связать их с дальнейшими сценариями
От общего состояния портфеля к нужному уровню детализации
Детали раскрываются по мере погружения в данные
Пользователь может быстро оценить состояние портфеля, посмотреть динамику доходности и перейти к анализу состава активов. Информация разделена по уровням, чтобы не перегружать основной сценарий.
Быстрый обзор
Баланс и ключевые показатели позволяют оценить состояние портфеля без погружения в детали
Динамика
График помогает оценить изменение стоимости портфеля и его доходность за выбранный период
Состав портфеля
Распределение активов помогает быстро понять, из чего состоит портфель
Разные уровни детализации
Переключение между разделами позволяет постепенно углубляться в данные
Портфель, аналитика и основные действия на одном экране
На главном экране собрала основную информацию о портфеле и ключевые действия. Пользователь может быстро оценить его состояние, пополнить или вывести средства и перейти к аналитике.
Состояние портфеля
Баланс и динамику стоимости вынесла на первый уровень, чтобы текущее состояние портфеля считывалось без перехода к аналитике
Быстрые действия
Пополнение, вывод средств и аналитику разместила рядом с балансом, сохранив основные действия внутри главного сценария
Структура активов
Распределение активов показала сразу после общей суммы, чтобы состав портфеля можно было оценить без дополнительного перехода к деталям
Ненавязчивые рекомендации
Доступ к советам аналитиков добавила в виде закрываемой плашки, чтобы предложить дополнительный сценарий, не прерывая основную работу с портфелем
Развитие пользователя
Цели, обучение и AI-помощника добавила на основной экран как дополнительный уровень поддержки для пользователей, которым важно не только отслеживать портфель, но и лучше понимать дальнейшие действия
Простое пополнение и вывод средств
Пополнение счёта и вывод средств спроектировала как короткие последовательные сценарии. Пользователь вводит сумму, проверяет данные и получает понятное подтверждение результата без лишних промежуточных экранов.
Тестирование на пользователях
Прототип помог найти проблемные места до финальной проработки интерфейса
Провела коридорное тестирование прототипа на нескольких пользователях с разным опытом инвестирования. Наблюдала за прохождением основных сценариев, фиксировала затруднения и уточняла решения перед финальной проработкой UI.
01
Быстрый выбор суммы
При пополнении пользователям было неудобно каждый раз вводить типовую сумму вручную
Изменение:
Добавила быстрый выбор популярных сумм с возможностью ввести своё значение
02
Аналитика на первом уровне
Пользователи искали подробную информацию о состоянии портфеля непосредственно на главном экране
Изменение:
Добавила аналитику в блок быстрых действий, сократив путь к данным
03
Доступ к истории операций
После завершения перевода некоторым пользователям хотелось сразу перейти к истории и проверить выполненную операцию
Изменение:
Добавила на экран подтверждения кнопку для быстрого перехода к истории операций
Единая система компонентов
Новые экраны можно собирать из готовых элементов
Собрала основные элементы интерфейса в систему: цвета, типографику, сетку, кнопки, поля, навигацию, карточки и другие повторяющиеся компоненты. Это помогло сохранить единый подход к оформлению и поведению элементов на разных экранах.
Результат проектирования
Главное о портфеле доступно сразу, подробности по мере необходимости
В результате объединила на главном экране состояние портфеля, основные действия и переход к аналитике. Пользователь может быстро оценить главное и при необходимости перейти к подробным данным.
Понятная иерархия
Баланс, динамика и состав активов доступны сразу и помогают быстро оценить состояние портфеля
Доступ к деталям
Подробная аналитика доступна отдельно и позволяет глубже изучить состояние и состав портфеля
Основные действия рядом
Пополнение, вывод средств и аналитика доступны с главного экрана без лишних переходов