#PropTrading #FinancialTech #Research #Teamwork #WEB #B2B #Prototyping
- Разрозненные данные. Трейдерам сложно собрать полную картину по сделкам, PnL и лимитам — информацию приходится искать вручную, в разных источниках или через поддержку.
- Перегруженные интерфейсы. Устаревший UI мешает навигации: термины и структура страниц сбивают с толку.
- Нет единого центра управления. Пользователям не хватает места, где можно видеть всю активность, подключать аккаунты и отслеживать KPI.
- Сложность для новичков и ограничения для опытных. Новичкам непонятно, с чего начать, а продвинутым не хватает гибкости и глубины данных.
Пользовательские проблемы
Дизайн пользовательского портала для трейдеров в проптрейдинговой компании.
Контекст
С сентября 2024 года я работаю в продуктовой команде, которая разрабатывает несколько шаблонов интерфейсов для проптрейдинговой платформы Axcera.
Моей задачей стало придумать, как сделать портал трейдера простым, понятным и быстрым, без визуального шума и лишних кликов.
Я проектирую интерфейс с фокусом на пользовательский опыт: от анализа сценариев и структуры до визуального оформления и финальной реализации, взаимодействуя с продактами и разработкой.
Параллельно участвую в выстраивании дизайн-процессов:
— сформировала мастер-файл со структурой всех экранов и навигацией,
— участвую в дизайн-ревью с продуктом и разработкой, — создала и поддерживаю единый UI-kit, чтобы все дизайнеры работали с актуальными компонентами.
Это повысило прозрачность в работе, ускорило handoff и помогло команде быстрее масштабировать решения.
Моей задачей стало придумать, как сделать портал трейдера простым, понятным и быстрым, без визуального шума и лишних кликов.
Я проектирую интерфейс с фокусом на пользовательский опыт: от анализа сценариев и структуры до визуального оформления и финальной реализации, взаимодействуя с продактами и разработкой.
Параллельно участвую в выстраивании дизайн-процессов:
— сформировала мастер-файл со структурой всех экранов и навигацией,
— участвую в дизайн-ревью с продуктом и разработкой, — создала и поддерживаю единый UI-kit, чтобы все дизайнеры работали с актуальными компонентами.
Это повысило прозрачность в работе, ускорило handoff и помогло команде быстрее масштабировать решения.
От инсайтов к решению
На основе собранных инсайтов, анализа пользовательских сценариев и бизнес-целей мы сформировали структуру будущего портала и приступили к проектированию интерфейса. Задача заключалась не просто в создании современного визуального решения: важно было продумать удобную навигацию, логичную подачу данных и адаптивность шаблона под разные уровни пользователей.
Ниже ключевые экраны и элементы пользовательского портала, отражающие результаты работы.
Ниже ключевые экраны и элементы пользовательского портала, отражающие результаты работы.
Отсутствие типовых шаблонов порталов. У платформы не было единого подхода к отображению данных и пользовательскому флоу. Каждый интерфейс собирался с нуля, без возможности масштабировать или переиспользовать решения.
Устаревший и неудобный интерфейс. Дизайн существующих решений не соответствовал современным стандартам: перегруженные экраны, непоследовательная структура и слабая визуальная иерархия затрудняли работу пользователей и вызывали недоверие к продукту.
Медленный онбординг новых пользователей. Из-за отсутствия единого и понятного портала процесс подключения и адаптации новых трейдеров занимал до 5 рабочих дней. Это приводило к потере времени и снижению конверсии на старте.
Поддержка кастомных решений сложна и ресурсоёмка. У разных команд трейдеров собственные шаблоны отчётности и взаимодействия с платформой. Любые обновления требуют ручных доработок под каждый сценарий, что увеличивает затраты и риски.
Устаревший и неудобный интерфейс. Дизайн существующих решений не соответствовал современным стандартам: перегруженные экраны, непоследовательная структура и слабая визуальная иерархия затрудняли работу пользователей и вызывали недоверие к продукту.
Медленный онбординг новых пользователей. Из-за отсутствия единого и понятного портала процесс подключения и адаптации новых трейдеров занимал до 5 рабочих дней. Это приводило к потере времени и снижению конверсии на старте.
Поддержка кастомных решений сложна и ресурсоёмка. У разных команд трейдеров собственные шаблоны отчётности и взаимодействия с платформой. Любые обновления требуют ручных доработок под каждый сценарий, что увеличивает затраты и риски.
Бизнес-проблемы
Интерфейс дашборда показывает трейдеру основные метрики по счёту: баланс, прибыль, эквити и динамику торговли.
Продуманная структура и визуализация позволяют быстро оценить текущее состояние, проанализировать изменения за период и оперативно перейти к управлению счётами. Особое внимание уделено читаемости данных и акценту на ключевых точках принятия решений.
Продуманная структура и визуализация позволяют быстро оценить текущее состояние, проанализировать изменения за период и оперативно перейти к управлению счётами. Особое внимание уделено читаемости данных и акценту на ключевых точках принятия решений.
Основной дашборд: вся ключевая информация на одном экране
Цели и задачи
Основная цель проекта — создать понятный, современный и гибкий интерфейс пользовательского портала для трейдеров, который позволит быстрее принимать решения, упростит навигацию и повысит доверие к продукту.
Для этого мы сфокусировались на следующих задачах:
Для этого мы сфокусировались на следующих задачах:
- Сократить время трейдера на получение ключевой информации и управление счётом.
- Повысить доверие пользователей к платформе за счёт консистентного и современного UX.
- Помочь пользователям быстро ориентироваться в интерфейсе: отслеживать финансовые показатели, подключать инструменты и управлять активностью в рамках проп-программы.
- Уменьшить когнитивную нагрузку: убрать лишние детали, оставить только нужную информацию и логично выстроить сценарии.
- Сделать шаблон гибким и адаптивным: удобным как для новичков, так и для опытных трейдеров.
- Обеспечить прозрачную визуализацию ключевых метрик и точек принятия решений.
- Упростить сопровождение и масштабирование решения внутри компании: заложить основу для единой дизайн-системы, которую можно применять в других продуктах платформы.
Улучшение навигации
-30%
+17%
по основным сценариям
времени на разработку с дизайн-системой
к активации после редизайна онбординга
Создание нового шаблона пользовательского портала для трейдеров с нуля в несколько этапов:
- Сначала проанализировали потребности пользователей, сценарии и требования бизнеса, чтобы сформировать структуру и приоритетные разделы портала.
- Затем спроектировали интерфейс: от базовой навигации до логики отображения данных, управления аналитикой и настройками.
- Параллельно заложили основу дизайн-системы для масштабирования шаблонов на другие продукты платформы.
Решение
Раздел с метриками даёт трейдеру полное представление о его результатах: балансе, профите, лимитах потерь, соотношении профита к убытку и других ключевых показателях. Удобная структура, графики и визуализация помогают вовремя принять правильные решения, проанализировать динамику торговли и скорректировать стратегию для повышения прибыльности.
Таким способом платформа даёт преимущества в управлении результатом на каждом шаге.
Таким способом платформа даёт преимущества в управлении результатом на каждом шаге.
Основной экран с метриками: всё для точного контроля
Понятный онбординг - уверенный старт без лишнего стресса
Покупка аккаунта: всё под контролем с первого шага
На этом экране вы можете легко и гибко настроить торговый аккаунт под свои цели. Выбирайте тип аккаунта, платформу, размер депозита, дополнительные опции и применяйте купоны - всё это в одном месте. Интуитивный интерфейс позволяет быстро сравнить условия, увидеть итоговую стоимость и перейти к оплате удобным способом.
Axcera делает процесс старта максимально простым, чтобы вы могли сосредоточиться на главном — трейдинге и росте капитала.
Axcera делает процесс старта максимально простым, чтобы вы могли сосредоточиться на главном — трейдинге и росте капитала.
Раздел с ключевой информацией по сделкам и выводу средств.
На экране «Сделки» список активных и закрытых позиций, статистика по счёту и графики для анализа эффективности.
Экран «Вывод средств» показывает доступную сумму, комиссию, календарь транзакций и уровень консистентности — для планирования и оценки стабильности торговли.
Экран «Вывод средств» показывает доступную сумму, комиссию, календарь транзакций и уровень консистентности — для планирования и оценки стабильности торговли.
Финальный шаг: легко, прозрачно, уверенно
- Экран оформления покупки выстроен для быстрого и понятного завершения заказа. Чёткая структура, наглядные расчёты и выбор способа оплаты без лишних шагов снижают нагрузку на пользователя и упрощают принятие решения.
Прозрачность итоговой стоимости и постоянная видимость ключевых данных усиливают доверие и повышают конверсию.
Онбординг в портале построен с упором на простоту и комфорт для пользователя:
Такой подход снижает порог входа и позволяет пользователю быстро погрузиться в платформу, не отвлекаясь на технические детали.
- Чёткая структура и последовательные шаги
- Минимум обязательных полей на старте
- Подсказки и информативные сообщения на каждом этапе
- Восстановление доступа в один клик
- Регистрация занимает менее минуты
Такой подход снижает порог входа и позволяет пользователю быстро погрузиться в платформу, не отвлекаясь на технические детали.
Интерфейс адаптирован под мобильные устройства, чтобы обеспечить пользователю полный доступ к платформе в любое время и в любом месте. Быстрый вход, сохранённые данные, удобные кликабельные элементы и чёткая структура позволяют не терять контроль над процессами даже в движении.
Особое внимание уделено UX: все элементы остаются интуитивно понятными, а ключевые действия доступны в один тап.
Особое внимание уделено UX: все элементы остаются интуитивно понятными, а ключевые действия доступны в один тап.
Мобильная версия: удобство и доступ 24/7
Для проекта была разработана полноценная дизайн-система, охватывающая типографику, цвета, сетки, компоненты, состояния и интеракции.
Это позволило ускорить работу команды, упростить внедрение новых фич и обеспечить визуальную целостность на всех платформах — от десктопа до мобильного.
Особое внимание уделено доступности, адаптивности и гибкости в использовании
Это позволило ускорить работу команды, упростить внедрение новых фич и обеспечить визуальную целостность на всех платформах — от десктопа до мобильного.
Особое внимание уделено доступности, адаптивности и гибкости в использовании
Единая дизайн-система: масштабируемость и консистентность
- Дизайн-система стала фундаментом для устойчивого роста продукта: она не только ускоряет разработку и упрощает масштабирование, но и поддерживает единый визуальный язык, делая пользовательский опыт стабильным и узнаваемым на всех уровнях.
✦ Что важно, как дизайнеру
✦ Выводы и рефлексия
Проект Axcera стал для меня возможностью не просто спроектировать интерфейс - а выстроить продуктовое мышление внутри дизайн-процесса. Здесь важен был не только визуальный результат, но и то, как он влияет на пользователей, бизнес и команду.
Этот кейс напомнил, что хороший интерфейс - это не только «красиво», но и понятно, предсказуемо и честно по отношению к пользователю.
Каждое решение - от того, как выглядит кнопка, до того, как структурированые данные влияют на доверие к продукту.
Работая над Axcera, я старалась всегда держать в фокусе именно этот принцип: дизайн - это инструмент, который помогает принимать уверенные решения.
Каждое решение - от того, как выглядит кнопка, до того, как структурированые данные влияют на доверие к продукту.
Работая над Axcera, я старалась всегда держать в фокусе именно этот принцип: дизайн - это инструмент, который помогает принимать уверенные решения.
Особенно ценно было работать в связке с продактом и разработкой: это дало возможность глубже понять цели бизнеса, говорить с командой на одном языке и быстро проверять гипотезы.
Удалось решить сразу несколько важных задач: — сформировать единый шаблон портала, который масштабируется под разные команды и сценарии; — улучшить пользовательский опыт за счёт логичной структуры, наглядной подачи метрик и продуманного онбординга; — повысить скорость работы команды благодаря системному UI-kit’у и прозрачному дизайну процессов.
